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à Policy di input Valore predefinito Descrizione
df-messenger-font-family Facoltativo "Google Sans", "Helvetica Neue", sans-serif Famiglia di caratteri da utilizzare in tutto il widget
df-messenger-font-size Facoltativo 14px Dimensioni del testo da utilizzare in tutto il widget
df-messenger-font-color Facoltativo #1f1f1f Colore del testo da utilizzare in tutto il widget
df-messenger-primary-color Facoltativo #0b57d0 Colore principale per gli elementi del widget (ad esempio, sfondo della barra del titolo, sfondo del pulsante 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 intorno agli elementi quando si trovano 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 bordo per la finestra di dialogo

Stile per df-messenger-chat-bubble

Quando utilizzi l'elemento df-messenger-chat-bubble, puoi fornire le seguenti variabili CSS:

Proprietà Policy di input Valore predefinito Descrizione
df-messenger-chat-window-height Facoltativo 480px 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 la bolla della chat e la finestra della chat
df-messenger-chat-window-box-shadow Facoltativo nessuno Ombreggiatura della finestra di chat
df-messenger-chat-collapse-icon-size Facoltativo annulla Dimensioni dell'icona del pulsante di compressione nella barra del titolo
df-messenger-chat-bubble-icon-size Facoltativo 36 px Dimensioni dell'icona della bolla della chat
df-messenger-chat-bubble-close-icon-size Facoltativo 24 px Dimensioni dell'icona di chiusura della bolla della chat
df-messenger-chat-bubble-close-icon-transform-rotate Facoltativo -90deg Rotazione dell'icona di chiusura della bolla della chat, che ruota a 0 gradi quando la chat viene chiusa
df-messenger-chat-bubble-icon-color Facoltativo bianco Colore dell'icona e dell'icona di chiusura della bolla della chat
df-messenger-chat-bubble-size Facoltativo 64 px Dimensioni della bolla della chat
df-messenger-chat-bubble-background Facoltativo #0b57d0 Sfondo della bolla della chat
df-messenger-chat-bubble-border-radius Facoltativo 32 px Raggio bordo della bolla della chat
df-messenger-chat-bubble-border Facoltativo nessuno Bordo della bolla 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 formato ridotto

Stile della barra del titolo

Per la barra del titolo, è possibile fornire le seguenti variabili CSS:

Proprietà Policy di input 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 per la 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 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", "Helvetica Neue", sans-serif Famiglia di caratteri del testo del titolo nella barra del titolo
df-messenger-titlebar-title-font-weight Facoltativo 400 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", sans-serif Famiglia di caratteri del testo del sottotitolo 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 dei sottotitoli codificati 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 Ordina gli elementi nella barra del titolo. I valori consentiti sono row o row-reverse. Questo valore è efficace 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 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 chat-title-icon.

Stili per la finestra della chat

Per la finestra di chat, è possibile fornire le seguenti variabili CSS:

