CSS-Anpassungen für Dialogflow CX Messenger

Sie können den Stil Ihres Chatdialogs anpassen. Legen Sie dazu CSS-Variablen fest.

Allgemeine Formatierung

Die folgenden CSS-Variablen bieten allgemeine Stiloptionen:

Eigenschaften Eingaberichtlinie Standardwert Beschreibung
df-messenger-font-family Optional „Google Sans“, „Helvetica Neue“, Sans Serif Schriftfamilie, die im gesamten Widget verwendet werden soll
df-messenger-font-size Optional 14 Pixel Schriftgröße für das gesamte Widget
df-messenger-font-color Optional #1f1f1f Textfarbe, die im gesamten Widget verwendet werden soll
df-messenger-primary-color Optional #0b57d0 Primärfarbe für Elemente im gesamten Widget, z. B. Titelleistenhintergrund und Aktionsschaltflächenhintergrund
df-messenger-focus-color Optional #1e88e5 Farbe des Fokusrings um Elemente
df-messenger-focus-color-contrast Optional Weiß Farbe des Fokusrings um Elemente, wenn sie sich in einem übergeordneten Element mit einer Hintergrundfarbe befinden (z. B. in der Titelleiste)
df-messenger-chat-border Optional Keine Rahmen für das Dialogfeld
df-messenger-chat-border-radius Optional 0 Rahmenradius für das Dialogfeld

Stil für df-messenger-chat-bubble

Wenn Sie das df-messenger-chat-bubble-Element verwenden, können die folgenden CSS-Variablen angegeben werden:

Eigenschaften Eingaberichtlinie Standardwert Beschreibung
df-messenger-chat-window-height Optional 480 Pixel Höhe des Chatfensters
df-messenger-chat-window-width Optional 320 Pixel Breite des Chatfensters
df-messenger-chat-window-offset Optional 16 Pixel Abstand zwischen der Chatblase und dem Chatfenster
df-messenger-chat-window-box-shadow Optional Keine Schatten des Chatfensters
df-messenger-chat-collapse-icon-size Optional Nicht festgelegt Größe des Symbols für das Minimieren in der Titelleiste
df-messenger-chat-bubble-icon-size Optional 36 Pixel Größe des Symbols für die Chat-Bubble
df-messenger-chat-bubble-close-icon-size Optional 24 Pixel Größe des Symbols „Schließen“ für die Chat-Bubble
df-messenger-chat-bubble-close-icon-transform-rotate Optional -90deg Drehung des Symbols „Schließen“ für die Chatblase. Beim Schließen des Chats wird es auf 0 Grad gedreht.
df-messenger-chat-bubble-icon-color Optional Weiß Farbe des Symbols und des Symbols „Schließen“ für die Chat-Bubble
df-messenger-chat-bubble-size Optional 64 Pixel Größe der Chatblase
df-messenger-chat-bubble-background Optional #0b57d0 Hintergrund der Chat-Bubble
df-messenger-chat-bubble-border-radius Optional 32 Pixel Rahmenradius der Chat-Bubble
df-messenger-chat-bubble-border Optional Keine Rahmen der Chat-Bubble
df-messenger-chat-border-minimized Optional Keine Rahmen des Chats in minimierter Form
df-messenger-chat-border-radius-minimized Optional 0 Rahmenradius des Chats in minimierter Form

Stile für die Titelleiste

Für die Titelleiste können die folgenden CSS-Variablen angegeben werden:

