Te faqja kryesore

Colori, carattere e tema

Colore del marchio, accento, colori personalizzati delle superfici, raggio degli angoli, carattere, chiaro e scuro, modelli e CSS personalizzato: come il widget mantiene leggibile ogni testo.

Il widget adotta il colore del Suo marchio, il Suo carattere e, se desidera, un’intera serie di colori personalizzati. Li ricalcola finché ogni testo resta leggibile su ogni superficie. Lei sceglie il colore, il widget si occupa del contrasto.

Tutte le impostazioni di questa pagina si trovano in /app/projects/{id}, scheda Aspetto, sezione Marchio. Fa eccezione lo schema di colori (chiaro, scuro, automatico): si trova nella scheda Installazione, in Dati di base.

L’assistente di design

In cima alla sezione Marchio, un assistente La guida nel design in quattro passi:

Aspetto: 18 modelli pronti, filtrabili per Chiaro, Scuro, Professionale, Giocoso, Accogliente, Freddo e Minimal. Tra questi, ad esempio, Klar, Nacht, Boutique, Support-Desk, Minimal, Corporate, Ozean, Graphit ed Espresso.
Colori: colore primario e accento, scelte rapide tra otto coppie di colori e scelta delle superfici: predefinite, chiare, scure o personalizzate.
Forma: stile della finestra, raggio degli angoli, forma e dimensioni del pulsante della chat.
Fatto: un riepilogo.

L’assistente non salva nulla da solo. Compila soltanto i campi sottostanti; nulla viene salvato finché non preme Salva. La miniatura nell’assistente è uno schema. Può vedere il widget reale con i Suoi valori nell’anteprima della sezione Schermata iniziale widget.

Per le regolazioni di dettaglio, espanda Tutte le impostazioni singolarmente. Carattere e CSS personalizzato sono disponibili solo lì.

I campi

Colore primario: il colore del Suo marchio come #rrggbb. Colora il pulsante della chat, il pulsante di invio, i link, il focus e, miscelato, i fumetti dei visitatori. Senza un valore personalizzato: viola #6D28D9 nel tema chiaro, #9B7BFF in quello scuro.
Accento: un secondo colore come #rrggbb, ad esempio per contatori ed evidenziazioni. Senza un valore personalizzato: #BE185D nel tema chiaro, #FF6B8A in quello scuro.
Raggio degli angoli (px): da 0 a 28. 0 significa angoli retti. Predefinito: 12.
Famiglia di caratteri (CSS): un valore CSS come Inter, system-ui, sans-serif, massimo 120 caratteri. Il widget non carica file di caratteri. Usi quindi un carattere già caricato dalla Sua pagina o un carattere di sistema. Vuoto significa: caratteri di sistema del dispositivo.
Modelli: un clic compila insieme colori, superfici, raggio, pulsante della chat e stile. Nulla viene salvato finché non preme Salva.

Sono validi solo colori nel formato #rrggbb a sei cifre. Le forme abbreviate come #f00 o rgb(…) vengono scartate e si applica il valore predefinito.

Superfici e testo

In Superfici e testo può impostare, se necessario, altri cinque colori. Ognuno ha una casella colore personalizzato:

Sfondo: la superficie della finestra.
Superficie dei fumetti: i fumetti del team e dell’assistente.
Testo: il colore del testo.
Testo secondario: orari, note, seconde righe.
Linee: linee divisorie e bordi.

Senza la spunta, il widget usa la serie di colori adatta al sito, chiara o scura. Il valore nel campo è allora solo un punto di partenza, non l’indicazione del valore effettivo. Con la spunta, si applica il Suo colore.

Se imposta solo uno sfondo personalizzato, il widget ne ricava il resto: superficie dei fumetti, testo, testo secondario e linee.

Leggibilità: che cosa ricalcola il widget

I clienti scelgono il colore del marchio, non un colore leggibile. Per questo il widget verifica che ogni combinazione di testo e superficie abbia un rapporto di contrasto di almeno 4,5:1. È la soglia delle WCAG 2.x per il testo normale.

Il testo sul colore del marchio (ad esempio nel pulsante di invio) viene impostato automaticamente su bianco o quasi nero, scegliendo quello più leggibile.
Il colore del marchio usato per il testo (link, evidenziazioni) viene schiarito o scurito a piccoli passi fino a raggiungere 4,5:1. Le superfici mantengono il Suo colore invariato, quindi il pulsante della chat e quello di invio.
Il fumetto dei visitatori è una miscela del colore del marchio e dello sfondo. Se il contrasto non basta, il widget riduce la quantità di colore del marchio.
I colori personalizzati del testo e del testo secondario passano la stessa verifica rispetto a ogni superficie su cui compaiono.

Ciò che è stato ricalcolato appare nell’account subito sotto il modulo, nella riga Ricalcolato per mantenere leggibile il testo. Un giallo chiaro usato per il testo appare quindi più scuro nel widget rispetto al valore inserito, e lì può vederne il motivo.

Nella Sua pagina può anche interrogare direttamente i valori misurati:

ReactiveChat('brandCheck');   // list of pairings with measured and required contrast
ReactiveChat('brandTokens');  // the colours actually used in the widget

Chiaro, scuro o come il sito

In Installazione → Dati di base → Schema di colori del widget può scegliere:

come il sito (altrimenti il sistema del visitatore): predefinito. Il widget verifica se la pagina è chiara o scura e si adatta.
chiaro: sempre chiaro.
scuro: sempre scuro.

Con la scelta automatica, il widget esamina nell’ordine:

