Widget Modes

Choose the display mode that best fits your user experience.

Checkbox Mode

The classic approach. Users click a checkbox to verify they are human. Best for high-security forms like login and registration.

html

<gk-captcha sitekey="pk_live_..."></gk-captcha>

When to use

Login and registration forms
Payment pages
Forms requiring explicit user consent
When you need visual confirmation of protection

Invisible Mode

No visible widget. Verification happens in the background when triggered. Best for seamless user experience.

app.js

const form = document.querySelector('#signup-form');
const captcha = document.createElement('gk-captcha');
captcha.setAttribute('sitekey', 'pk_live_...');
captcha.setAttribute('mode', 'invisible');
form.appendChild(captcha);

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  try {
    await customElements.whenDefined('gk-captcha');
    await captcha.getToken(); // also fills the gk-captcha-token field
    // URL-encoded, so a standard express.urlencoded() server reads req.body['gk-captcha-token'].
    await fetch(form.action, { method: 'POST', body: new URLSearchParams(new FormData(form)) });
  } catch (error) {
    // Show an error message. Never send the form without a token.
  } finally {
    captcha.reset(); // each token works once
  }
});

When to use

Contact forms
Comment sections
Search boxes
When UX is priority over visibility

Note: In invisible mode, if the risk score is high, a challenge may still appear to the user.

Mode Comparison

Mode	User Friction	Security	Use Case
checkbox	Medium	High	Login, payments
invisible	Low	Medium	Contact forms