Eigenschaften Eingaberichtlinie Standardwert Beschreibung
df-messenger-titlebar-background Optional #0b57d0 Hintergrund der Titelleiste
df-messenger-titlebar-padding Optional 0 15px Abstand der Titelleiste
df-messenger-titlebar-border Optional Keine Rahmen für die Titelleiste
df-messenger-titlebar-border-bottom Optional Keine Unterer Rand der Titelleiste
df-messenger-titlebar-title-align Optional start Textausrichtung des Titels in der Titelleiste. Zulässige Werte sind start, center oder end.
df-messenger-titlebar-font-color Optional Weiß Textfarbe des Textes in der Titelleiste
df-messenger-titlebar-letter-spacing Optional normal Zeichenabstand des Texts in der Titelleiste
df-messenger-titlebar-title-font-size Optional 18 Pixel Textgröße des Titeltexts in der Titelleiste
df-messenger-titlebar-title-font-family Optional „Google Sans“, „Helvetica Neue“, Sans Serif Schriftfamilie des Titeltexts in der Titelleiste
df-messenger-titlebar-title-font-weight Optional 400 Schriftstärke des Titeltexts in der Titelleiste
df-messenger-titlebar-title-line-height Optional normal Zeilenhöhe des Titeltexts in der Titelleiste
df-messenger-titlebar-title-letter-spacing Optional normal Zeichenabstand des Titeltexts in der Titelleiste
df-messenger-titlebar-subtitle-font-color Optional Weiß Textfarbe des Untertitels in der Titelleiste
df-messenger-titlebar-subtitle-font-size Optional 18 Pixel Textgröße des Untertiteltexts in der Titelleiste
df-messenger-titlebar-subtitle-font-family Optional „Google Sans“, „Helvetica Neue“, Sans Serif Schriftfamilie des Untertiteltexts in der Titelleiste
df-messenger-titlebar-subtitle-font-weight Optional 400 Schriftstärke des Untertiteltexts in der Titelleiste
df-messenger-titlebar-subtitle-line-height Optional normal Zeilenhöhe des Untertitels in der Titelleiste
df-messenger-titlebar-subtitle-letter-spacing Optional normal Zeichenabstand des Untertitels in der Titelleiste
df-messenger-titlebar-title-order Optional Zeile Elemente in der Titelleiste anordnen. Zulässige Werte sind row und row-reverse. Dieser Wert ist nur wirksam, wenn das Attribut chat-title-icon angegeben wurde.
df-messenger-titlebar-icon-width Optional 18 Pixel Die Breite des Symbols in der Titelleiste. Dieser Wert wird nur angewendet, wenn chat-title-icon angegeben wurde.
df-messenger-titlebar-icon-height Optional 18 Pixel Die Höhe des Symbols in der Titelleiste. Dieser Wert wird nur angewendet, wenn chat-title-icon angegeben wurde.
df-messenger-titlebar-icon-padding Optional 0 12px 0 0 Der Abstand um das Symbol in der Titelleiste. Dieser Wert wird nur angewendet, wenn chat-title-icon angegeben wurde.

Formatierung für das Chatfenster

Für das Chatfenster können die folgenden CSS-Variablen bereitgestellt werden:

