Finestra della chat: stile, dimensioni, pannello laterale e vista mobile

I colori definiscono il carattere, la forma fa il resto. In /app/projects/{id}, scheda Aspetto, sezione Marchio, trova due gruppi di opzioni: Stile (forma più che colore) e Finestra (come appare la finestra aperta). Se non sceglie nulla, tutto resta sul valore predefinito. Salva con Salva; l’anteprima in Schermata iniziale widget mostra il widget reale.

I modelli dell’assistente di design impostano anche queste opzioni.

Stile

• Intestazione: sfumatura (predefinita), piatto o vetro. Vale per l’intestazione della schermata iniziale e la barra del titolo.
• Densità: normale (predefinita), compatta o ariosa. Distanze nella schermata iniziale e nella conversazione.
• Fumetti: morbida (predefinita, segue il raggio degli angoli), arrotondato (18 px) o squadrato (4 px).
• Ombra: morbida (predefinita), netta o nessuno. Vale per la finestra, non per il pulsante della chat.
• Avatar: arrotondato (predefinito) o squadrato.
• Campo di inserimento: piatto (predefinito) o pillola (molto arrotondato, con pulsanti rotondi).
• Schede: con bordo (predefinito) o piatto. Vale per i riquadri della schermata iniziale, le righe dell’aiuto e le schede nella conversazione.

Finestra

• Dimensione finestra: normale (predefinita, larga 380 px), larga (440 px), stretta (340 px) o alta (quasi tutta l’altezza dello schermo, massimo 960 px). L’altezza normale è 620 px, inferiore sugli schermi piccoli.
• Layout: finestra fluttuante (predefinito) o pannello laterale. Il pannello laterale occupa tutta l’altezza sul bordo, dal lato del pulsante della chat, e scorre da lì. Il pulsante si ritira mentre è aperto. Si chiude con il pulsante nell’intestazione.
• Sfondo: fondo dell’area messaggi: semplice (predefinito), punti, griglia o sfumatura (un accenno al colore del marchio).
• Dimensione del testo: normale (predefinita, 14 px), grande (15,5 px) o piccola (13 px). Vale per fumetti e campo di inserimento, non per il pulsante della chat.
• Animazione di apertura: scorrimento (predefinita), ingrandimento, dissolvenza o nessuna. Se il visitatore ha impostato «riduci movimento» nel sistema, l’animazione viene comunque eliminata.
• Fumetto del visitatore: colore dei fumetti dei visitatori: colore primario (predefinito, una miscela chiara del colore del marchio), colore d’accento o neutro (grigio). Anche qui il widget ricalcola il testo finché è leggibile.

Dimensione e layout della finestra hanno effetto solo da 481 px di larghezza dello schermo. Al di sotto la chat si apre sempre a schermo intero (vedere sotto).

Nel codice

Tutte le opzioni sono nel marchio sotto stil. I valori sono i nomi interni:

• kopf: verlauf, flach, glas
• dichte: normal, kompakt, luftig
• blase: weich, rund, eckig
• schatten: weich, hart, keiner
• avatar: rund, eckig
• eingabe: flach, pille
• karten: rahmen, flach
• fenster: normal, breit, schmal, hoch
• ansicht: schwebend, seite
• hintergrund: schlicht, punkte, raster, verlauf
• schrift: normal, gross, klein
• animation: gleiten, zoom, blenden, keine
• besucher: marke, akzent, neutral

Un valore sconosciuto torna a quello predefinito.

ReactiveChat('setBrand', { stil: { ansicht: 'seite', hintergrund: 'punkte', schrift: 'gross' } });

Nel codice di incorporamento, come data-rc-brand='{"stil":{"ansicht":"seite"}}', il marchio viene considerato personalizzato per questa pagina e ha priorità sull’account; vedere Colori, carattere e tema.

Movimento

Con data-rc-motion nel codice di incorporamento controlla le animazioni: auto (predefinito, segue l’impostazione di sistema del visitatore), reduced (nessun movimento) o full.

data-rc-motion="reduced"

Intestazione

L’intestazione mostra chi risponde:

• Se qualcuno del team sta scrivendo, mostra il suo nome visualizzato. Ogni membro lo gestisce nelle impostazioni personali; vedere Team, console e notifiche.
• Se risponde l’assistente IA, mostra il nome impostato in IA e conoscenze → Assistente (predefinito «Ada»); vedere Assistente IA.
• Altrimenti mostra il titolo «Chat». Lo modifica insieme alla seconda riga («Siamo qui», «Assistente IA») in Testi e lingue, con le chiavi header.title, header.subtitle_online e header.subtitle_bot.

Gli avatar mostrano la prima lettera del nome e il simbolo ✦ per l’assistente. Al momento non è possibile memorizzare foto personalizzate dei membri del team.

L’intestazione ha anche un’icona a busta che permette ai visitatori di ricevere la conversazione via e-mail. La disattiva in Regole e servizio → Trascrizione della conversazione via e-mail; vedere Disponibilità, moduli e servizio.

La nota «Powered by reactive.chat»

Nel piano gratuito, in fondo alla finestra compare la nota «Powered by reactive.chat». Da un piano a pagamento decide autonomamente in Aspetto → reactive.chat nella chat, con l’opzione Nascondi «Powered by reactive.chat». Il valore predefinito è allora: nascosta. Il testo della nota non può essere modificato.

Sui telefoni

Fino a 480 px di larghezza e sui dispositivi in orizzontale fino a 480 px di altezza, la chat si apre a schermo intero: senza angoli, per tutta l’altezza visibile, anche quando si apre la tastiera su schermo. Il campo di inserimento usa testo da 16 px per evitare lo zoom del telefono e i pulsanti misurano almeno 44 px. Il pulsante della chat si ritira mentre la chat è aperta.

Dimensione della finestra e pannello laterale non si applicano sui telefoni. Si applicano invece le altre opzioni di stile, i colori e la dimensione del testo. Imposta la dimensione del pulsante sui telefoni in Il pulsante della chat.