Widget Configuration

Customize the CAPTCHA widget appearance and behavior to match your website.

Installation

CDN

html

<script src="https://gkcaptcha.gatekeeper.sa/widget/gk-captcha.js" async defer></script>

NPM

terminal

npm install @gkcaptcha/react

app.js

import { GkCaptcha } from '@gkcaptcha/react';

export function MyForm() {
  return (
    <GkCaptcha
      siteKey="your-site-key"
      onVerify={(token) => console.log('Verified:', token)}
    />
  );
}

Configuration Options

Option	Type	Default	Description
siteKey	string	required	Your site public key
mode	string	checkbox	Widget display mode
theme	string	light	Color theme (light/dark)
language	string	auto	Interface language (en/ar/auto)
onSuccess	function	-	Called on successful verification
onError	function	-	Called on verification error
onExpired	function	-	Called when token expires

Widget Modes

Checkbox Mode (Default)

Traditional checkbox that users click to verify.

javascript

gkCaptcha.render('container', {
  siteKey: 'your-site-key',
  mode: 'checkbox'
});

Invisible Mode

Automatically triggered on form submission.

javascript

gkCaptcha.render('container', {
  siteKey: 'your-site-key',
  mode: 'invisible'
});

Themes

javascript

// Light theme (default)
gkCaptcha.render('container', {
  siteKey: 'your-site-key',
  theme: 'light'
});

// Dark theme
gkCaptcha.render('container', {
  siteKey: 'your-site-key',
  theme: 'dark'
});

Methods

reset()

Reset the widget to its initial state.

javascript

const widget = gkCaptcha.render('container', { siteKey: 'your-site-key' });

// Later...
widget.reset();

execute()

Programmatically trigger verification (for invisible mode).

javascript

const widget = gkCaptcha.render('container', {
  siteKey: 'your-site-key',
  mode: 'invisible'
});

document.getElementById('submit-btn').addEventListener('click', function() {
  widget.execute();
});

getToken()

Get the current verification token.

javascript

const token = widget.getToken();
if (token) {
  // Token is available
}

Accessibility

The widget is fully accessible and meets WCAG 2.2 AA standards:

Full keyboard navigation (Tab, Enter, Space)
Screen reader announcements
High contrast support
Focus indicators
RTL layout support for Arabic