Personalizzazioni CSS di Dialogflow CX Messenger

Puoi personalizzare lo stile della finestra di dialogo della chat impostando Variabili CSS.

Stile generale

Le seguenti variabili CSS forniscono opzioni di stile generali:

Proprietà Criterio di inserimento Valore predefinito Descrizione
df-messenger-font-family Facoltativo "Google Sans", "Helvetica Neue", senza grazie Famiglia di caratteri da utilizzare in tutto il widget
df-messenger-font-size Facoltativo 14px Dimensioni del testo da utilizzare nel widget
df-messenger-font-color Facoltativo #1f1f1f Colore del testo da utilizzare nel widget
df-messenger-primary-color Facoltativo #0b57d0 Colore principale per gli elementi del widget (come lo sfondo della barra dei titoli, lo sfondo dei pulsanti di azione e altro ancora)
df-messenger-focus-color Facoltativo #1e88e5 Colore dell'anello di messa a fuoco intorno agli elementi
df-messenger-focus-color-contrast Facoltativo bianco Colore dell'anello di messa a fuoco attorno agli elementi all'interno di un elemento principale con un colore di sfondo (ad esempio la barra del titolo)
df-messenger-chat-border Facoltativo nessuno Bordo della finestra di dialogo
df-messenger-chat-border-radius Facoltativo 0 Raggio del bordo della finestra di dialogo

Stile per df-messenger-chat-bubble

Quando utilizzi l'elemento df-messenger-chat-bubble, possono essere fornite le seguenti variabili CSS:

Proprietà Criterio di inserimento Valore predefinito Descrizione
df-messenger-chat-window-height Facoltativo 480 px Altezza della finestra della chat
df-messenger-chat-window-width Facoltativo 320px Larghezza della finestra della chat
df-messenger-chat-window-offset Facoltativo 16 px Distanza tra il fumetto della chat e la finestra della chat
df-messenger-chat-window-box-shadow Facoltativo nessuno Ombra del riquadro della finestra della chat
df-messenger-chat-collapse-icon-size Facoltativo annulla Dimensioni dell'icona del pulsante Comprimi nella barra del titolo
df-messenger-chat-bubble-icon-size Facoltativo 36 px Dimensioni dell'icona del fumetto della chat
df-messenger-chat-bubble-close-icon-size Facoltativo 24 px Dimensioni dell'icona di chiusura per la bolla della chat
df-messenger-chat-bubble-close-icon-transform-rotate Facoltativo -90 °C Rotazione dell'icona di chiusura per il fumetto della chat, cambia a 0deg alla chiusura della chat
df-messenger-chat-bubble-icon-color Facoltativo bianco Colore dell'icona e dell'icona di chiusura per il fumetto della chat
df-messenger-chat-bubble-size Facoltativo 64 px Dimensioni della bolla della chat
df-messenger-chat-bubble-background Facoltativo #0b57d0 Sfondo del fumetto della chat
df-messenger-chat-bubble-border-radius Facoltativo 32 px Raggio del bordo del fumetto della chat
df-messenger-chat-bubble-border Facoltativo nessuno Bordo del fumetto della chat
df-messenger-chat-border-minimized Facoltativo nessuno Bordo della chat in forma ridotta a icona
df-messenger-chat-border-radius-minimized Facoltativo 0 Raggio del bordo della chat in forma ridotta a icona

Stile per la barra del titolo

Per la barra del titolo, possono essere fornite le seguenti variabili CSS:

