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 [BASE_URL]/backend/v1/captcha. Swetrix Cloud users should leave it as is. |
data-lang | string | Force a specific language for the widget (see Language support). |
Language support
The CAPTCHA widget supports the following languages:
| Language | Code |
|---|---|
| English | en |
| German | de |
| French | fr |
| Polish | pl |
| Ukrainian | uk |
Automatic language detection
The widget automatically detects the language to use based on the following priority:
- Widget
data-langattribute: If thedata-langattribute is set on the.swecaptchaelement, that language is used. - HTML
langattribute: The widget looks at the first HTMLlangattribute it finds in its parent elements (e.g.,<html lang="de">). - Browser language: If no
langattribute is found above the widget or an unsupported language is requested, the language is determined by the browser's preferred language. This is usually the user's operating system language.
Forcing a specific language
To force a specific language, set the data-lang attribute on the widget element:
<div class="swecaptcha" data-project-id="YOUR_PROJECT_ID" data-lang="de"></div>
This will display the widget in German regardless of the page's language or the user's browser settings.
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?