Personalização de Widget

Aparência

A aparência do widget pode ser facilmente ajustada modificando variáveis CSS, permitindo a personalização de vários elementos visuais:

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

Ajuste essas variáveis para combinar com o esquema de design do seu site, garantindo uma integração perfeita do widget com a estética do seu UI/UX.

Localização

Localize facilmente e adapte as mensagens do widget para atender às preferências de idioma do seu público por meio da propriedade strings. Esta propriedade contém uma string codificada em JSON com traduções para várias mensagens do widget:

{
  "ariaLinkLabel": "Visite Altcha.org",
  "error": "Falha na verificação. Tente novamente mais tarde.",
  "expired": "Verificação expirada. Tente novamente.",
  "footer": "Protegido por <a href=\"https://altcha.org/\" target=\"_blank\" aria-label=\"Visite Altcha.org\">ALTCHA</a>",
  "label": "Eu não sou um robô",
  "verified": "Verificado",
  "verifying": "Verificando...",
  "waitAlert": "Verificando... por favor, aguarde."
}

Personalize essas mensagens para ressoar melhor com seus usuários ou se alinhar com sua marca. Ajuste as palavras, tom ou até mesmo os links dentro dessas mensagens para oferecer uma experiência personalizada e amigável ao usuário.

Configuração Programática

Para configurar o widget programaticamente, utilize o método configure():

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

Todas as propriedades de configuração são suportadas. Para definir o objeto de desafio, utilize a propriedade de configuração challenge. Consulte o README para informações sobre as propriedades e tipos de configuração.

Certifique-se de que o método configure() seja chamado após o carregamento do script do ALTCHA, como dentro de window.addEventListener('load', ...).

Exemplos

Tema escuro

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

Variáveis CSS

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

Etiquetas personalizadas

O atributo strings aceita uma string codificada em JSON. Em HTML, você também deve codificar as entidades HTML (por exemplo, com html-entities). Para uma personalização mais simples, considere usar a configuração programática em vez disso.

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

Ocultar marca

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