Skip to main content

Client-side usage


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.


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="" defer></script>

Using NPM

Not yet supported


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.


You can customise the appearance of the CAPTCHA widget by adding the following attributes to the .swecaptcha element:

data-project-idstringThe ID of your CAPTCHA project (REQUIRED).
data-themestringThe theme of the CAPTCHA widget. Possible values: light (default), dark.
data-response-input-namestringName of the token input element. Default: swetrix-captcha-response.

Widget sizes

The CAPTCHA widget has several sizes based on the state of the CAPTCHA challenge and the widget will automatically adjust its size.

Here's a table with the possible sizes of the widget that can help you when designing your website:

Manual challenge300px200px