Puoi configurare molte impostazioni relative all’aspetto del Web Widget dalla scheda Stile della pagina Web Widget. Ad esempio, puoi impostare il colore principale dell’azienda, la posizione del widget e i dettagli dell’aspetto. Queste impostazioni si applicano a livello globale, quindi ogni visitatore vede lo stesso branding.
Tuttavia, a volte potresti voler provare diverse combinazioni di colori, usare colori speciali solo su determinate pagine o cambiare i colori in base al tipo di visitatore. Per questi scenari, l’ API di personalizzazione Web Widget di messaggistica consente di controllare i colori del widget in tempo reale usando JavaScript.
Informazioni sull’API di personalizzazione Web Widget
L’API Web Widget è un’API JavaScript. Quando usi JavaScript per cambiare i colori del Web Widget, il codice invia un’istruzione in tempo reale al widget per aggiornarne l’aspetto. Queste modifiche vengono applicate immediatamente, ma solo per le persone che visitano le pagine specifiche in cui è in esecuzione il codice personalizzato.
Se mantieni la personalizzazione JavaScript nella pagina, il widget mostra i colori scelti ogni volta che la pagina viene caricata. Se un visitatore accede a una pagina in cui il codice non è presente o se lo rimuovi, il widget torna al suo aspetto predefinito Centro amministrativo .
| Come lo hai impostato | Chi vede le modifiche? | Quando viene ripristinato? |
|---|---|---|
| Colore del brand Centro amministrativo | Tutti, ovunque | Quando aggiorni il colore nel Centro amministrativo |
| Personalizzazione API | Solo nelle pagine con il codice personalizzato | Quando il codice viene rimosso dalla pagina |
Personalizzazione dei colori del widget
Per personalizzare i colori usando l’API Web Widget , chiama zE("messenger:set", "customization") dalla pagina web in qualsiasi momento dopo il caricamento del widget. Il widget applica immediatamente i nuovi colori.
zE("messenger:set", "customization", {
theme: {
primary: "#FE5E41",
onPrimary: "#FFFFFF",
message: "#F3C178",
onMessage: "#5F0F00",
action: "#B0DB43",
onAction: "#000000",
businessMessage: "#fff",
onBusinessMessage: "#F10404",
background: "#DFE0E2",
onBackground: "#F10404",
error: "#FF1744",
onError: "#FFFFFF",
notify: "#FF007F",
onNotify: "#FFFFFF"
}
})Il theme l’oggetto definisce i colori per le varie proprietà dell’interfaccia del widget. Non è necessario specificare tutte le proprietà. Tutte le proprietà che escludi usano le impostazioni predefinite del Centro amministrativo .
Tutti i valori dei colori devono essere codici colore standard come hex, rgb, hsl o Named Colors. Proprietà sconosciute o valori di colore non validi attiveranno un errore nella console del browser e nessun colore cambierà.
L’immagine seguente mostra le proprietà del tema che controllano vari aspetti dell’aspetto del Web Widget.
| Proprietà | Descrizione |
|---|---|
| principale | Il colore principale del widget, usato per il pulsante di avvio di Messenger, la barra in alto, le evidenziazioni del piè di pagina e altri elementi chiave dell’interfaccia utente. |
| onPrimary | Il colore del testo e delle icone visualizzati sopra gli sfondi dei colori principali, come l’icona del pulsante di avvio o i pulsanti di azione principali. |
| messaggio | Bolle di chat a colori di sfondo dell’utente finale. |
| onMessage | Colore del testo all’interno dei fumetti di chat degli utenti finali. |
| businessMessage | Colore di sfondo per i fumetti di chat di agenti o bot: messaggi inviati da Zendesk o dal tuo team. |
| onBusinessMessage | Colore del testo e delle icone nei fumetti di chat degli agenti o dei bot. |
| sfondo | Il colore di sfondo principale della finestra del widget dietro le bolle di chat e i campi di immissione. |
| in Background | Colore predefinito del testo e delle icone visualizzati sullo sfondo del widget. |
| errore | Colore di sfondo per gli elementi di avviso, come messaggi di errore o caricamenti non riusciti. |
| onError | Colore del testo e delle icone per i messaggi di errore. |
| notifica | Colore di sfondo per determinati banner o messaggi di notifica. Si applica a messaggi di sistema specifici e potrebbe non essere sempre visibile. |
| onNotify | Colore del testo e delle icone usato in determinati banner o messaggi di notifica sullo sfondo delle notifiche. |
| azione | Colore di sfondo per i pulsanti di azione, come la creazione di una nuova conversazione, l’invio di messaggi, i moduli o i pulsanti sequenza. |
| onAction | Colore del testo e delle icone sugli sfondi dei pulsanti di azione. |
| onSecondaryAction | Colore del testo e delle icone per i pulsanti di azione secondari all’interno del widget, come “Annulla” o “Indietro”. |
Se non specifichi una proprietà del tema, usa il valore predefinito. Per ulteriori informazioni sull’uso dell’API Web Widget per personalizzare i colori del Web Widget, consulta Personalizzazione dei colori Web Widget nella documentazione per sviluppatori.
Suggerimenti e best practice sui temi
Ecco alcuni suggerimenti di progettazione per la personalizzazione dei colori di un Web Widget di messaggistica:
- Metti alla prova la tua combinazione di colori usando intenzionalmente colori in grassetto e ad alto contrasto per una proprietà per osservare facilmente le modifiche nell’interfaccia del widget.
- Inizia in modo semplice cambiando solo alcuni colori importanti, ad esempio
primaryoaction, che corrispondono al tuo brand prima di aggiornare tutto. - Scegli sempre un contrasto sufficiente tra il testo (il
on*proprietà) e sfondi per soddisfare gli standard di accessibilità. - Se una combinazione di colori rende il testo difficile da leggere o appare confuso, anche se corrisponde al tuo brand, cambiala per maggiore chiarezza.
- Gli elementi del widget come i banner di notifica o i messaggi di errore potrebbero avere colori fissi o comportarsi in modo diverso a seconda dell’account. Testa sempre i workflow critici dopo aver apportato modifiche.
Avvertenza sulla traduzione: questo articolo è stato tradotto usando un software di traduzione automatizzata per fornire una comprensione di base del contenuto. È stato fatto tutto il possibile per fornire una traduzione accurata, tuttavia Zendesk non garantisce l'accuratezza della traduzione.
Per qualsiasi dubbio sull'accuratezza delle informazioni contenute nell'articolo tradotto, fai riferimento alla versione inglese dell'articolo come versione ufficiale.