Personalizzazione del widget

Aspetto

L’aspetto del widget può essere facilmente modificato regolando le variabili CSS, consentendo una personalizzazione semplice di vari elementi visivi:

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

Regola queste variabili per adattarle allo schema di design del tuo sito web, garantendo un’integrazione senza soluzione di continuità del widget con l’estetica del tuo UI/UX.

Localizzazione

Localizza facilmente e adatta i messaggi del widget alle preferenze linguistiche del pubblico attraverso la proprietà strings. Questa proprietà contiene una stringa JSON codificata che comprende voci di traduzione per vari messaggi del widget:

{
  "ariaLinkLabel": "Visita Altcha.org",
  "error": "Verifica fallita. Riprova più tardi.",
  "expired": "Verifica scaduta. Riprova.",
  "footer": "Protetto da <a href=\"https://altcha.org/\" target=\"_blank\" aria-label=\"Visita Altcha.org\">ALTCHA</a>",
  "label": "Non sono un robot",
  "verified": "Verificato",
  "verifying": "Verifica in corso...",
  "waitAlert": "Verifica in corso... per favore aspetta."
}

Personalizza questi messaggi per farli risuonare meglio con i tuoi utenti o allinearli al tuo marchio. Regola il linguaggio, il tono o persino i link all’interno di questi messaggi per offrire un’esperienza personalizzata e user-friendly.

Configurazione Programmabile

Per configurare il widget in modo programmabile, usa il metodo configure():

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

Tutte le proprietà di configurazione sono supportate. Per impostare l’oggetto di sfida, utilizza la proprietà di configurazione challenge. Consulta il README per le proprietà e i tipi di configurazione.

Assicurati che il metodo configure() venga chiamato dopo il caricamento dello script ALTCHA, come ad esempio all’interno di window.addEventListener('load', ...).

Esempi

Tema scuro

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

Variabili CSS

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

Etichette personalizzate

L’attributo strings accetta una stringa JSON codificata. In HTML, è anche necessario codificare le entità HTML (ad esempio con html-entities). Per una personalizzazione più semplice, considera di utilizzare configurazione programmabile invece.

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

Nascondi branding

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