Personalización del Widget

Apariencia

La apariencia del widget se puede ajustar fácilmente modificando variables CSS, lo que permite la personalización de diversos elementos visuales de forma sencilla:

: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;
}

Ajusta estas variables para que coincidan con el esquema de diseño de tu sitio web, garantizando una integración perfecta del widget con la estética de tu interfaz de usuario.

Localización

Fácilmente localiza y adapta los mensajes del widget según las preferencias de idioma de tu audiencia a través de la propiedad strings. Esta propiedad contiene una cadena codificada en JSON que incluye entradas de traducción para varios mensajes del widget:

{
  "ariaLinkLabel": "Visitar Altcha.org",
  "error": "La verificación falló. Inténtalo de nuevo más tarde.",
  "expired": "La verificación ha caducado. Inténtalo de nuevo.",
  "footer": "Protegido por <a href=\"https://altcha.org/\" target=\"_blank\" aria-label=\"Visitar Altcha.org\">ALTCHA</a>",
  "label": "No soy un robot",
  "verified": "Verificado",
  "verifying": "Verificando...",
  "waitAlert": "Verificando... por favor espera."
}

Personaliza estos mensajes para resonar mejor con tus usuarios o alinearte con tu marca. Ajusta el contenido, tono o incluso los enlaces dentro de estos mensajes para ofrecer una experiencia personalizada y amigable.

Configuración Programática

Para configurar el widget de forma programática, utiliza el método configure():

window.addEventListener('load', () => {
  document.querySelector('#altcha').configure({
    challenge: {
      algorithm: 'SHA-256',
      challenge: '...',
      salt: '...',
      signature: '...',
    },
    strings: {
      label: 'Ich bin kein Bot',
    },
  });
});

Todas las propiedades de configuración son compatibles. Para establecer el objeto de desafío, utiliza la propiedad de configuración challenge. Consulta el archivo README para ver las propiedades y tipos de configuración.

Asegúrate de que el método configure() se llame después de que se cargue el script de ALTCHA, por ejemplo, dentro de window.addEventListener('load', ...).

Ejemplos

Tema oscuro

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

Variables CSS

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

Etiquetas personalizadas

El atributo strings acepta una cadena codificada en JSON. En HTML, también debes codificar las entidades HTML (por ejemplo, con html-entities). Para una personalización más sencilla, considera usar configuración programática en su lugar.

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

Ocultar marca

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