Eigenschaften Eingaberichtlinie Standardwert Beschreibung
df-messenger-chat-background Optional #fafafa Hintergrund des Agent-Dialogfelds, in dem Nachrichten angezeigt werden
df-messenger-chat-padding Optional 10 Pixel Abstand des Agent-Dialogfelds, in dem Nachrichten angezeigt werden
df-messenger-messagelist-border Optional Keine Rahmen der Nachrichtenliste
df-messenger-message-border Optional Keine Rahmen der Dialogfeldnachrichten des KI-Agenten
df-messenger-message-font-size Optional 14 Pixel Textgröße der Agent-Dialognachrichten
df-messenger-message-font-family Optional „Google Sans“, „Helvetica Neue“, Sans Serif Schriftfamilie der Dialognachrichten des Agenten
df-messenger-message-font-weight Optional normal Schriftstärke der Dialognachrichten des Agenten
df-messenger-message-bot-background Optional #ecf3fe Hintergrund der vom Kundenservicemitarbeiter gesendeten Nachrichten
df-messenger-message-bot-border Optional Keine Rahmen der vom Agenten gesendeten Nachrichten
df-messenger-message-bot-font-color Optional #1f1f1f Textfarbe der vom Agenten gesendeten Nachrichten
df-messenger-message-bot-font-weight Optional normal Schriftstärke der vom Agenten gesendeten Nachrichten
df-messenger-message-user-background Optional #e1e3e1 Hintergrund der vom Nutzer gesendeten Nachrichten
df-messenger-message-user-border Optional Keine Rahmen der vom Nutzer gesendeten Nachrichten
df-messenger-message-user-font-color Optional #1f1f1f Textfarbe der vom Nutzer gesendeten Nachrichten
df-messenger-message-user-font-weight Optional normal Schriftstärke der vom Nutzer gesendeten Nachrichten
df-messenger-message-spacing Optional 10 Pixel Abstand zwischen zwei Nachrichten
df-messenger-message-border-radius Optional 8 Pixel Rahmenradius für Nachrichten, gilt für alle Ecken
df-messenger-message-bot-border-top-left-radius Optional 8 Pixel Rahmenradius oben links für Agent-Nachrichten. Überschreibt den generischen Radius.
df-messenger-message-bot-border-top-right-radius Optional 8 Pixel Der obere rechte Grenzradius für Agent-Nachrichten. Überschreibt den generischen Radius.
df-messenger-message-bot-border-bottom-left-radius Optional 8 Pixel Rahmenradius unten links für Agent-Nachrichten. Überschreibt den generischen Radius.
df-messenger-message-bot-border-bottom-right-radius Optional 8 Pixel Radius der unteren rechten Ecke für Agent-Nachrichten. Überschreibt den generischen Radius.
df-messenger-message-user-border-top-left-radius Optional 8 Pixel Eckradius oben links für Nutzernachrichten. Überschreibt den generischen Radius.
df-messenger-message-user-border-top-right-radius Optional 8 Pixel Border-Radius oben rechts für Nutzernachrichten. Überschreibt den generischen Radius.
df-messenger-message-user-border-bottom-left-radius Optional 8 Pixel Rahmenradius unten links für Nutzernachrichten. Überschreibt den allgemeinen Radius.
df-messenger-message-user-border-bottom-right-radius Optional 8 Pixel Der Border-Radius unten rechts für Nutzernachrichten. Überschreibt den generischen Radius.
df-messenger-message-stack-spacing Optional 10 Pixel Abstand zwischen zwei aufeinanderfolgenden Nachrichten
df-messenger-message-bot-stack-border-top-left-radius Optional 8 Pixel Eckradius oben links für aufeinanderfolgende Agent-Nachrichten. Überschreibt den Eckradius oben links des Agents.
df-messenger-message-bot-stack-border-top-right-radius Optional 8 Pixel Border radius top right for consecutive agent messages, overrides agent top right radius
df-messenger-message-bot-stack-border-bottom-left-radius Optional 8 Pixel Eckradius unten links für aufeinanderfolgende Agent-Nachrichten. Überschreibt den Eckradius unten links des Agents.
df-messenger-message-bot-stack-border-bottom-right-radius Optional 8 Pixel Eckradius unten rechts für aufeinanderfolgende Agent-Nachrichten. Überschreibt den Eckradius unten rechts des Agents.
df-messenger-message-user-stack-border-top-left-radius Optional 8 Pixel Eckradius oben links für aufeinanderfolgende Nutzernachrichten. Überschreibt den Eckradius oben links des Nutzers.
df-messenger-message-user-stack-border-top-right-radius Optional 8 Pixel Der Grenzradius oben rechts für aufeinanderfolgende Nutzernachrichten. Er überschreibt den Radius oben rechts für Nutzer.
df-messenger-message-user-stack-border-bottom-left-radius Optional 8 Pixel Radius der unteren linken Ecke für aufeinanderfolgende Nutzernachrichten. Überschreibt den Radius der unteren linken Ecke des Nutzers.
df-messenger-message-user-stack-border-bottom-right-radius Optional 8 Pixel Der Grenzradius unten rechts für aufeinanderfolgende Nutzernachrichten überschreibt den Radius unten rechts für Nutzer.
df-messenger-message-user-writing-image-width Optional 24 Pixel Breite des Bildes, das angezeigt wird, während der Agent schreibt. Nur aktiv, wenn bot-writing-image festgelegt ist.
df-messenger-message-bot-writing-image-height Optional 24 Pixel Höhe des Bildes, das angezeigt wird, während der Kundenservicemitarbeiter schreibt. Nur aktiv, wenn bot-writing-image festgelegt ist.
df-messenger-message-bot-writing-font-color Optional #1f1f1f Textfarbe des Textes, der während der Eingabe durch den Kundenservicemitarbeiter angezeigt wird
df-messenger-message-bot-writing-font-weight Optional normal Schriftstärke des Texts, der während der Eingabe durch den Kundenservicemitarbeiter angezeigt wird
df-messenger-message-bot-writing-font-size Optional 14 Pixel Textgröße des Texts, der während des Schreibens des Kundenservicemitarbeiters angezeigt wird
df-messenger-message-bot-writing-border Optional Keine Rahmen der Nachricht, die angezeigt wird, während der Kundenservicemitarbeiter schreibt
df-messenger-message-bot-writing-background Optional #ecf3fe Hintergrund der Nachricht, die angezeigt wird, während der Kundenservicemitarbeiter schreibt
df-messenger-message-bot-writing-padding Optional 12 Pixel Abstand der Nachricht, die angezeigt wird, während der Kundenservicemitarbeiter schreibt
df-messenger-message-bot-writing-spacing Optional 10 Pixel Abstand zwischen der Nachricht, die angezeigt wird, während der Kundenservicemitarbeiter schreibt, und der vorherigen Nachricht
df-messenger-chat-scroll-button-enabled-display Optional Keine Definiert die Anzeige der Schaltfläche „Zum Ende springen“. Wenn der Wert auf flex gesetzt ist, wird die Schaltfläche aktiviert.
df-messenger-chat-scroll-button-align Optional center Ausrichtung der Schaltfläche „Zum Ende springen“. Zulässige Werte sind flex-start, center und flex-end.
df-messenger-chat-scroll-button-container-padding Optional 8 Pixel Abstand des Containers um die Schaltfläche „Zum Ende springen“
df-messenger-chat-scroll-button-text-display Optional Inline Anzeige des Texts neben dem Symbol auf der Schaltfläche „Zum Ende springen“. Verwenden Sie none, um den Text auszublenden.
df-messenger-chat-scroll-button-font-size Optional 14 Pixel Textgröße der Schaltfläche „Zum Ende springen“
df-messenger-chat-scroll-button-font-color Optional Weiß Textfarbe der Schaltfläche „Zum Ende springen“
df-messenger-chat-scroll-button-background Optional #0b57d0 Hintergrund der Schaltfläche „Zum Ende springen“
df-messenger-chat-scroll-button-border-radius Optional 999 px Eckradius der Schaltfläche „Zum Ende springen“
df-messenger-chat-messagelist-scroll-shadow-background Optional radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), transparent) bottom Schatten, der unten in der Nachrichtenliste angezeigt wird, wenn die Liste nicht bis zum Ende gescrollt wurde. Auf none setzen, um ihn zu deaktivieren.

