Modificare l'aspetto del widget della chat
Le istruzioni qui sotto sono destinate esclusivamente a computer desktop e portatili.
Fai in modo che il widget della chat rispecchi l’aspetto e lo stile del tuo brand, così i visitatori lo riconosceranno subito e sapranno dove chiedere assistenza.
Questa guida ti mostra come accedere alle impostazioni dell’aspetto, regolare le opzioni per desktop e mobile, modificare i colori e l’Attention Grabber, visualizzare l’anteprima delle modifiche e salvarle — tutto dal tuo dashboard tawk.to.
Passaggi per modificare l’aspetto del tuo widget
Accedi al tuo account tawk.to.
Seleziona la proprietà corretta.
Fai clic su Amministrazione nel menu in alto.
Nel menu di sinistra, sotto Canali (Channels), fai clic su Widget della chat (Chat Widget).
Scorri fino alla sezione Aspetto del widget (Widget Appearance) e fai clic su Avanzate (Advanced).
Nella pagina Aspetto del widget (Widget Appearance) puoi personalizzare il colore, la forma e le dimensioni del tuo widget per desktop e mobile.
Usa l’anteprima in tempo reale sulla destra per testare le modifiche.
Quando sei soddisfatto del risultato, fai clic su Salva (Save). Il widget si aggiornerà automaticamente sul tuo sito — non sono necessarie modifiche al codice.
Impostazioni del widget per desktop
Forma: scegli tra circolare (compatta) o rettangolare.
Una forma circolare è meno invasiva, mentre una forma rettangolare offre più spazio e opzioni.
Dimensioni: imposta larghezza (Width) e altezza (Height) — questi valori influenzano il widget quando è massimizzato.
Se hai scelto la forma rettangolare, puoi anche impostare larghezza/altezza minimizzate (Minimized Width/Height) e il raggio superiore/inferiore (Top/Bottom Radius) per controllare l’arrotondamento degli angoli.
Posizione: scegli dove far apparire il widget sulla pagina (in basso a destra è l’impostazione predefinita).
Seleziona una posizione che si adatti al layout del tuo sito.
Attention Grabber: attiva questa opzione per attirare l’attenzione dei visitatori.
Fai clic su Galleria (Gallery) per scegliere un design predefinito oppure carica la tua immagine personalizzata.
Nota: l’Attention Grabber viene visualizzato solo su desktop e solo quando il widget è online.
Per saperne di più:Abilitare l’Attention Grabber.
Impostazioni del widget per dispositivi mobili
Scegli il tipo di widget mobile e la sua posizione in modo che non interferisca con la navigazione o con i pulsanti importanti sugli schermi più piccoli.
L’anteprima mobile mostra come apparirà il widget sui dispositivi mobili.
Colori e stili dei messaggi
Queste impostazioni di colore si applicano sia all’anteprima desktop che a quella mobile:
Intestazione (Header): modifica il colore dello sfondo del widget, dell’intestazione e dei messaggi suggeriti.
Testo dell’intestazione (Header Text): modifica il colore del testo dell’intestazione e della sezione interna per il design predefinito.
Messaggi dell’agente / Testo dell’agente (Agent Message/Agent Text): controlla il colore di sfondo e il colore del testo dei messaggi inviati dai tuoi agenti.
Messaggi del visitatore / Testo del visitatore (Visitor Message/Visitor Text): controlla il colore di sfondo e il colore del testo dei messaggi dei visitatori.
Regola questi colori in modo che i messaggi siano leggibili e coerenti con il tuo brand.
Considerazioni aggiuntive
Visibilità dell’Attention Grabber
L’Attention Grabber appare solo su desktop e solo quando il widget è online.
Se il widget è impostato su offline o assente, non verrà visualizzato.
Reattività su dispositivi mobili
Il widget potrebbe adattare il proprio layout sui dispositivi mobili per non coprire la navigazione o altri elementi dell’interfaccia.
Testalo su diversi dispositivi e dimensioni di schermo.
Conflitti con gli stili del sito
CSS personalizzati o script presenti sul tuo sito possono talvolta interferire con la posizione o l’aspetto del widget.
Se utilizzi stili personalizzati, verifica attentamente e controlla eventuali conflitti.
Se hai commenti su questo articolo o hai bisogno di ulteriore assistenza:
Contattaci via live chat
Prenota una chiamata con il nostro team
Visita la nostra community