Developer Documentation

Protect up to three pages with Proof-of-Human verification. Free to start, simple to integrate.

Welcome to the Level3ID™ Developer Docs. This page outlines how to protect critical actions with Humafy Proof-of-Human verification and required server-side token validation.

✅ External page protection with a single script tag (Destination ID 1)
🔐 Multi-page setups using Destination IDs 2 & 3
🧠 Internal flows via the Humafy Link Widget

We never store verification images. Captures are processed in real time, and protected endpoints must validate the returned token before continuing.

Place one line in the head of the page to protect. Unverified visitors are sent through Level3ID verification, then returned to your Success URL.

Copy & Paste This Snippet

<script src="https://level3id.com/js/level3id-security.js" data-api-key="YOUR_DESTINATION_ID_1"></script>

Inline verification within your app with no redirect. Use the Destination ID assigned to the protected page and verify the returned token server-side with Level3ID before processing the request.

Step 1: Include the Widget Script

<script src="https://level3id.com/face/js/link-verify-widget.js"></script>

Step 2: Trigger the Widget

document.getElementById('yourButtonId').addEventListener('click', () => {
  if (window.Level3ID && window.Level3ID.APIVerify) {
    window.Level3ID.APIVerify.start({
      apiKey: 'YOUR_WIDGET_API_KEY',
      onSuccess: () => {
        alert('Human verified. Proceeding...');
      },
      onFailure: (err) => {
        console.error('Verification failed:', err);
        alert('Verification failed.');
      }
    });
  }
});

Widget Setup Options

apiKey — Your Destination ID 2 or 3
onSuccess — Callback when verification passes
onFailure — Callback for fail/cancel

Create a hook to load and trigger the widget cleanly in React apps.

Hook: `useHumanfy`

import { useEffect, useState } from 'react';

declare global {
  interface Window { Level3ID: any; }
}

interface HumanfyOptions {
  apiKey: string;
  onSuccess: (jwtToken: string) => void;
  onFailure: (errorMessage: string) => void;
}

export const useHumanfy = () => {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    const scriptId = 'humanfy-widget-script';
    if (document.getElementById(scriptId)) { setIsLoaded(true); return; }

    const script = document.createElement('script');
    script.id = scriptId;
    script.src = 'https://level3id.com/face/js/link-verify-widget.js';
    script.async = true;
    script.onload = () => setIsLoaded(true);
    script.onerror = () => setIsLoaded(false);
    document.body.appendChild(script);

    return () => document.getElementById(scriptId)?.remove();
  }, []);

  const startVerification = (options: HumanfyOptions) => {
    if (isLoaded && window.Level3ID?.APIVerify) {
      window.Level3ID.APIVerify.start(options);
    } else {
      console.error('Humanfy widget not ready.');
    }
  };

  return { startVerification, isLoaded };
};

Use the Hook

import React from 'react';
import { useHumanfy } from '../hooks/useHumanfy';

export default function MyProtectedComponent() {
  const { startVerification, isLoaded } = useHumanfy();

  const handleProtectedAction = () => {
    startVerification({
      apiKey: 'YOUR_LEVEL3ID_WIDGET_API_KEY',
      onSuccess: (jwt) => alert('Verification OK!'),
      onFailure: (err) => alert('Verification failed: ' + err),
    });
  };

  return (
    <button onClick={handleProtectedAction} disabled={!isLoaded}>
      {isLoaded ? 'Verify & Proceed' : 'Loading...'}
    </button>
  );
}

Load the script globally, then start the widget on click. Validate the jwtToken server-side with pyjwt.

Template Snippet

<button id="verify-flask">Start Verification</button>
<script src="https://level3id.com/face/js/link-verify-widget.js"></script>
<script>
document.getElementById('verify-flask').addEventListener('click', () => {
  window.Level3ID.APIVerify.start({
    apiKey: 'YOUR_WIDGET_API_KEY',
    onSuccess: (jwt) => {
      fetch('/verify-token', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ token: jwt })
      }).then(() => location.href = '/protected-page');
    },
    onFailure: () => alert('Verification failed')
  });
});
</script>

Load the widget globally, then call it in a component method.

<template>
  <button @click="verifyHuman">Verify Me</button>
</template>

<script>
export default {
  methods: {
    verifyHuman() {
      if (window.Level3ID?.APIVerify) {
        window.Level3ID.APIVerify.start({
          apiKey: 'YOUR_WIDGET_API_KEY',
          onSuccess: (jwt) => console.log('Verified:', jwt),
          onFailure: () => alert('Verification failed.')
        });
      }
    }
  }
}
</script>

Load the script with next/script using the afterInteractive strategy; trigger client-side.

import Script from 'next/script';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script src="https://level3id.com/face/js/link-verify-widget.js" strategy="afterInteractive" />
    </>
  );
}

import { useState, useEffect } from 'react';

export default function VerifyButton() {
  const [ready, setReady] = useState(false);
  useEffect(() => { setReady(true); }, []);

  const handleVerification = () => {
    if (ready && window.Level3ID?.APIVerify) {
      window.Level3ID.APIVerify.start({
        apiKey: 'YOUR_WIDGET_API_KEY',
        onSuccess: (jwt) => console.log('Verified', jwt),
        onFailure: (e) => alert('Failed: ' + e)
      });
    }
  };

  return <button onClick={handleVerification}>Verify Me</button>;
}

Verify the human before accepting a form submission.

<form id="myForm">
  <!-- fields -->
  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault();

  window.Level3ID.APIVerify.start({
    apiKey: 'YOUR_WIDGET_API_KEY',
    onSuccess: (jwt) => {
      const formData = new FormData(this);
      formData.append('token', jwt);

      fetch('/your-endpoint', {
        method: 'POST',
        body: formData
      }).then(() => alert('Form submitted!'));
    },
    onFailure: () => alert('Verification failed')
  });
});
</script>

Stop bots. Verify humans. Protect your users.

Get Started Free See Developer Docs