il colore di sfondo della pagina al centro dello schermo,
il valore CSS color-scheme su <html>, se è esattamente dark o light,
gli interruttori comuni su <html> o <body>, come la classe dark o data-theme="dark",
infine, l’impostazione di sistema del visitatore.

Se la pagina passa da chiaro a scuro o viceversa, il widget la segue. Ripete la verifica anche all’apertura della finestra.

Nel codice può impostare il tema nel codice di incorporamento o in fase di esecuzione. Questo ha priorità sull’impostazione dell’account:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-theme="dark"
        async></script>

ReactiveChat('setTheme', 'dark');   // 'light', 'dark' or 'auto'

Con setTheme il widget ricorda la scelta nel browser del visitatore. setTheme('auto') la rimuove. È adatto a un interruttore chiaro/scuro personalizzato nella Sua pagina.

Impostare i colori nel codice

Per singole pagine, ad esempio una campagna, può impostare il marchio nel codice di incorporamento o in fase di esecuzione. I nomi dei campi sono:

primary, accent: colore del marchio e accento,
bg, surface, text, textDim, line: le cinque superfici,
onPrimary: colore del testo sul colore del marchio (altrimenti automatico),
radius: da 0 a 28,
font: valore CSS del carattere,
launcher e stil: vedere Il pulsante della chat e Finestra della chat.

ReactiveChat('setBrand', { primary: '#0F766E', accent: '#F59E0B', radius: 8 });

setBrand ricalcola immediatamente contrasto e colori derivati, senza ricostruire il widget. null rimuove un valore e torna ad applicarsi quello predefinito.

Nel codice di incorporamento, l’attributo si chiama data-rc-brand e accetta JSON:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-brand='{"primary":"#0F766E","accent":"#F59E0B"}'
        async></script>

Importante: ha priorità il codice di incorporamento o l’account? Il codice generato dall’account contiene già colore del marchio, raggio, forma e dimensioni del pulsante della chat. È solo lo stato iniziale, affinché il pulsante appaia subito nel colore corretto. Appena il widget riceve le impostazioni dal server, si applica integralmente l’account.

Se però inserisce un qualsiasi campo aggiuntivo in data-rc-brand, ad esempio accent, stil o una dicitura, il marchio nel codice è considerato personalizzato per questa pagina. Ha quindi priorità sull’account. Dell’account continua ad applicarsi solo la visualizzazione «Solo tramite i propri link». Inoltre, la pagina non partecipa ad alcun test A/B.

Se cambia il colore del marchio nell’account, copi nuovamente il codice di incorporamento in Installazione. Altrimenti, durante il caricamento della pagina, il vecchio colore appare brevemente.

Il funzionamento del codice e le altre modalità (window.ReactiveChatSettings, ReactiveChat('boot', …)) sono descritti in Integrazione tecnica.

CSS personalizzato

In Tutte le impostazioni singolarmente → CSS personalizzato può scrivere CSS applicato per ultimo, dopo tutte le altre regole.

Massimo 20.000 caratteri.
@import viene rimosso sia al salvataggio sia nel widget.
Il CSS ha effetto solo all’interno del widget. Viene eseguito in un’area isolata (shadow DOM) e non può modificare la Sua pagina. Viceversa, il CSS della pagina non raggiunge il widget. Questo è il posto giusto per inserirlo.
In seguito il widget impone nuovamente due regole: l’anello di focus visibile per chi usa la tastiera e il pulsante di chiusura nell’intestazione. Nascondere con lo stile l’uscita dalla chat crea una trappola per chi usa la tastiera.
I nomi delle classi interne del widget non sono un’interfaccia garantita. Controlli il CSS nell’anteprima dopo le modifiche.

.rc-launcher { box-shadow: 0 0 0 4px #fff; }

Nel codice funziona allo stesso modo con customCss, ad esempio in ReactiveChat('boot', { customCss: '…' }) o come attributo data-rc-custom-css.

Logo nell’intestazione della finestra

Il modo più semplice è inserire il logo nell’account: Progetto → Aspetto → Marchio, campo Logo (indirizzo). Comparirà nell’intestazione della finestra della chat al più tardi un minuto dopo il salvataggio.

Nel codice, logo consente anche di impostare altezza, testo alternativo e posizione, ad esempio il logo nel pulsante della chat. Un logo impostato nel codice ha priorità sul campo dell’account:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-logo='{"src":"https://www.example.com/logo.svg","alt":"Example Ltd","height":24,"placement":"header"}'
        async></script>

src: un indirizzo con https:// o un’immagine come data:image/…. Un piccolo SVG come indirizzo data: evita una richiesta.
alt: testo alternativo.
height: altezza in pixel, da 12 a 40, predefinita 20.
placement: header (intestazione, predefinito), launcher (nel pulsante della chat) o both.

Il logo della schermata iniziale, invece, si imposta facilmente nell’account; vedere La schermata iniziale della chat.

Se qualcosa appare diverso dal previsto

Il colore è più scuro o più chiaro di quello inserito: è la protezione del contrasto. La riga Ricalcolato sotto il modulo indica che cosa è stato adattato.
Le modifiche nell’account non arrivano: il codice contiene un data-rc-brand con campi aggiuntivi? Allora ha priorità il codice. Inoltre, dopo il salvataggio occorre fino a un minuto.
Un colore diverso appare brevemente durante il caricamento: copi nuovamente il codice dopo una modifica del colore.
Il carattere non ha effetto: la pagina carica il carattere? Il widget non carica file di caratteri.

Përditësuar së fundi: 2026-10-25