Proprietà Policy di input 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 10px Spazio interno della finestra di dialogo dell'agente in cui vengono visualizzati 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", sans-serif Famiglia di caratteri dei messaggi di dialogo dell'agente
df-messenger-message-font-weight Facoltativo normale Spessore del carattere dei messaggi della finestra di dialogo dell'agente
df-messenger-message-bot-background Facoltativo #ecf3fe Contesto 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 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 del bordo in alto a sinistra per i messaggi dell'agente, esegue l'override del 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, esegue l'override del raggio generico
df-messenger-message-bot-border-bottom-left-radius Facoltativo 8 px Raggio del bordo in basso a sinistra per i messaggi dell'agente, esegue l'override del raggio generico
df-messenger-message-bot-border-bottom-right-radius Facoltativo 8 px Raggio del bordo in basso a destra per i messaggi dell'agente, esegue l'override del 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 utente, 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 utente, sostituisce il raggio generico
df-messenger-message-stack-spacing Facoltativo 10px Spazio tra due messaggi consecutivi
df-messenger-message-bot-stack-border-top-left-radius Facoltativo 8 px Raggio del bordo in alto a sinistra per i messaggi consecutivi dell'agente, esegue l'override del raggio in alto a sinistra dell'agente
df-messenger-message-bot-stack-border-top-right-radius Facoltativo 8 px Raggio del bordo in alto a destra per i messaggi consecutivi dell'agente, esegue l'override del raggio in alto a destra dell'agente
df-messenger-message-bot-stack-border-bottom-left-radius Facoltativo 8 px Raggio del bordo in basso a sinistra per i messaggi consecutivi dell'agente, esegue l'override del raggio in basso a sinistra dell'agente
df-messenger-message-bot-stack-border-bottom-right-radius Facoltativo 8 px Raggio del bordo in basso a destra per i messaggi consecutivi dell'agente, esegue l'override del 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 i messaggi utente consecutivi, sostituisce il raggio in alto a sinistra dell'utente
df-messenger-message-user-stack-border-top-right-radius Facoltativo 8 px Raggio del bordo in alto a destra per i messaggi utente consecutivi, sostituisce il raggio in alto a destra dell'utente
df-messenger-message-user-stack-border-bottom-left-radius Facoltativo 8 px Raggio del bordo in basso a sinistra per i messaggi utente consecutivi, sostituisce il raggio in basso a sinistra dell'utente
df-messenger-message-user-stack-border-bottom-right-radius Facoltativo 8 px Raggio del bordo in basso a destra per i messaggi 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 scrive, attiva solo se è impostato bot-writing-image
df-messenger-message-bot-writing-image-height Facoltativo 24 px Altezza dell'immagine mostrata mentre l'agente scrive, attiva solo se è impostato bot-writing-image
df-messenger-message-bot-writing-font-color Facoltativo #1f1f1f Colore del testo mostrato mentre l'agente scrive
df-messenger-message-bot-writing-font-weight Facoltativo normale Lo 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 mostrato mentre l'agente sta scrivendo
df-messenger-message-bot-writing-padding Facoltativo 12 px Spazio interno del messaggio mostrato mentre l'agente sta scrivendo
df-messenger-message-bot-writing-spacing Facoltativo 10px 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 basso", impostato su flex per attivarlo
df-messenger-chat-scroll-button-align Facoltativo al centro Allineamento del pulsante "Vai in fondo". I valori consentiti includono flex-start, center, flex-end
df-messenger-chat-scroll-button-container-padding Facoltativo 8 px Spaziatura interna del contenitore intorno al pulsante "Vai in fondo"
df-messenger-chat-scroll-button-text-display Facoltativo incorporata Visualizzazione del testo accanto all'icona nel pulsante "Vai in fondo", utilizza 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 del pulsante "Vai in fondo"
df-messenger-chat-messagelist-scroll-shadow-background Facoltativo radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), transparent) bottom Ombra visualizzata nella parte inferiore dell'elenco dei messaggi quando l'elenco non viene scorri fino in fondo, impostata su none per disattivarla

Stile delle immagini degli attori

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

Proprietà Policy di input 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 dell'immagine dell'attore e dei messaggi. Utilizza row per visualizzare l'immagine dell'attore a sinistra e i messaggi a destra oppure row-reverse per visualizzare l'immagine dell'attore a destra e i messaggi a sinistra.
df-messenger-message-user-actor-order Facoltativo inversione di riga Ordine dell'immagine dell'attore e dei messaggi. Utilizza row-reverse per visualizzare l'immagine dell'attore a destra e i messaggi a sinistra oppure row per visualizzare l'immagine dell'attore a sinistra e i messaggi a destra.
df-messenger-message-actor-direction Facoltativo colonna Deve essere l'opposto di df-messenger-message-bot-actor-order e df-messenger-message-user-actor-order, utilizza column quando questi sono basati su row o row quando sono basati su column.
df-messenger-message-actor-align Facoltativo flex all'inizio Allineamento dell'attore rispetto 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 999px 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'utente attore
df-messenger-message-user-actor-offset Facoltativo 0 Offset per spostare l'immagine dell'attore dell'utente

Stili per l'input utente

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