Proprietà Criterio di inserimento Valore predefinito Descrizione
df-messenger-titlebar-background Facoltativo #0b57d0 Sfondo della barra del titolo
df-messenger-titlebar-padding Facoltativo 0 15px Spaziatura interna della barra del titolo
df-messenger-titlebar-border Facoltativo nessuno Bordo della barra del titolo
df-messenger-titlebar-border-bottom Facoltativo nessuno Bordo inferiore della barra del titolo
df-messenger-titlebar-title-align Facoltativo start Allineamento del testo dei testi del titolo nella barra del titolo. I valori consentiti sono start, center o end
df-messenger-titlebar-font-color Facoltativo bianco Colore del testo nella barra del titolo
df-messenger-titlebar-letter-spacing Facoltativo normale Spaziatura tra le lettere del testo nella barra del titolo
df-messenger-titlebar-title-font-size Facoltativo 18 px Dimensioni del testo del titolo nella barra del titolo
df-messenger-titlebar-title-font-family Facoltativo "Google Sans", "HSPAN Neue", Sans-Serif Famiglia di caratteri del testo del titolo nella barra del titolo
df-messenger-titlebar-title-font-weight Facoltativo 400 Lo spessore del carattere del testo del titolo nella barra del titolo.
df-messenger-titlebar-title-line-height Facoltativo normale Altezza della riga del testo del titolo nella barra del titolo
df-messenger-titlebar-title-letter-spacing Facoltativo normale Spaziatura tra le lettere del testo del titolo nella barra del titolo
df-messenger-titlebar-subtitle-font-color Facoltativo bianco Colore del testo dei sottotitoli nella barra del titolo
df-messenger-titlebar-subtitle-font-size Facoltativo 18 px Dimensioni del testo dei sottotitoli nella barra del titolo
df-messenger-titlebar-subtitle-font-family Facoltativo "Google Sans", "Helvetica Neue", senza grazie Famiglia di caratteri del testo dei sottotitoli nella barra del titolo
df-messenger-titlebar-subtitle-font-weight Facoltativo 400 Spessore del carattere del testo del sottotitolo nella barra del titolo
df-messenger-titlebar-subtitle-line-height Facoltativo normale Altezza della riga del testo del sottotitolo nella barra del titolo
df-messenger-titlebar-subtitle-letter-spacing Facoltativo normale Spaziatura tra le lettere del testo dei sottotitoli nella barra del titolo
df-messenger-titlebar-title-order Facoltativo riga Elementi di ordine nella barra del titolo. I valori consentiti sono row o row-reverse. Questo valore viene applicato solo se è stato specificato l'attributo chat-title-icon.
df-messenger-titlebar-icon-width Facoltativo 18 px La larghezza dell'icona nella barra del titolo. Questo valore viene applicato solo se è stato specificato il valore chat-title-icon.
df-messenger-titlebar-icon-height Facoltativo 18 px L'altezza dell'icona nella barra del titolo. Questo valore viene applicato solo se è stato specificato chat-title-icon.
df-messenger-titlebar-icon-padding Facoltativo 0 12px 0 0 La spaziatura interna intorno all'icona nella barra del titolo. Questo valore viene applicato solo se è stato specificato il valore chat-title-icon.

Stile per la finestra della chat

Per la finestra di chat, possono essere fornite le seguenti variabili CSS:

