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

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 Altcha.org",
  "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>",
  "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', () => {
  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>