When to use it
Use programmatic mode when you need to solve during a custom submit flow, enable a disabled button only after verification, coordinate multiple form steps, or render an invisible widget that has no direct click target.
Example
<script src="https://humanproof.eu/widget.js" defer></script>
<form id="signup" method="POST" action="/signup">
<input type="email" name="email" required>
<human-proof
data-api-endpoint="https://humanproof.eu/api/captcha/site_your_public_key"
data-variant="invisible"
></human-proof>
<button type="submit">Create account</button>
</form>
<script>
const form = document.querySelector('#signup');
const widget = form.querySelector('human-proof');
const token = () => form.querySelector('[name="humanproof-token"]')?.value;
form.addEventListener('submit', async (event) => {
if (token()) return;
event.preventDefault();
try {
const result = await widget.solve();
if (result.success) {
form.requestSubmit();
}
} catch (error) {
console.warn('HumanProof failed', error);
}
});
</script>Methods
| solve() | Starts or reuses the current challenge solve and resolves with the token result. |
|---|---|
| reset() | Clears the token and returns the widget to the idle state. |
Events
widget.addEventListener('solve', (event) => {
console.log(event.detail.token);
});
widget.addEventListener('expired', () => {
submit.disabled = true;
});
widget.addEventListener('error', (event) => {
console.warn(event.detail);
});