Proprietà Criterio di inserimento Valore predefinito Descrizione
df-messenger-chat-background Facoltativo #fafafa Sfondo della finestra di dialogo dell'agente in cui vengono visualizzati i messaggi
df-messenger-chat-padding Facoltativo 10 px Spaziatura interna della finestra di dialogo dell'agente in cui vengono mostrati i messaggi
df-messenger-messagelist-border Facoltativo nessuno Bordo dell'elenco dei messaggi
df-messenger-message-border Facoltativo nessuno Bordo dei messaggi della finestra di dialogo dell'agente
df-messenger-message-font-size Facoltativo 14px Dimensioni del testo dei messaggi della finestra di dialogo dell'agente
df-messenger-message-font-family Facoltativo "Google Sans", "Helvetica Neue", senza grazie Famiglia di caratteri dei messaggi della finestra di dialogo dell'agente
df-messenger-message-font-weight Facoltativo normale Lo spessore del carattere dei messaggi della finestra di dialogo dell'agente
df-messenger-message-bot-background Facoltativo #ecf3fe Background dei messaggi inviati dall'agente
df-messenger-message-bot-border Facoltativo nessuno Bordo dei messaggi inviati dall'agente
df-messenger-message-bot-font-color Facoltativo #1f1f1f Colore del testo dei messaggi inviati dall'agente
df-messenger-message-bot-font-weight Facoltativo normale Lo spessore del carattere dei messaggi inviati dall'agente
df-messenger-message-user-background Facoltativo #e1e3e1 Sfondo dei messaggi inviati dall'utente
df-messenger-message-user-border Facoltativo nessuno Bordo dei messaggi inviati dall'utente
df-messenger-message-user-font-color Facoltativo #1f1f1f Colore del testo dei messaggi inviati dall'utente
df-messenger-message-user-font-weight Facoltativo normale Spessore del carattere dei messaggi inviati dall'utente
df-messenger-message-spacing Facoltativo 10px Spazio tra due messaggi
df-messenger-message-border-radius Facoltativo 8 px Raggio del bordo per i messaggi, si applica a tutti gli angoli
df-messenger-message-bot-border-top-left-radius Facoltativo 8 px Raggio bordo in alto a sinistra per i messaggi dell'agente, sostituisce il raggio generico
df-messenger-message-bot-border-top-right-radius Facoltativo 8 px Raggio del bordo in alto a destra per i messaggi dell'agente, sostituisce il raggio generico
df-messenger-message-bot-border-bottom-left-radius Facoltativo 8 px Raggio bordo in basso a sinistra per i messaggi dell'agente, sostituisce il raggio generico
df-messenger-message-bot-border-bottom-right-radius Facoltativo 8 px Il raggio del bordo in basso a destra per i messaggi dell'agente sostituisce il raggio generico
df-messenger-message-user-border-top-left-radius Facoltativo 8 px Raggio del bordo in alto a sinistra per i messaggi utente, sostituisce il raggio generico
df-messenger-message-user-border-top-right-radius Facoltativo 8 px Raggio del bordo in alto a destra per i messaggi dell'utente, sostituisce il raggio generico
df-messenger-message-user-border-bottom-left-radius Facoltativo 8 px Raggio del bordo in basso a sinistra per i messaggi degli utenti, sostituisce il raggio generico
df-messenger-message-user-border-bottom-right-radius Facoltativo 8 px Raggio del bordo in basso a destra per i messaggi degli utenti, sostituisce il raggio generico
df-messenger-message-stack-spacing Facoltativo 10 px Spazio tra due messaggi consecutivi
df-messenger-message-bot-stack-border-top-left-radius Facoltativo 8 px Il raggio del bordo in alto a sinistra per i messaggi consecutivi dell'agente sostituisce il raggio dell'agente in alto a sinistra
df-messenger-message-bot-stack-border-top-right-radius Facoltativo 8 px Raggio del bordo in alto a destra per messaggi agente consecutivi, sostituisce il raggio superiore destro dell'agente
df-messenger-message-bot-stack-border-bottom-left-radius Facoltativo 8 px Il raggio del bordo in basso a sinistra per i messaggi consecutivi dell'agente sostituisce il raggio in basso a sinistra dell'agente
df-messenger-message-bot-stack-border-bottom-right-radius Facoltativo 8 px Il raggio del bordo in basso a destra per i messaggi consecutivi dell'agente sostituisce il raggio in basso a destra dell'agente
df-messenger-message-user-stack-border-top-left-radius Facoltativo 8 px Raggio del bordo in alto a sinistra per messaggi utente consecutivi, sostituisce il raggio superiore sinistro dell'utente
df-messenger-message-user-stack-border-top-right-radius Facoltativo 8 px Il raggio del bordo in alto a destra per i messaggi utente consecutivi sostituisce il raggio superiore destro dell'utente.
df-messenger-message-user-stack-border-bottom-left-radius Facoltativo 8 px Raggio del bordo in basso a sinistra per messaggi utente consecutivi, sostituisce il raggio in basso a sinistra dell'utente
df-messenger-message-user-stack-border-bottom-right-radius Facoltativo 8 px Il raggio del bordo in basso a destra per i messaggi dell'utente consecutivi sostituisce il raggio in basso a destra dell'utente
df-messenger-message-user-writing-image-width Facoltativo 24 px Larghezza dell'immagine mostrata mentre l'agente sta scrivendo, attiva solo se è impostato bot-writing-image
df-messenger-message-bot-writing-image-height Facoltativo 24 px Altezza dell'immagine mostrata mentre l'agente sta scrivendo, attiva solo se è impostato bot-writing-image
df-messenger-message-bot-writing-font-color Facoltativo #1f1f1f Colore del testo mostrato mentre l'agente sta scrivendo
df-messenger-message-bot-writing-font-weight Facoltativo normale Spessore del carattere del testo mostrato mentre l'agente scrive
df-messenger-message-bot-writing-font-size Facoltativo 14px Dimensioni del testo mostrato mentre l'agente scrive
df-messenger-message-bot-writing-border Facoltativo nessuno Bordo del messaggio mostrato mentre l'agente sta scrivendo
df-messenger-message-bot-writing-background Facoltativo #ecf3fe Sfondo del messaggio visualizzato mentre l'agente sta scrivendo
df-messenger-message-bot-writing-padding Facoltativo 12 px Spaziatura interna del messaggio mostrato durante la scrittura dell'agente
df-messenger-message-bot-writing-spacing Facoltativo 10 px Spazio tra il messaggio mostrato mentre l'agente sta scrivendo e il messaggio precedente
df-messenger-chat-scroll-button-enabled-display Facoltativo nessuno Definisce la visualizzazione del pulsante "Vai in fondo". Imposta il valore su flex per attivare il pulsante.
df-messenger-chat-scroll-button-align Facoltativo al centro Allineamento di "Vai in basso" i valori consentiti sono flex-start, center e flex-end
df-messenger-chat-scroll-button-container-padding Facoltativo 8 px Spaziatura interna del contenitore intorno a "Vai in basso" .
df-messenger-chat-scroll-button-text-display Facoltativo incorporata Visualizzazione del testo accanto all'icona nel pulsante "Vai in fondo". Usa none per nascondere il testo
df-messenger-chat-scroll-button-font-size Facoltativo 14px Dimensioni del testo del pulsante "Vai in fondo"
df-messenger-chat-scroll-button-font-color Facoltativo bianco Colore del testo del pulsante "Vai in fondo"
df-messenger-chat-scroll-button-background Facoltativo #0b57d0 Sfondo del pulsante "Vai in fondo"
df-messenger-chat-scroll-button-border-radius Facoltativo 999px Raggio del bordo di "Vai in basso" .
df-messenger-chat-messagelist-scroll-shadow-background Facoltativo gradiente radiale(lato più lontano al 50% 100%, rgba(0,0,0,.2), trasparente) in basso Ombra visualizzata nella parte inferiore dell'elenco dei messaggi quando non si scorre fino in fondo all'elenco. Imposta su none per disattivarla

