Developer Documentation

Protect pages with Proof-of-Human. Start free — scale when you need inline flows.

Welcome to the Level3ID™ Developer Docs. This page outlines how to protect your pages using our human verification technology.

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

We never store user images — all captures are encrypted end-to-end and processed in real time. Failed or partial uploads are purged automatically every 24 hours.

Place one line in the head of the page to protect. Unverified visitors are redirected for biometric 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 — no redirect. Requires Premium and works with Destination ID 2 or 3 (not 1).

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