Styling für Schauspielerbilder

Absenderbilder sind die Bilder, die neben Nachrichten des Bots oder des Absenders angezeigt werden. Für diese Schauspielerbilder können die folgenden CSS-Variablen angegeben werden:

Eigenschaften Eingaberichtlinie Standardwert Beschreibung
df-messenger-message-actor-spacing Optional 16 Pixel Abstand zwischen dem Bild des Schauspielers und den Nachrichten
df-messenger-message-bot-actor-order Optional Zeile Reihenfolge von Schauspielerbild und Nachrichten. Verwenden Sie row, um das Bild des Schauspielers links und die Nachrichten rechts zu platzieren, oder row-reverse, um das Bild des Schauspielers rechts und die Nachrichten links zu platzieren.
df-messenger-message-user-actor-order Optional row-reverse Reihenfolge von Schauspielerbild und Nachrichten. Verwende row-reverse, um das Bild des Schauspielers rechts und die Nachrichten links zu platzieren, oder row, um das Bild des Schauspielers links und die Nachrichten rechts zu platzieren.
df-messenger-message-actor-direction Optional Spalte Sollte das Gegenteil von df-messenger-message-bot-actor-order und df-messenger-message-user-actor-order sein. Verwenden Sie column, wenn diese auf row basieren, oder row, wenn sie auf column basieren.
df-messenger-message-actor-align Optional flex-start Übereinstimmung des Akteurs mit den Nachrichten. Verwenden Sie flex-start, um das Bild des Schauspielers oben zu platzieren, center, um es zu zentrieren, oder flex-end, um es unten zu platzieren.
df-messenger-message-actor-border-radius Optional 999 px Rahmenradius des Schauspielerbilds
df-messenger-message-actor-padding Optional 8 Pixel Abstand des Schauspielerbilds
df-messenger-message-actor-image-size Optional 24 Pixel Größe des Bildes des Schauspielers
df-messenger-message-bot-actor-background Optional Weiß Hintergrund des Schauspielerbilds des Agents
df-messenger-message-bot-actor-border Optional Keine Rahmen des Akteurbilds des Agents
df-messenger-message-bot-actor-offset Optional 0 Offset zum Verschieben des Schauspielerbilds des Agents
df-messenger-message-user-actor-background Optional Weiß Hintergrund des Schauspielerbilds des Nutzers
df-messenger-message-user-actor-border Optional Keine Rahmen des Akteurbilds des Nutzers
df-messenger-message-user-actor-offset Optional 0 Offset zum Verschieben des Schauspielerbilds des Nutzers

