Widget Customization

Appearance

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.

Localization

Version 2.0+ of the widget includes built-in support for 48+ languages. For implementation details, see our internationalization guide.

To override the default translations, use the strings property with a JSON-encoded string containing your custom messages:

{
  "ariaLinkLabel": "Visit Altcha.org",
  "enterCode": "Enter code",
  "enterCodeAria": "Enter code you hear. Press Space to play audio.",
  "error": "Verification failed. Try again later.",
  "expired": "Verification expired. Try again.",
  "footer": "Protected by <a href=\"https://altcha.org/\" target=\"_blank\" aria-label=\"Visit Altcha.org\">ALTCHA</a>",
  "getAudioChallenge": "Get an audio challenge",
  "label": "I'm not a robot",
  "loading": "Loading...",
  "reload": "Reload",
  "verify": "Verify",
  "verificationRequired": "Verification required!",
  "verified": "Verified",
  "verifying": "Verifying...",
  "waitAlert": "Verifying... please wait."
}

Programmatic Configuration

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

window.addEventListener('load', () => {
  document.querySelector('#altcha').configure({
    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', ...).

Examples

Dark theme

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

CSS variables

<altcha-widget
  style="--altcha-color-border:pink;--altcha-border-width:3px;--altcha-border-radius:15px;"
></altcha-widget>

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.

<altcha-widget
  strings="{&quot;label&quot;:&quot;Ich bin kein Bot&quot;}"
></altcha-widget>

Hide branding

<altcha-widget
  hidelogo
  hidefooter
></altcha-widget>