Client-side usage
Introduction
You can use the CAPTCHA widget on any page of your website by using our CAPTCHA loader widget. Swetrix CAPTCHA relies on JavaScript to work, so you have to include the widget on your page.
Installation
Using CDN
The easiest way to add the CAPTCHA script to your website is to edit the HTML code of your website. To do this, paste the following code snippet into the header section (<head> tag) of your website:
<script src="https://cdn.swetrixcaptcha.com/captcha-loader.js" defer></script>
Using NPM
Not yet supported
Usage
Once the CAPTCHA script is installed (or embedded) on your website, you can use the CAPTCHA widget by adding the following HTML code to your page:
<div class="swecaptcha" data-project-id="YOUR_PROJECT_ID"></div>
Inside the .swecaptcha element, the widget will automatically render a frame with the CAPTCHA challenge and an input field where the token will be stored. The CAPTCHA is designed to be embedded to HTML forms, but you can use it anywhere on your website.
After the CAPTCHA loader script is loaded, it will add a window.swetrixCaptchaForceLoad function to the global scope. You can use this function to forcefully reload the CAPTCHA widget. This function can be useful if you changed the CAPTCHA configuration and want to reload the widget without reloading the page.
Customisation
You can customise the appearance of the CAPTCHA widget by adding the following attributes to the .swecaptcha element:
| Attribute | Type | Description |
|---|---|---|
data-project-id | string | The ID of your CAPTCHA project (REQUIRED). |
data-theme | string | The theme of the CAPTCHA widget. Possible values: auto (default), light, dark. |
data-response-input-name | string | Name of the token input element. Default: swetrix-captcha-response. |
data-api-url | string | The URL of the CAPTCHA API. Default: https://api.swetrixcaptcha.com/v1/captcha. If you're self-hosting Swetrix CE, you should put the URL of your API instance here, like [API_URL]/v1/captcha. Swetrix Cloud users should leave it as is. |
Widget sizes
The CAPTCHA widget has a default size of 302px wide and 66px high.
Help us improve Swetrix
Was this page helpful to you?