Formatierung für Nutzereingaben

Für die Nutzereingabe können die folgenden CSS-Variablen bereitgestellt werden:

Eigenschaften Eingaberichtlinie Standardwert Beschreibung
df-messenger-send-icon-color Optional #0b57d0 Farbe des Symbols „Senden“ in der Nutzereingabe
df-messenger-send-icon-color-hover Optional #0b57d0 Farbe des Symbols „Senden“ in der Nutzereingabe, wenn der Mauszeiger darauf bewegt wird
df-messenger-send-icon-color-active Optional #0b57d0 Farbe des Symbols „Senden“ in der Nutzereingabe, wenn Text gesendet werden kann
df-messenger-send-icon-offset-x Optional 0 Vertikaler Versatz des „Senden“-Symbols in der Nutzereingabe
df-messenger-send-icon-offset-y Optional -4px Horizontaler Versatz des Symbols „Senden“ in der Nutzereingabe
df-messenger-input-background Optional Weiß Hintergrund der Nutzereingabe
df-messenger-input-padding Optional 8 Pixel Der gesamte Innenabstand zwischen dem Eingabefeld für Nutzer (einschließlich der Schaltfläche zum Senden von Nachrichten) und dem Container.
df-messenger-input-inner-padding Optional 0 px 48 px 0 px 0 Inneres Padding zwischen dem Eingabefeld für Nutzer (ohne Schaltfläche zum Senden von Nachrichten) und dem Container.
df-messenger-input-border Optional Keine Rahmen der Benutzereingabe
df-messenger-input-border-top Optional 1px solid #e0e0e0 Oberer Rand der Benutzereingabe
df-messenger-input-border-bottom Optional Keine Unterer Rahmen des Textfelds für die Nutzereingabe
df-messenger-input-font-family Optional „Google Sans“, „Helvetica Neue“, Sans Serif Schriftfamilie der Nutzereingabe
df-messenger-input-font-color Optional #1f1f1f Textfarbe der Nutzereingabe
df-messenger-input-font-size Optional 14 Pixel Textgröße der Nutzereingabe
df-messenger-input-font-weight Optional normal Schriftstärke der Benutzereingabe
df-messenger-input-box-border Optional Keine Rahmen des Eingabefelds für die Nutzereingabe
df-messenger-input-box-focus-border Optional Keine Rahmen des Eingabefelds bei Fokus
df-messenger-input-box-border-radius Optional 0 Rahmenradius des Eingabefelds für die Nutzereingabe
df-messenger-input-box-padding Optional 12px 0 Abstand des Eingabefelds
df-messenger-input-box-focus-padding Optional 12px 0 Abstand des Eingabefelds bei Fokus
df-messenger-input-gutter Optional stabil Scrollbar gutter of the user input
df-messenger-input-info-font-size Optional 14 Pixel Textgröße von Informationsnachrichten in der Nutzereingabe
df-messenger-input-info-font-weight Optional normal Schriftstärke von Informationsmeldungen in der Nutzereingabe
df-messenger-input-info-padding Optional 14px 16px Auffüllen von Informationsnachrichten in der Nutzereingabe
df-messenger-input-info-line-height Optional 20 Pixel Zeilenhöhe von Informationsnachrichten in der Nutzereingabe
df-messenger-input-long-text-warning-display Optional Keine Wenn diese Option auf block festgelegt ist, wird eine Warnmeldung angezeigt, sobald die Eingabe 256 Zeichen überschreitet. Nur aktiv, wenn das Attribut max-query-length höher ist (z.B. deaktiviert). Zusätzliche Dokumentation.
df-messenger-input-warning-background Optional #fef7e0 Hintergrund der Warnmeldung in der Nutzereingabe
df-messenger-input-warning-color Optional #410e0b Textfarbe der Warnmeldung in der Nutzereingabe
df-messenger-input-warning-icon-color Optional #e37400 Farbe des Symbols in der Warnmeldung in der Nutzereingabe
df-messenger-input-error-background Optional #f9dedc Hintergrund der Fehlermeldung in der Nutzereingabe
df-messenger-input-error-color Optional #410e0b Textfarbe der Fehlermeldung in der Nutzereingabe
df-messenger-input-error-icon-color Optional #b3261e Farbe des Symbols in der Warnmeldung in der Nutzereingabe