Proprietà Policy di input Valore predefinito Descrizione
df-messenger-send-icon-color Facoltativo #0b57d0 Colore dell'icona "Invia" nell'input utente
df-messenger-send-icon-color-hover Facoltativo #0b57d0 Colore dell'icona "Invia" nell'input dell'utente al passaggio del mouse
df-messenger-send-icon-color-active Facoltativo #0b57d0 Colore dell'icona "Invia" nell'input utente dell'utente quando è possibile inviare il testo
df-messenger-send-icon-offset-x Facoltativo 0 Offset verticale dell'icona "Invia" nell'input utente
df-messenger-send-icon-offset-y Facoltativo -4px Offset orizzontale dell'icona "Invia" nell'input utente
df-messenger-input-background Facoltativo bianco Background dell'input utente
df-messenger-input-padding Facoltativo 8 px Spaziatura interna complessiva tra il campo di input utente dell'utente (incluso il pulsante Invia messaggio) e il contenitore.
df-messenger-input-inner-padding Facoltativo 0px 48px 0px 0 Spaziatura interna tra il campo di input utente#39;utente (senza includere il pulsante Invia messaggio) e il contenitore.
df-messenger-input-border Facoltativo nessuno Bordo dell'input utente
df-messenger-input-border-top Facoltativo 1px solid #e0e0e0 Bordo superiore dell'input utente
df-messenger-input-border-bottom Facoltativo nessuno Bordo inferiore del campo di testo dell'input utente
df-messenger-input-font-family Facoltativo "Google Sans", "Helvetica Neue", sans-serif Famiglia di input utente dell'utente
df-messenger-input-font-color Facoltativo #1f1f1f Colore del testo dell'input utente
df-messenger-input-font-size Facoltativo 14px Dimensioni del testo dell'input dell'utente
df-messenger-input-font-weight Facoltativo normale Spessore carattere dell'input utente dell'utente
df-messenger-input-box-border Facoltativo nessuno Bordo della casella di input utente
df-messenger-input-box-focus-border Facoltativo nessuno Bordo della casella di input utente#39;utente quando è selezionata
df-messenger-input-box-border-radius Facoltativo 0 Raggio del bordo della casella di input utente
df-messenger-input-box-padding Facoltativo 12px 0 Spaziatura interna della casella di input utente dell'utente
df-messenger-input-box-focus-padding Facoltativo 12px 0 Spaziatura interna della casella di input utente#39;utente quando è selezionata
df-messenger-input-gutter Facoltativo stabile Gutter della barra di scorrimento dell'input utente
df-messenger-input-info-font-size Facoltativo 14px Dimensioni del testo dei messaggi informativi nell'input utente dell'utente
df-messenger-input-info-font-weight Facoltativo normale Spessore del carattere dei messaggi informativi nell'input utente dell'utente
df-messenger-input-info-padding Facoltativo 14px 16px Padding dei messaggi informativi nell'input utente dell'utente
df-messenger-input-info-line-height Facoltativo 20 px Altezza riga dei messaggi informativi nell'input utente 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 utente dell'utente
df-messenger-input-warning-color Facoltativo #410e0b Colore del testo del messaggio di avviso nell'input utente dell'utente
df-messenger-input-warning-icon-color Facoltativo #e37400 Colore dell'icona nel messaggio di avviso nell'input utente dell'utente
df-messenger-input-error-background Facoltativo #f9dedc Sfondo del messaggio di errore nell'input utente
df-messenger-input-error-color Facoltativo #410e0b Colore del testo del messaggio di errore nell'input utente
df-messenger-input-error-icon-color Facoltativo #b3261e Colore dell'icona nel messaggio di avviso nell'input utente dell'utente

Stile per la sovrapposizione di autenticazione

Quando utilizzi una configurazione autenticata, per l'overlay possono essere fornite le seguenti variabili CSS:

Proprietà Policy di input Valore predefinito Descrizione
df-messenger-auth-background Facoltativo rgba(204, 204, 204, 0,8) Sfondo della finestra di dialogo dell'agente quando viene mostrata 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", sans-serif 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 14px 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à Feedback sulla risposta è attivata, è possibile fornire le seguenti variabili CSS per i controlli del feedback.

Proprietà Policy di input 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 Mi piace e Non mi piace
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 Spazio interno del feedback avanzato
df-messenger-message-rich-feedback-background Facoltativo nessuno Background del feedback avanzato
df-messenger-message-rich-feedback-border-radius Facoltativo 0 Raggio bordo del feedback avanzato
df-messenger-message-rich-feedback-border Facoltativo nessuno Bordo del feedback avanzato
df-messenger-rich-feedback-offset-left Facoltativo 0 Offset sul lato sinistro