Personalizzazioni CSS di Dialogflow Messenger

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

Stili generali

Le seguenti variabili CSS forniscono opzioni di stile generali:

Proprietà Criterio di input Valore predefinito Descrizione
df-messenger-font-family Facoltativo "Google Sans", "HSPAN Neue", Sans-Serif Famiglia di caratteri da utilizzare nel 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 di colore 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 per la 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 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 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 del fumetto della chat
df-messenger-chat-bubble-close-icon-transform-rotate Facoltativo -90° Rotazione dell'icona di chiusura per il fumetto della chat, cambia a 0deg alla chiusura della chat
df-messenger-chat-bubble-icon-color Facoltativo di colore bianco Colore dell'icona e dell'icona di chiusura per il fumetto della chat
df-messenger-chat-bubble-size Facoltativo 64 px Dimensioni del fumetto 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 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 della barra del titolo
df-messenger-titlebar-border-bottom Facoltativo nessuno Bordo inferiore della barra del titolo
df-messenger-titlebar-title-align Facoltativo inizio Allineamento del testo dei testi dei titoli nella barra del titolo. I valori consentiti sono start, center o end.
df-messenger-titlebar-font-color Facoltativo di colore 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 di colore 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", "HSPAN Neue", Sans-Serif Famiglia di caratteri del testo dei sottotitoli nella barra del titolo
df-messenger-titlebar-subtitle-font-weight Facoltativo 400 Lo spessore del carattere del testo dei sottotitoli nella barra del titolo
df-messenger-titlebar-subtitle-line-height Facoltativo normale Altezza della riga del testo dei sottotitoli 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 il valore chat-title-icon.
df-messenger-titlebar-icon-padding Facoltativo 0 12px 0 0 Spaziatura interna attorno all'icona nella barra del titolo. Questo valore viene applicato solo se è stato specificato il valore chat-title-icon.

Stile per la finestra di chat

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

Proprietà Criterio di input Valore predefinito Descrizione
df-messenger-chat-background Facoltativo #fafafa Sfondo della finestra di dialogo dell'agente in cui vengono mostrati i messaggi
df-messenger-chat-padding Facoltativo 10px 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", "HSPAN Neue", Sans-Serif 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 Background 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 Lo 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, 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 Il raggio del 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 degli utenti, 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 degli utenti, 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 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 messaggi agente consecutivi, sostituisce il raggio superiore sinistro agente
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 dell'agente consecutivi 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 inferiore destro 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 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 Lo spessore del carattere del testo mostrato mentre l'agente sta scrivendo
df-messenger-message-bot-writing-font-size Facoltativo 14px Dimensioni del testo visualizzato mentre l'agente sta scrivendo
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 Background del messaggio mostrato 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 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 attivare il pulsante
df-messenger-chat-scroll-button-align Facoltativo al centro Allineamento del pulsante "Vai in basso". I valori consentiti includono flex-start, center e flex-end
df-messenger-chat-scroll-button-container-padding Facoltativo 8 px Spaziatura interna del contenitore intorno al pulsante "Vai in basso"
df-messenger-chat-scroll-button-text-display Facoltativo incorporata Visualizzazione del testo accanto all'icona nel pulsante "Vai in basso", utilizza none per nascondere il testo
df-messenger-chat-scroll-button-font-size Facoltativo 14px Dimensioni del testo del pulsante "Vai in basso"
df-messenger-chat-scroll-button-font-color Facoltativo di colore bianco Colore del testo del pulsante "Vai in basso"
df-messenger-chat-scroll-button-background Facoltativo #0b57d0 Sfondo del pulsante "Vai in basso"
df-messenger-chat-scroll-button-border-radius Facoltativo 999px Raggio del bordo del pulsante "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 che viene mostrata in fondo all'elenco dei messaggi quando l'elenco non viene fatto scorrere fino in fondo, imposta su none per disattivare

Stile per le immagini degli attori

Le immagini dell'attore sono le immagini mostrate insieme ai messaggi del bot o dell'attore. Per queste immagini degli attori, possono essere fornite le seguenti variabili CSS:

Proprietà Criterio 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 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-invertire Ordine delle immagini e dei messaggi degli attori. 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 avvio flessibile Allineamento dell'attore in relazione ai messaggi. Usa flex-start per posizionare l'immagine dell'attore in alto, center per centrare l'immagine dell'attore o flex-end per posizionare l'immagine dell'attore nella parte inferiore.
df-messenger-message-actor-border-radius Facoltativo 999px Raggio del 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 di colore 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 di colore 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 l'input utente

Per l'input utente, possono essere fornite le seguenti variabili CSS:

Proprietà Criterio di input Valore predefinito Descrizione
df-messenger-send-icon-color Facoltativo #0b57d0 Colore dell'icona di invio nell'input utente
df-messenger-send-icon-color-hover Facoltativo #0b57d0 Colore dell'icona di invio nell'input utente al passaggio del mouse
df-messenger-send-icon-color-active Facoltativo #0b57d0 Colore dell'icona di invio nell'input 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 di colore bianco Background dell'input utente
df-messenger-input-padding Facoltativo 8 px Spaziatura interna generale tra il campo di input utente#39;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#39;utente (escluso il pulsante Invia messaggio) e il contenitore.
df-messenger-input-border Facoltativo nessuno Bordo dell'input utente
df-messenger-input-border-top Facoltativo 1 px solido #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", "HSPAN 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 del 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 quando lo stato è attivo
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 è attivo lo stato attivo
df-messenger-input-gutter Facoltativo stabile gronda della 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 Spaziatura interna dei messaggi informativi nell'input utente dell'utente
df-messenger-input-info-line-height Facoltativo 20 px Altezza della riga dei messaggi informativi nell'input utente dell'utente
df-messenger-input-long-text-warning-display Facoltativo nessuno Se il criterio viene impostato su block, verrà mostrato 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
df-messenger-input-warning-icon-color Facoltativo #e37400 Colore dell'icona nel messaggio di avviso nell'input utente
df-messenger-input-error-background Facoltativo #f9dedc Background 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

Overlay stile per l'autenticazione

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

Proprietà Criterio 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", "HSPAN Neue", Sans-Serif Famiglia di caratteri del pulsante di autenticazione
df-messenger-auth-button-font-color Facoltativo di colore 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 dei feedback

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

Proprietà Criterio 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 del 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 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 del 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