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 async defer 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="pk_live_..."
        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="pk_live_..."
        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="pk_live_..."
        onVerify={handleSuccess}
        theme="dark"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Vue.js

ContactForm.vue
<template>
  <form @submit="handleSubmit">
    <GkCaptcha siteKey="pk_live_..." @verify="handleVerify" />
    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { ref } from 'vue';
import { GkCaptcha } from '@gkcaptcha/vue';

const token = ref('');

const handleVerify = (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