Како можеме да помогнеме?

Накратко опишете за што се работи — ќе Ви одговориме по е-пошта.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
На почетната страница

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:

  1. 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.
  2. Colori: colore primario e accento, scelte rapide tra otto coppie di colori e scelta delle superfici: predefinite, chiare, scure o personalizzate.
  3. Forma: stile della finestra, raggio degli angoli, forma e dimensioni del pulsante della chat.
  4. 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

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:

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.

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:

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

  1. il colore di sfondo della pagina al centro dello schermo,
  2. il valore CSS color-scheme su <html>, se è esattamente dark o light,
  3. gli interruttori comuni su <html> o <body>, come la classe dark o data-theme="dark",
  4. 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:

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.

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

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

Se qualcosa appare diverso dal previsto

Последно ажурирање: