DocumentationClient-side Rendering
v4Guard's Checkpoint current renderization is done via implicit invocation, meaning that the widget will be rendered automatically when the script is loaded.
Render the widget
You have to add a element to your site with the v4guard-checkpoint class, which will be automatically scanned and replaced by the widget. The widget dimensions will be 310x90 pixels.
By default, the widget will generate an invisible input with the name v4g-checkpoint-response which will be automatically filled with the response, and will be sent to the server on form submission with the rest of the form data.
Check out the demo to see how the widget works and how it's integrated in the client-side.
Configuration
The Checkpoint's widget can be configured by adding the following parameters attributes on the element with the v4guard-checkpoint class.
| Parameter | Data Attribute | Description |
|---|---|---|
| Site Key | data-sitekey | The widget must have a valid site key, which is associated to your v4Guard Account. |
| Action | data-action | A user's defined field, which will be sent and returned on the validation response. Useful for dispalying specific analytics of the widget's usage. (For example: signup, login...). This field can only contain up to 32 alphanumeric characters, including _ and -. |
| Theme | data-theme | The widget appearance, which can be either light, dark or auto.Defaults to auto, which uses the user's system preferences. |
| Language | data-language | The widget language, which can be either auto (by default, to respect browser language), or any of the supported languages.When auto, only available languages will be used, using en as fallback. |
| Callback | data-callback | A JavaScript callback function that will be called when the challenge returns a response. The callback will receive the response token as a parameter. |
| Expired Callback | data-expired-callback | A JavaScript callback function that will be called when the challenge expires and the user needs to refresh the website to get a new challenge. |
Supported Languages
The Checkpoint widget supports the following languages:
| Language | Code |
|---|---|
| Automatic (Detect) | auto |
| Spanish | es, es_ES |
| English | en, en_US |
| Korean (한국어) | ko, ko_KR |
| Русский | ru, ru_RU |
| Polski | pl, pl_PL |
| Français | fr, fr_FR |
| Japanese (日本語) | ja, ja_JP |
| Chinese (简体中文) | zh, zh_CN |