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="{"label":"Ich bin kein Bot"}"></altcha-widget>
Nascondi branding
<altcha-widget hidelogo hidefooter></altcha-widget>