Widget-Anpassung

Aussehen

Das Aussehen des Widgets kann nahtlos angepasst werden, indem CSS-Variablen modifiziert werden, was eine einfache Anpassung verschiedener visueller Elemente ermöglicht:

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

Passen Sie diese Variablen an, um sie an das Design Ihrer Website anzupassen und eine nahtlose Integration des Widgets mit Ihrer UI/UX-Ästhetik zu gewährleisten.

Lokalisierung

Passen Sie die Nachrichten des Widgets leicht an, um die Spracheinstellungen Ihres Publikums zu berücksichtigen, indem Sie die strings-Eigenschaft verwenden. Diese Eigenschaft enthält eine JSON-codierte Zeichenfolge mit Übersetzungseinträgen für verschiedene Widget-Nachrichten:

{
  "ariaLinkLabel": "Besuchen Sie Altcha.org",
  "error": "Verifizierung fehlgeschlagen. Versuchen Sie es später erneut.",
  "expired": "Verifizierung abgelaufen. Versuchen Sie es erneut.",
  "footer": "Geschützt durch <a href=\"https://altcha.org/\" target=\"_blank\" aria-label=\"Besuchen Sie Altcha.org\">ALTCHA</a>",
  "label": "Ich bin kein Bot",
  "verified": "Verifiziert",
  "verifying": "Wird überprüft...",
  "waitAlert": "Wird überprüft... bitte warten."
}

Passen Sie diese Nachrichten an, um besser auf Ihre Benutzer einzugehen oder sie an Ihr Branding anzupassen. Passen Sie den Wortlaut, den Ton oder sogar die Links in diesen Nachrichten an, um ein personalisiertes und benutzerfreundliches Erlebnis zu bieten.

Programmatische Konfiguration

Um das Widget programmgesteuert zu konfigurieren, verwenden Sie die configure()-Methode:

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

Alle Konfigurationseigenschaften werden unterstützt. Verwenden Sie die challenge-Konfigurationseigenschaft, um das Challenge-Objekt festzulegen. Beachten Sie die README-Datei für Konfigurationseigenschaften und Typen.

Stellen Sie sicher, dass die configure()-Methode aufgerufen wird, nachdem das ALTCHA-Skript geladen wurde, z. B. innerhalb von window.addEventListener('load', ...).

Beispiele

Dunkles Thema

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

CSS-Variablen

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

Benutzerdefinierte Labels

Das Attribut strings akzeptiert eine JSON-codierte Zeichenfolge. Im HTML müssen Sie auch die HTML-Entities kodieren (zum Beispiel mit html-entities). Für eine einfachere Anpassung empfehlen wir die Verwendung der programmgesteuerten Konfiguration.

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

Branding ausblenden

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