Widget API
Query Params
| Parameter | Value | Description |
|---|---|---|
| onload | <function name> | (Optional) The name of your custom callback function to be called once the CaptchaFox API has loaded. Must be defined before the API loads. |
| render | explicit | onload | (Optional) Whether or not to render the widget automatically. Defaults to onload. |
| lang | <language code> | (Optional) Forces a specific localization. By default, CaptchaFox auto-detects the user's locale. |
Parameters are set as key=value pairs following a ? after the script name. For instance, if you want to always render captchas in German, your script tag should look like this:
<script async defer src="https://cdn.captchafox.com/api.js?lang=de"></script>Multiple query params are separated by &:
<script async defer src="https://cdn.captchafox.com/api.js?lang=de&render=explicit"></script>Container Attributes
Additionally to the required data-sitekey attribute you can pass the following attributes to the container element:
| Attribute | Value | Description |
|---|---|---|
| data-sitekey | <your sitekey> | Required. Your CaptchaFox sitekey. |
| data-lang | <language code> | (Optional) Forces a specific localization. By default, CaptchaFox auto-detects the user's locale. |
| data-mode | inline | popup | hidden | (Optional) The mode the widget should be displayed in. Defaults to inline. |
| data-theme | light | dark | (Optional) The theme of the widget. Defaults to light. |
| data-callback | <function name> | (Optional) Called with the response token after successful verification. |
| data-expired-callback | <function name> | (Optional) Called when the response expires. |
| data-fail-callback | <function name> | (Optional) Called after unsuccessful verification |
| data-close-callback | <function name> | (Optional) Called when the challenge was closed |
| data-error-callback | <function name> | (Optional) Called when CaptchaFox encounters an error. Inform the user that they should retry. |
Example:
<div
class="captchafox"
data-sitekey="YOUR_SITEKEY"
data-lang="es"
data-callback="verifyAndSubmit"
data-error-callback="showError"
></div>Error Codes
If the CaptchaFox widget encounters an error, an error code is sent to the error event (e.g. data-error-callback).
Below you will find a list of possible errors and their causes:
| Error | Description |
|---|---|
| internal-error | The widget has encountered an internal error. |
| load-challenge-error | The challenge could not be loaded. |
| verify-challenge-error | The verification could not be performed. |
| load-audio-error | The audio challenge could not be loaded correctly. |
| load-slide-error | The slide challenge could not be loaded correctly. |
| network-error | A network error has occurred. |
| challenge-aborted | The challenge has been aborted by the user, e.g. by closing the modal. (Only relevant for hidden mode) |
| rate-limited | The user has sent too many requests. |
JavaScript API
The JavaScript tag exposes the captchafox window object that provides methods to customize the CaptchaFox behavior.
captchafox.render(containerElement, options)
Renders the CaptchaFox widget inside the container element and returns a unique widgetId.
| Parameter | Value | Description |
|---|---|---|
| containerElement | HTMLElement | string | The HTML Element the Widget should be rendered into. |
| options | <object> | An object of configuration parameters. See Options |
Options
| Attribute | Value | Description |
|---|---|---|
| sitekey | <your sitekey> | Required. Your CaptchaFox sitekey. |
| lang | <language code> | (Optional) Forces a specific localization. By default, CaptchaFox auto-detects the user's locale. |
| mode | inline | popup | hidden | (Optional) The mode the widget should be displayed in. Defaults to inline. |
| theme | light | dark | ThemeDefinition | (Optional) The theme of the widget. Defaults to light. |
| i18n | <object> | (Optional) i18n configuration. Allows overriding i18n labels for specific languages. |
| onVerify | <function> | (Optional) Called with the response token after successful verification. |
| onExpire | <function> | (Optional) Called when the response expires. |
| onFail | <function> | (Optional) Called after unsuccessful verification |
| onClose | <function> | (Optional) Called when the challenge was closed |
| onError | <function> | (Optional) Called when CaptchaFox encounters an error. Inform the user that they should retry. |
captchafox.reset(widgetId)
Resets a specific CaptchaFox widget.
| Parameter | Value | Description |
|---|---|---|
| widgetId | number | (Optional) Unique ID for a widget. Defaults to the first rendered widget. |
captchafox.remove(widgetId)
Removes a specific CaptchaFox widget from the DOM.
| Parameter | Value | Description |
|---|---|---|
| widgetId | number | (Optional) Unique ID for a widget. Defaults to the first rendered widget. |
captchafox.getResponse(widgetId)
Gets the response for a specific CaptchaFox widget.
| Parameter | Value | Description |
|---|---|---|
| widgetId | number | (Optional) Unique ID for a widget. Defaults to the first rendered widget. |
captchafox.execute(widgetId)
Programattically triggers the CaptchaFox challenge flow. Used in a custom integration or when setting mode to hidden.
| Parameter | Value | Description |
|---|---|---|
| widgetId | number | (Optional) Unique ID for a widget. Defaults to the first rendered widget. |
Upon successful completion of the challenge, it will resolve with the response token. In case of an error, it will reject.
try {
const token = await captchafox.execute(widgetId);
console.log(token);
} catch (error) {
console.error(error);
}