Personnalisation du widget

Apparence

L’apparence du widget peut être ajustée de manière transparente en modifiant les variables CSS, permettant une personnalisation facile de divers éléments visuels :

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

Ajustez ces variables pour correspondre au schéma de conception de votre site Web, assurant une intégration harmonieuse du widget avec votre esthétique UI/UX.

Localisation

Localisez facilement et adaptez les messages du widget pour correspondre aux préférences linguistiques de votre public via la propriété strings. Cette propriété contient une chaîne JSON encodée comprenant des entrées de traduction pour divers messages du widget :

{
  "ariaLinkLabel": "Visitez Altcha.org",
  "error": "Échec de la vérification. Réessayez plus tard.",
  "expired": "Vérification expirée. Réessayez.",
  "footer": "Protégé par <a href=\"https://altcha.org/\" target=\"_blank\" aria-label=\"Visitez Altcha.org\">ALTCHA</a>",
  "label": "Je ne suis pas un robot",
  "verified": "Vérifié",
  "verifying": "Vérification en cours...",
  "waitAlert": "Vérification en cours... veuillez patienter."
}

Personnalisez ces messages pour mieux résonner avec vos utilisateurs ou s’aligner sur votre image de marque. Ajustez les termes, le ton, voire les liens au sein de ces messages pour offrir une expérience personnalisée et conviviale.

Configuration programmatique

Pour configurer le widget de manière programmatique, utilisez la méthode configure() :

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

Toutes les propriétés de configuration sont prises en charge. Pour définir l’objet de défi, utilisez la propriété de configuration challenge. Consultez le README pour les propriétés et types de configuration.

Assurez-vous que la méthode configure() est appelée après le chargement du script ALTCHA, par exemple dans window.addEventListener('load', ...).

Exemples

Thème sombre

<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>

Étiquettes personnalisées

L’attribut strings accepte une chaîne JSON encodée. En HTML, vous devez également encoder les entités HTML (par exemple avec html-entities). Pour une personnalisation plus simple, envisagez d’utiliser la configuration programmatique à la place.

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

Masquer la marque

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