Add GotCHA to your website

Prerequisites

Before you start, make sure you have:

• An account and a site key on the GotCHA dashboard

• A basic HTML form on your website

How to integrate GotCHA on your Website

1

Get Your Site Key

• Log into your GotCHA dashboard

• Go to your application API Keys tab

• Copy your Site Key. Looks something like E8DmBZote7dXw6p-e4h6LknEAs95bxkco8FKcuJxSJNCbk0NCRll9ERu7XDVwzhr

• Keep this handy - you'll need it in the next step

2

Add GotCHA to your HTML Form

Take your existing form and add the GotCHA widget div inside it:

<form id="login">
  <!-- Your existing form fields -->
  <input type="text" name="username" placeholder="Username" />
  <input type="password" name="password" placeholder="Password" />
  
  <!-- Add the GotCHA widget here -->
  <div
    class="gotcha"
    data-sitekey="YOUR_ACTUAL_SITE_KEY_HERE"
  ></div>
  
  <br />
  <input type="submit" value="Submit" />
</form>

You MUST replace YOUR_ACTUAL_SITE_KEY_HERE with your real site key from step 1.

For example, if your site key is E8DmBZote7dXw6p-e4h6LknEAs95bxkco8FKcuJxSJNCbk0NCRll9ERu7XDVwzhr, your div should look like:

<div
  class="gotcha"
  data-sitekey="E8DmBZote7dXw6p-e4h6LknEAs95bxkco8FKcuJxSJNCbk0NCRll9ERu7XDVwzhr"
></div>

3

Handle Form Submission with JavaScript

Add this JavaScript code to handle form submission and capture the CAPTCHA response:

<script>
  document.getElementById("login").addEventListener("submit", function(e) {
    e.preventDefault(); // Stop the form from submitting normally
    
    // Get all form data including the GotCHA response
    const formData = new FormData(e.target);
    
    // The GotCHA token is automatically stored in 'gotcha-response'
    const gotchaToken = formData.get("gotcha-response");
    
    // Alternatively, use `gotcha` object from anywhere. Defaults to widgetId = 0
    // const gotchaToken = gotcha.getResponse();
    
    // Here's where you'd normally send the data to your server
    // Example:
    // fetch('/submit-form', {
    //   method: 'POST',
    //   body: formData
    // });
  });
</script>