Skip to content

Widget Customization


The widget’s appearance can be seamlessly adjusted by modifying CSS variables, allowing for easy customization of various visual elements:

:root {
--altcha-border-width: 1px;
--altcha-border-radius: 3px;
--altcha-color-base: #ffffff;
--altcha-color-border: #a0a0a0;
--altcha-color-text: currentColor;
--altcha-color-border-focus: currentColor;
--altcha-color-error-text: #f23939;
--altcha-color-footer-bg: #f4f4f4;
--altcha-max-width: 260px;

Adjust these variables to match your website’s design scheme, ensuring a seamless integration of the widget with your UI/UX aesthetics.


Easily localize and tailor the widget’s messages to suit your audience’s language preferences through the strings property. This property holds a JSON-encoded string comprising translation entries for various widget messages:

"ariaLinkLabel": "Visit",
"error": "Verification failed. Try again later.",
"expired": "Verification expired. Try again.",
"footer": "Protected by <a href=\"\" target=\"_blank\" aria-label=\"Visit\">ALTCHA</a>",
"label": "I'm not a robot",
"verified": "Verified",
"verifying": "Verifying...",
"waitAlert": "Verifying... please wait."

Customize these messages to better resonate with your users or align with your branding. Adjust the wording, tone, or even links within these messages to offer a personalized and user-friendly experience.

Programmatic Configuration

To configure the widget programmatically, use the configure() method:

window.addEventListener('load', () => {
challenge: {
algorithm: 'SHA-256',
challenge: '...',
salt: '...',
signature: '...',
strings: {
label: 'Ich bin kein Bot',

All configuration properties are supported. To set the challenge object, use the challenge configuration property. Refer to the README file for configuration properties and types.

Ensure that the configure() method is called after the ALTCHA script loads, such as within window.addEventListener('load', ...).


Dark theme

<div style="background-color:#333;color:#fff">

CSS variables


Custom labels

The strings attribute accepts a JSON-encoded string. In HTML, you also must encode the HTML entities (for example with html-entities). For simpler customization, consider using programmatic configuration instead.

strings="{&quot;label&quot;:&quot;Ich bin kein Bot&quot;}"

Hide branding