Stile per le immagini degli attori

Le immagini degli attori sono le immagini mostrate accanto ai messaggi del bot o dell'attore. Per le immagini degli attori, puoi fornire le seguenti variabili CSS:

Proprietà Criterio di inserimento Valore predefinito Descrizione
df-messenger-message-actor-spacing Facoltativo 16 px Distanza tra l'immagine dell'attore e i messaggi
df-messenger-message-bot-actor-order Facoltativo riga Ordine delle immagini e dei messaggi degli attori. Usa row per avere l'immagine dell'attore a sinistra e i messaggi a destra oppure row-reverse per avere l'immagine dell'attore a destra e i messaggi a sinistra.
df-messenger-message-user-actor-order Facoltativo riga-inversa Ordine dell'immagine e dei messaggi dell'attore. Usa row-reverse per avere l'immagine dell'attore a destra e i messaggi a sinistra oppure row per avere l'immagine dell'attore a sinistra e i messaggi a destra.
df-messenger-message-actor-direction Facoltativo colonna Se sono il contrario di df-messenger-message-bot-actor-order e df-messenger-message-user-actor-order, usa column se si trovano su row o row quando sono basati su column.
df-messenger-message-actor-align Facoltativo flex all'inizio Allineamento dell'attore in relazione ai messaggi. Utilizza flex-start per posizionare l'immagine dell'attore in alto, center per centrarla o flex-end per posizionarla in basso.
df-messenger-message-actor-border-radius Facoltativo 999 px Raggio bordo dell'immagine dell'attore
df-messenger-message-actor-padding Facoltativo 8 px Spaziatura interna dell'immagine dell'attore
df-messenger-message-actor-image-size Facoltativo 24 px Dimensioni dell'immagine dell'attore
df-messenger-message-bot-actor-background Facoltativo bianco Sfondo dell'immagine dell'attore dell'agente
df-messenger-message-bot-actor-border Facoltativo nessuno Bordo dell'immagine dell'attore dell'agente
df-messenger-message-bot-actor-offset Facoltativo 0 Offset per spostare l'immagine dell'attore dell'agente
df-messenger-message-user-actor-background Facoltativo bianco Sfondo dell'immagine dell'attore dell'utente
df-messenger-message-user-actor-border Facoltativo nessuno Bordo dell'immagine dell'attore dell'utente
df-messenger-message-user-actor-offset Facoltativo 0 Offset per spostare l'immagine dell'attore dell'utente

