Il pulsante della chat: forma, dimensioni, icona, dicitura e posizione
Il pulsante con cui i visitatori aprono la chat: forma, dimensioni su desktop e telefoni, icona, dicitura con seconda riga, visualizzazione, 20 modelli, posizione e spostamento sopra le barre.
Il pulsante della chat, o launcher, si trova nell’angolo in basso e permette ai visitatori di aprire la chat. Lo configura in /app/projects/{id}, scheda Aspetto, sezione Marchio. Un’anteprima in tempo reale, Ecco il Suo pulsante della chat, mostra subito ogni modifica. Salva con Salva e la modifica raggiunge i visitatori entro un minuto.
Il colore del pulsante è il colore primario; vedere Colori, carattere e tema.
Modelli pulsante della chat
20 combinazioni pronte, ad esempio «Assistente virtuale – Risponde in 2 min», «Ha una domanda?», «Servizio clienti – Lun–ven 8–18» o «Assistente IA – Risponde in pochi secondi». Un clic compila forma, icona, dicitura, seconda riga, visualizzazione e dimensioni. I colori restano invariati; nulla viene salvato finché non preme Salva. Adatti poi i testi.
I campi
- Forma:
cerchio(predefinita),arrotondato,quadrato,fumettoofoglia. Nel fumetto, un angolo a punta è rivolto verso l’angolo dello schermo. Nella foglia, due angoli opposti sono piccoli. - Dimensione (px): da 44 a 72, predefinita 56. 44 è l’area minima ancora toccabile in modo affidabile.
- Dimensione sui telefoni (px): da 40 a 72. Vuoto significa 48 px, o meno se la dimensione sopra è inferiore.
- Icona:
fumetto(predefinita),punto interrogativo,cuffie con microfono,scintillaoppurenessuna icona (solo testo). Senza icona, il pulsante richiede una dicitura e la visualizzazione sempre. Altrimenti il widget mostra il fumetto. - Dicitura: testo visibile accanto all’icona, massimo 40 caratteri. Vuoto significa solo icona.
- Seconda riga: una riga più piccola sotto la dicitura, massimo 60 caratteri. Senza dicitura resta invisibile.
- Visualizzazione: quando la dicitura è visibile:
- sempre (predefinita),
- solo al passaggio del mouse: solo icona; la dicitura scorre fuori al passaggio del mouse o al focus da tastiera. Sui dispositivi touch resta solo l’icona.
- solo su schermi grandi: dicitura solo da 481 px di larghezza, al di sotto solo icona,
- Solo tramite i Suoi link (nessuna icona della chat): nessun pulsante della chat, vedere sotto.
Dicitura per lingua
Dicitura e seconda riga del modulo valgono in ogni lingua. Se desidera testi diversi per lingua, li inserisca in Testi e moduli → Testi personalizzati, con le chiavi launcher.text e launcher.subtext. Una voce lì ha priorità sui campi presenti qui. Dettagli in Testi e lingue.
Chat senza pulsante
Con la visualizzazione Solo tramite i Suoi link (nessuna icona della chat) non compare alcun pulsante. I visitatori aprono la chat dai Suoi link o pulsanti:
<a href="#rc-open">Help & support</a>
Inserisca almeno uno di questi link in ogni pagina in cui la chat deve essere raggiungibile. Poi copi nuovamente il codice di incorporamento in Installazione: quello nuovo non contiene più il colore del marchio, così il pulsante non appare brevemente durante il caricamento.
Finché il widget non riesce a ottenere l’impostazione dal server, ad esempio senza connessione o alla prima visita prima del consenso ai cookie, il pulsante compare comunque come rete di sicurezza. Se non deve mai comparire, aggiunga anche questo al codice:
<script src="https://cdn.reactive.chat/loader.js"
data-rc-site-key="SITE_KEY"
data-rc-hide-launcher="true"
async></script>
data-rc-hide-launcher vale sempre, indipendentemente da ciò che è impostato nell’account. Senza pulsante non ci sono nemmeno i fumetti tooltip accanto a esso. Tutte le modalità per aprire la chat dai Suoi elementi, con testo precompilato e scelta della scheda, sono descritte in Aprire la chat da un link o pulsante personalizzato.
Invece di un link, può anche trasformare un elemento esistente della pagina nell’attivatore. data-rc-launcher-selector accetta un selettore CSS:
<script src="https://cdn.reactive.chat/loader.js"
data-rc-site-key="SITE_KEY"
data-rc-hide-launcher="true"
data-rc-launcher-selector="#hilfe-knopf"
async></script>
Posizione e distanze
Lato, distanze e livello di sovrapposizione si impostano nel codice di incorporamento. L’account non dispone di campi per questi valori.
data-rc-position:right(predefinito) oleft.data-rc-offset: distanza dal bordo in pixel come JSON, predefinita{"x":20,"y":20}. Il widget aggiunge le aree sicure, come la tacca dell’iPhone.data-rc-z-index: livello di sovrapposizione, predefinito2147483000. Lo riduca se un Suo elemento deve apparire sopra la chat.
<script src="https://cdn.reactive.chat/loader.js"
data-rc-site-key="SITE_KEY"
data-rc-position="left"
data-rc-offset='{"x":24,"y":96}'
async></script>
Gli stessi campi funzionano anche come position, offset e zIndex tramite window.ReactiveChatSettings o ReactiveChat('boot', …). Vedere Integrazione tecnica.
Evitare le barre
Se la pagina ha una barra fissa sul bordo inferiore, come un banner cookie, una barra del carrello o una barra di navigazione sui telefoni, il pulsante si sposta automaticamente sopra di essa, con 12 px di distanza. Ripete la misurazione quando la pagina cambia. Gli elementi che occupano più del 40 % dell’altezza della finestra sono considerati sovrimpressioni e non vengono evitati.
Può disattivare questo comportamento nel codice di incorporamento:
data-rc-avoid-overlap="false"
Pulsante con icona personalizzata
Un’icona completamente personalizzata si imposta nel codice tramite il marchio: launcher.icon accetta un SVG inline o un indirizzo data: e ha priorità sull’icona scelta.
ReactiveChat('setBrand', {
launcher: { shape: 'bubble', label: 'Ask us', icon: 'data:image/svg+xml,…' }
});
Nota: un marchio con questi campi nel codice di incorporamento (data-rc-brand) ha priorità sulle impostazioni dell’account per questa pagina. Vedere Colori, carattere e tema.
Sui telefoni
Sotto 481 px di larghezza (e sui telefoni in orizzontale fino a 480 px di altezza) si applica la dimensione per telefoni. Con la visualizzazione solo su schermi grandi, il pulsante mostra lì solo l’icona. Quando il visitatore apre la chat, la finestra riempie l’intero schermo e il pulsante si ritira.
Se il pulsante non appare come previsto
- Nessun pulsante visibile: la visualizzazione è impostata su Solo tramite i Suoi link, oppure nel codice è presente
data-rc-hide-launcher="true"? Il progetto è in pausa? - Il pulsante appare nonostante «Solo tramite i Suoi link»: il widget non ha ancora ricevuto l’impostazione dal server (fallback). Aggiunga anche
data-rc-hide-launcher="true". - Compare il fumetto anche senza icona: senza icona servono una dicitura e la visualizzazione sempre.
- Le modifiche non arrivano: nel codice è presente un
data-rc-brandcon dicitura, icona o altri campi aggiuntivi? Allora ha priorità il codice.
शेवटचे अद्यतन: