Installation

Multiple ways to add gkCAPTCHA to your project.

CDN (Recommended for most projects)

The fastest way to get started. Add this script tag to your HTML:

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

The <code>async defer</code> attributes ensure the script loads without blocking your page.

Package Manager

For projects using a build system:

npm
npm install @gkcaptcha/react
yarn
yarn add @gkcaptcha/react
pnpm
pnpm add @gkcaptcha/react

Module Usage

ES Modules

app.js
import { GkCaptcha } from '@gkcaptcha/react';

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

CommonJS

app.js
const { GkCaptcha } = require('@gkcaptcha/react');

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

Framework Integrations

React / Next.js

ContactForm.tsx
import { GkCaptcha } from '@gkcaptcha/react';

export function ContactForm() {
  const handleSuccess = (token: string) => {
    // Send token to your server
  };

  return (
    <form>
      <GkCaptcha
        siteKey="your-site-key"
        onVerify={handleSuccess}
        theme="dark"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Vue.js

ContactForm.vue
<template>
  <form @submit="handleSubmit">
    <gk-captcha
      :site-key="siteKey"
      @success="handleSuccess"
      theme="dark"
    />
    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { ref } from 'vue';

const siteKey = 'your-site-key';
const token = ref('');

const handleSuccess = (t) => {
  token.value = t;
};
</script>

Requirements

  • Modern browser with JavaScript enabled
  • For npm package: Node.js 18+ recommended
  • A valid site key from your dashboard

Next Steps