Stili per input utente

Per l'input utente, è possibile fornire le seguenti variabili CSS:

Proprietà Criterio di inserimento Valore predefinito Descrizione
df-messenger-send-icon-color Facoltativo #0b57d0 Colore di invio nell'input utente
df-messenger-send-icon-color-hover Facoltativo #0b57d0 Colore dell'icona "Invia" nell'input dell'utente quando si passa il mouse sopra
df-messenger-send-icon-color-active Facoltativo #0b57d0 Colore di invio icona nell'input utente quando è possibile inviare testo
df-messenger-send-icon-offset-x Facoltativo 0 Offset verticale della funzione di invio nell'input utente
df-messenger-send-icon-offset-y Facoltativo -4 px Offset orizzontale di "invio" nell'input utente
df-messenger-input-background Facoltativo bianco Contesto dell'input dell'utente
df-messenger-input-padding Facoltativo 8 px Spaziatura interna generale tra il campo di input utente (incluso il pulsante di invio del messaggio) e il contenitore.
df-messenger-input-inner-padding Facoltativo 0px 48px 0px 0 Spaziatura interna interna tra il campo di input utente (escluso il pulsante Invia messaggio) e il contenitore.
df-messenger-input-border Facoltativo nessuno Bordo dell'input dell'utente
df-messenger-input-border-top Facoltativo 1 px solido #e0e0e0 Bordo superiore dell'input dell'utente
df-messenger-input-border-bottom Facoltativo nessuno Bordo inferiore del campo di testo dell'input dell'utente
df-messenger-input-font-family Facoltativo "Google Sans", "Helvetica Neue", senza grazie Famiglia di caratteri dell'input utente
df-messenger-input-font-color Facoltativo #1f1f1f Colore del testo dell'input dell'utente
df-messenger-input-font-size Facoltativo 14px Dimensioni del testo dell'input dell'utente
df-messenger-input-font-weight Facoltativo normale Spessore del carattere dell'input utente
df-messenger-input-box-border Facoltativo nessuno Bordo della casella di immissione dell'utente
df-messenger-input-box-focus-border Facoltativo nessuno Bordo della casella di immissione dell'utente quando è attiva
df-messenger-input-box-border-radius Facoltativo 0 Raggio del bordo della casella di immissione dell'utente
df-messenger-input-box-padding Facoltativo 12px 0 Spaziatura della casella di immissione dell'utente
df-messenger-input-box-focus-padding Facoltativo 12px 0 Spaziatura interna della casella di input utente quando lo stato attivo è selezionato
df-messenger-input-gutter Facoltativo stabile gronda della barra di scorrimento dell'input dell'utente
df-messenger-input-info-font-size Facoltativo 14 px Dimensioni del testo dei messaggi informativi nell'input dell'utente
df-messenger-input-info-font-weight Facoltativo normale Spessore del carattere dei messaggi informativi nell'input dell'utente
df-messenger-input-info-padding Facoltativo 14 px 16 px Spaziatura dei messaggi informativi nell'input dell'utente
df-messenger-input-info-line-height Facoltativo 20 px Altezza della riga dei messaggi informativi nell'input dell'utente
df-messenger-input-long-text-warning-display Facoltativo nessuno Se impostato su block, viene visualizzato un messaggio di avviso quando l'input supera i 256 caratteri. Attivo solo se l'attributo max-query-length è superiore (ad es. disattivato). Documentazione aggiuntiva.
df-messenger-input-warning-background Facoltativo #fef7e0 Sfondo del messaggio di avviso nell'input dell'utente
df-messenger-input-warning-color Facoltativo #410e0b Colore del testo del messaggio di avviso nell'input utente
df-messenger-input-warning-icon-color Facoltativo #e37400 Colore dell'icona nel messaggio di avviso nell'input dell'utente
df-messenger-input-error-background Facoltativo #f9dedc Sfondo del messaggio di errore nell'input dell'utente
df-messenger-input-error-color Facoltativo #410e0b Colore del testo del messaggio di errore nell'input dell'utente
df-messenger-input-error-icon-color Facoltativo #b3261e Colore dell'icona nel messaggio di avviso nell'input dell'utente

