Features Demo How it works Plans Docs Help
Start free Log in

Documentation

Install the widget

Load widget.js, render human-proof in your form, choose the widget variant and trigger, and submit the generated token.

Script

Load the HumanProof widget script once per page. Use defer so the browser can parse the page before registering the custom element.

<script src="https://humanproof.eu/widget.js" defer></script>

Markup

<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>

Variant and trigger

The two attributes most integrations change are data-variant and data-trigger. Keep them in the markup so future maintainers can see the intended widget behavior without opening the full reference.

Default visible
data-variant="default" data-trigger="click"

Visible verification box. Use it when the visitor should explicitly start verification.

Compact badge
data-variant="compact" data-trigger="interaction"

Small badge-style UI. Use it when verification should start after the first form interaction.

Invisible
data-variant="invisible" data-trigger="interaction"

No visible UI. Use interaction for background solving after form activity or call solve() from your submit flow.

<human-proof
  data-api-endpoint="https://humanproof.eu/api/captcha/site_your_public_key"
  data-variant="compact"
  data-trigger="interaction"
></human-proof>

Self-hosting

On Starter and higher, you can serve the same widget file from your own application, for example /assets/humanproof-widget.js, when a consent manager or corporate security gateway blocks third-party scripts. Keep data-api-endpoint pointed at HumanProof so domains, billing limits, agency client allocations, risk checks, and verification remain centralized.

The hosted widget loads its proof-of-work WASM from HumanProof at /widget/wasm. Self-hosted widget files try the same path on your script origin first, so either serve cap_wasm_bg.wasm there or set CAP_CUSTOM_WASM_URL before loading the widget.

<script>
  window.CAP_CUSTOM_WASM_URL = 'https://humanproof.eu/widget/wasm';
</script>
<script src="/assets/humanproof-widget.js" defer></script>

Download the current compiled widget from the project integration tab. Re-download it after HumanProof widget updates if you self-host.

Token field

By default the widget creates a hidden input named humanproof-token. Change it with data-hidden-field-name if your backend expects another name.

Start free