@swetrix/captcha

v2.3.0

Published

16 days ago

Swetrix CAPTCHA

0High
0Medium
0Low

blaumaus

analytics metrics monitoring privacy swetrix

Description

Swetrix CAPTCHA is a privacy-oriented, simple and opensource CAPTCHA service.

See the full documentation at https://docs.swetrix.com/captcha/introduction

Features

Privacy-focused: No tracking, no cookies
Accessible: Full keyboard navigation, ARIA support, screen reader announcements, respects prefers-reduced-motion
Progress indicator: Visual progress bar during verification
Auto theme detection: Automatically matches browser's light/dark mode preference
Lightweight: Minimal footprint, fast loading

Usage

Script tag

<div class="swecaptcha" 
     data-project-id="YOUR_PROJECT_ID" 
     data-theme="auto">
</div>
<script src="https://cdn.swetrixcaptcha.com/captcha-loader.js" defer></script>

npm

npm install @swetrix/captcha

import '@swetrix/captcha'

The package automatically renders .swecaptcha elements when the DOM is ready. You can also trigger a reload manually:

import { forceLoadCaptcha, loadCaptcha } from '@swetrix/captcha'

// Render any .swecaptcha elements that are not initialised yet.
loadCaptcha()

// Re-render all .swecaptcha elements, replacing existing widgets.
forceLoadCaptcha()

Options

| Attribute | Description | Values | Default | |-----------|-------------|--------|---------| | data-project-id | Your project ID | Valid project ID | Required | | data-theme | Color theme | auto, light, dark | auto | | data-response-input-name | Hidden input name | Any string | swetrix-captcha-response | | data-lang | Force a specific language | en, de, fr, pl, uk, hu | Auto-detected | | data-asset-url | Custom URL for CAPTCHA package assets | Any absolute or relative URL | https://cdn.swetrixcaptcha.com/dist/ |

Language Support

The widget supports English, German, French, Polish, Ukrainian, and Hungarian.

Language is detected automatically in this order:

data-lang attribute on the widget element
lang attribute on parent elements (e.g., <html lang="de">)
Browser's preferred language

Theme Options

auto: Automatically detects user's browser theme preference using prefers-color-scheme
light: Forces light theme
dark: Forces dark theme

Development

To build the captcha run:

npm run build

After you build it, a new folder dist will appear. You can run test.html file via an extension like Live server to test it (don't forget to set up a valid project ID or one of our dummy project IDs).

License

Swetrix CAPTCHA client is released under the MIT licence, see LICENSE.

Bugs and security

Swetrix is open to pull-requests. Feel free to propose new features or submit bug requests via pull reuqests.
For severe security issues, please contact us at [email protected]

Contact

You can contact us via email at [email protected]