Overlay stile per l'autenticazione

Quando utilizzi una configurazione autenticata, per l'overlay puoi fornire le seguenti variabili CSS:

Proprietà Criterio di inserimento Valore predefinito Descrizione
df-messenger-auth-background Facoltativo rgba(204, 204, 204, 0,8) Sfondo della finestra di dialogo dell'agente quando viene visualizzata l'autenticazione
df-messenger-auth-button-background Facoltativo #0b57d0 Sfondo del pulsante di autenticazione
df-messenger-auth-button-font-family Facoltativo "Google Sans", "Helvetica Neue", senza grazie Famiglia di caratteri del pulsante di autenticazione
df-messenger-auth-button-font-color Facoltativo bianco Colore del testo del pulsante di autenticazione
df-messenger-auth-button-font-size Facoltativo 14 px Dimensioni del testo del pulsante di autenticazione
df-messenger-auth-button-border Facoltativo nessuno Bordo del pulsante di autenticazione
df-messenger-auth-button-border-radius Facoltativo 8 px Raggio del bordo del pulsante di autenticazione

Stile del feedback

Quando la funzionalità di feedback sulle risposte è attivata, è possibile fornire le seguenti variabili CSS per i controlli del feedback.

Proprietà Criterio di inserimento Valore predefinito Descrizione
df-messenger-message-feedback-icon-distance Facoltativo 8 px Distanza tra i pulsanti Mi piace e Non mi piace
df-messenger-message-feedback-icon-font-color Facoltativo #444746 Colore dei pulsanti Mi piace e Non mi piace
df-messenger-message-feedback-icon-font-color-active Facoltativo #444746 Colore dei pulsanti Mi piace e Non mi piace quando sono attivi
df-messenger-message-feedback-icon-border Facoltativo nessuno Bordo dei pulsanti Mi piace e Non mi piace
df-messenger-message-feedback-icon-border-radius Facoltativo 0 Raggio bordo dei pulsanti Mi piace e Non mi piace
df-messenger-message-feedback-icon-background Facoltativo nessuno Sfondo dei pulsanti Pollice su e Pollice giù
df-messenger-message-feedback-icon-background-hover Facoltativo nessuno Sfondo dei pulsanti Mi piace e Non mi piace al passaggio del mouse
df-messenger-message-feedback-icon-padding Facoltativo 0 Spaziatura interna dei pulsanti Mi piace e Non mi piace
df-messenger-message-rich-feedback-spacing Facoltativo 10px Spaziatura degli elementi nel feedback avanzato
df-messenger-message-rich-feedback-padding Facoltativo 0 Spaziatura interna dei feedback avanzati
df-messenger-message-rich-feedback-background Facoltativo nessuno Premessa del feedback avanzato
df-messenger-message-rich-feedback-border-radius Facoltativo 0 Raggio bordo del feedback dettagliato
df-messenger-message-rich-feedback-border Facoltativo nessuno Bordo del feedback avanzato
df-messenger-rich-feedback-offset-left Facoltativo 0 Offset sul lato sinistro