Formatierung für das Authentifizierungs-Overlay

Bei einer authentifizierten Einrichtung können die folgenden CSS-Variablen für das Overlay bereitgestellt werden:

Eigenschaften Eingaberichtlinie Standardwert Beschreibung
df-messenger-auth-background Optional rgba(204, 204, 204, .8) Hintergrund des Agent-Dialogfelds, wenn die Authentifizierung angezeigt wird
df-messenger-auth-button-background Optional #0b57d0 Hintergrund der Authentifizierungsschaltfläche
df-messenger-auth-button-font-family Optional „Google Sans“, „Helvetica Neue“, Sans Serif Schriftfamilie der Authentifizierungsschaltfläche
df-messenger-auth-button-font-color Optional Weiß Textfarbe des Authentifizierungsbuttons
df-messenger-auth-button-font-size Optional 14 Pixel Textgröße des Authentifizierungsbuttons
df-messenger-auth-button-border Optional Keine Rahmen der Authentifizierungsschaltfläche
df-messenger-auth-button-border-radius Optional 8 Pixel Grenzradius der Authentifizierungsschaltfläche

Feedback-Formatierung

Wenn die Funktion Antwortfeedback aktiviert ist, können die folgenden CSS-Variablen für die Feedback-Steuerelemente bereitgestellt werden.

Eigenschaften Eingaberichtlinie Standardwert Beschreibung
df-messenger-message-feedback-icon-distance Optional 8 Pixel Abstand zwischen den Schaltflächen „Mag ich“ und „Mag ich nicht“
df-messenger-message-feedback-icon-font-color Optional #444746 Farbe der „Mag ich“- und „Mag ich nicht“-Symbole
df-messenger-message-feedback-icon-font-color-active Optional #444746 Farbe der „Mag ich“- und „Mag ich nicht“-Symbole, wenn sie aktiv sind
df-messenger-message-feedback-icon-border Optional Keine Rahmen der Schaltflächen „Mag ich“ und „Mag ich nicht“
df-messenger-message-feedback-icon-border-radius Optional 0 Rahmenradius der Schaltflächen „Mag ich“ und „Mag ich nicht“
df-messenger-message-feedback-icon-background Optional Keine Hintergrund der Schaltflächen „Mag ich“ und „Mag ich nicht“
df-messenger-message-feedback-icon-background-hover Optional Keine Hintergrund der Schaltflächen „Mag ich“ und „Mag ich nicht“ beim Hovern
df-messenger-message-feedback-icon-padding Optional 0 Abstand der Schaltflächen „Mag ich“ und „Mag ich nicht“
df-messenger-message-rich-feedback-spacing Optional 10 Pixel Abstand zwischen Elementen im ausführlichen Feedback
df-messenger-message-rich-feedback-padding Optional 0 Padding des ausführlichen Feedbacks
df-messenger-message-rich-feedback-background Optional Keine Hintergrund des aussagekräftigen Feedbacks
df-messenger-message-rich-feedback-border-radius Optional 0 Rahmenradius des Rich-Media-Feedbacks
df-messenger-message-rich-feedback-border Optional Keine Rahmen des detaillierten Feedbacks
df-messenger-rich-feedback-offset-left Optional 0 Offset auf der linken Seite