Events and lifecycle - Docs

The widget emits DOM events on its element.
They bubble, so you can also listen on the form or on document.
The same events are available through widget.addEventListener().

JavaScript

const el = document.querySelector('.cdp-captcha');
const button = document.querySelector('#send');
button.disabled = true;

el.addEventListener('cdpcaptcha:widget.complete', (ev) => {
  console.log('response', ev.detail.response);
  button.disabled = false;
});
el.addEventListener('cdpcaptcha:widget.error', (ev) => {
  console.warn('captcha error', ev.detail.error.code);
  button.disabled = false; // let the visitor submit; your server decides
});
el.addEventListener('cdpcaptcha:widget.expire', () => { button.disabled = true; });

Events

Event	When
`cdpcaptcha:widget.complete`	The check passed. detail.response holds the token for your server.
`cdpcaptcha:widget.error`	Something failed (network, sitekey, rate limit). detail.error.code says what. The visitor can click to retry.
`cdpcaptcha:widget.expire`	The completed response expired because the page stayed open too long. The visitor can click to restart.
`cdpcaptcha:widget.reset`	reset() was called.
`cdpcaptcha:widget.statechange`	Any state change; detail.state is the new state.

Every event carries detail = { name, state, response, id, error }.
error is null unless the state is error;
then it is { code, detail }.

States

State	Meaning
`init`	Widget object created, element not rendered yet.
`unactivated`	Rendered, waiting for a start (click, focus, auto or start()).
`requesting`	Fetching a puzzle from the server.
`solving`	The Web Worker is computing; the progress bar moves.
`solved`	One-click mode only: solved, waiting for the click.
`completed`	Done. The hidden field holds the response.
`expired`	The response is no longer valid; the hidden field holds ".EXPIRED".
`error`	Failed; the hidden field holds ".ERROR".
`reset`	After reset(); behaves like unactivated.
`destroyed`	After destroy(); the element is empty and the widget cannot be used again.

Error codes

Code	Meaning
`network_error`	The browser could not reach the API.
`sitekey_missing`	The element has no sitekey.
`sitekey_invalid`	Unknown or revoked sitekey, or the page origin is not allowed for it.
`rate_limited`	This address requested too many puzzles in a short time.
`other`	Anything else; detail has a short description.