Integration flow
A complete integration has three pieces: a public site key in the widget endpoint, a widget mounted in the protected form, and server-side verification before your business logic continues. The project integration tab gives you the exact endpoint, site key, backend secret, helper snippets, and self-hosted widget download when your plan allows it.
Create a project, add the production domain, and copy the public site key from the project integration panel.
Load widget.js and place human-proof inside the form. Keep data-variant and data-trigger visible in the markup so the behavior is obvious later.
Read humanproof-token on the server and validate it with your backend secret.
Minimum working example
Use this shape first, then adjust the variant, trigger, labels, and styling after verification works end to end.
<script src="https://humanproof.eu/widget.js" defer></script>
<form method="POST" action="/contact">
<input type="email" name="email" required>
<human-proof
data-api-endpoint="https://humanproof.eu/api/captcha/site_your_public_key"
data-variant="default"
data-trigger="click"
></human-proof>
<button type="submit">Send</button>
</form>const verify = await fetch('https://humanproof.eu/api/siteverify', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
secret: process.env.HUMANPROOF_SECRET,
response: form['humanproof-token'],
}),
});
const result = await verify.json();
if (!result.success) {
throw new Error('Verification failed');
}
// Continue with the protected action.Go live checklist
- Production domain is configured and synced.
- Testing domains are separated from the production domain.
- Backend secret is stored only in server environment variables.
- Failed verification prevents the protected action.
- The form handles expired, failed, and reset widget states.