CSS-Anpassungen für Dialogflow CX Messenger

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

Allgemeines Design

Die folgenden CSS-Variablen bieten allgemeine Stiloptionen:

Attribute Eingaberichtlinie Standardwert Beschreibung
df-messenger-font-family Optional „Google Sans“, „Helvetica Neue“, Sans Serif Schriftfamilie für das gesamte Widget
df-messenger-font-size Optional 14 Pixel Textgröße für das gesamte Widget
df-messenger-font-color Optional #1f1f1f Schriftfarbe für das gesamte Widget
df-messenger-primary-color Optional #0b57d0 Primäre Farbe für Elemente im gesamten Widget (z. B. Hintergrund der Titelleiste, Hintergrund der Aktionsschaltfläche)
df-messenger-focus-color Optional #1e88e5 Farbe des Fokusrings um Elemente herum
df-messenger-focus-color-contrast Optional Weiß Farbe des Fokusrings um Elemente herum, 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

Stile für df-messenger-chat-bubble

Bei Verwendung des df-messenger-chat-bubble-Elements können die folgenden CSS-Variablen angegeben werden:

Attribute 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 Sprechblase und Chatfenster
df-messenger-chat-window-box-shadow Optional keine Feldschatten des Chatfensters
df-messenger-chat-collapse-icon-size Optional Nicht festgelegt Größe des Symbols für die Minimierungsschaltfläche in der Titelleiste
df-messenger-chat-bubble-icon-size Optional 36 Pixel Größe des Symbols für das Infofeld
df-messenger-chat-bubble-close-icon-size Optional 24 Pixel Größe des Symbol „Schließen“ für die Chatblase
df-messenger-chat-bubble-close-icon-transform-rotate Optional -90 Grad Drehung des Symbols „Schließen“ für das Infofeld, rotiert beim Schließen des Chats auf 0deg
df-messenger-chat-bubble-icon-color Optional Weiß Farbe des Symbols und des Symbol „Schließen“ für die Chatblase
df-messenger-chat-bubble-size Optional 64 Pixel Größe des Chatfelds
df-messenger-chat-bubble-background Optional #0b57d0 Hintergrund der Chat-Bubble
df-messenger-chat-bubble-border-radius Optional 32 Pixel Rahmenradius des Sprechblasens
df-messenger-chat-bubble-border Optional keine Rand der Chat-Bubble
df-messenger-chat-border-minimized Optional keine Rand des Chats in minimierter Form
df-messenger-chat-border-radius-minimized Optional 0 Rahmenradius des minimierten Chats

Stil für Titelleiste

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

Attribute Eingaberichtlinie Standardwert Beschreibung
df-messenger-titlebar-background Optional #0b57d0 Hintergrund der Titelleiste
df-messenger-titlebar-padding Optional 0 15 Pixel Padding der Titelleiste
df-messenger-titlebar-border Optional keine Rahmen für die Titelleiste
df-messenger-titlebar-border-bottom Optional keine Unterer Rahmen der Titelleiste
df-messenger-titlebar-title-align Optional start Textausrichtung des Titeltexts in der Titelleiste. Zulässige Werte sind start, center oder end.
df-messenger-titlebar-font-color Optional Weiß Schriftfarbe des Textes in der Titelleiste
df-messenger-titlebar-letter-spacing Optional normal Zeichenabstand des Textes 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 Untertitels in der Titelleiste
df-messenger-titlebar-subtitle-line-height Optional normal Zeilenhöhe des Untertiteltexts in der Titelleiste
df-messenger-titlebar-subtitle-letter-spacing Optional normal Zeichenabstand des Untertiteltexts in der Titelleiste
df-messenger-titlebar-title-order Optional Zeile Reihenfolge der Elemente in der Titelleiste festlegen. 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.

Stil für Chatfenster festlegen

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

Attribute Eingaberichtlinie Standardwert Beschreibung
df-messenger-chat-background Optional #fafafa Hintergrund des Kundenservicemitarbeiter-Dialogfelds, in dem Nachrichten angezeigt werden
df-messenger-chat-padding Optional 10 Pixel Ränder des Kundenservicemitarbeiter-Dialogfelds, in dem Nachrichten angezeigt werden
df-messenger-messagelist-border Optional keine Rahmen der Nachrichtenliste
df-messenger-message-border Optional keine Rahmen der Dialognachrichten des Kundenservicemitarbeiters
df-messenger-message-font-size Optional 14 Pixel Textgröße der Dialognachrichten des Kundenservicemitarbeiters
df-messenger-message-font-family Optional „Google Sans“, „Helvetica Neue“, serifenlos Schriftfamilie der Agent-Dialogmeldungen
df-messenger-message-font-weight Optional normal Schriftstärke der Agent-Dialogmeldungen
df-messenger-message-bot-background Optional #ecf3fe Hintergrund der vom Agent gesendeten Nachrichten
df-messenger-message-bot-border Optional keine Rahmen der vom Agent gesendeten Nachrichten
df-messenger-message-bot-font-color Optional #1f1f1f Textfarbe der vom Kundenservicemitarbeiter gesendeten Nachrichten
df-messenger-message-bot-font-weight Optional normal Schriftschnitt der vom Kundenservicemitarbeiter 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 Schriftfarbe der vom Nutzer gesendeten Nachrichten
df-messenger-message-user-font-weight Optional normal Schriftschnitt 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 für Nachrichten von Kundenservicemitarbeitern oben links, der allgemeine Radius wird überschrieben
df-messenger-message-bot-border-top-right-radius Optional 8 Pixel Randradius rechts oben für Nachrichten von Kundenservicemitarbeitern, überschreibt den generischen Radius
df-messenger-message-bot-border-bottom-left-radius Optional 8 Pixel Rahmenradius links unten für Agentennachrichten, überschreibt den generischen Radius
df-messenger-message-bot-border-bottom-right-radius Optional 8 Pixel Rahmenradius rechts unten für Kundenservicemitarbeiternachrichten, überschreibt den generischen Radius
df-messenger-message-user-border-top-left-radius Optional 8 Pixel Rahmenradius oben links für Nutzermitteilungen, überschreibt generischer Radius
df-messenger-message-user-border-top-right-radius Optional 8 Pixel Rahmenradius oben rechts für Nutzernachrichten, hat Vorrang vor allgemeinem Radius
df-messenger-message-user-border-bottom-left-radius Optional 8 Pixel Rahmenradius links unten für Nutzernachrichten, überschreibt den generischen Radius
df-messenger-message-user-border-bottom-right-radius Optional 8 Pixel Rahmenradius unten rechts für Nutzernachrichten, überschreibt allgemeiner Radius
df-messenger-message-stack-spacing Optional 10 Pixel Leerzeichen zwischen zwei aufeinanderfolgenden Nachrichten
df-messenger-message-bot-stack-border-top-left-radius Optional 8 Pixel Rahmenradius oben links für aufeinanderfolgende Nachrichten von Kundenservicemitarbeitern, überschreibt den linken oberen Radius des Kundenservicemitarbeiters
df-messenger-message-bot-stack-border-top-right-radius Optional 8 Pixel Rahmenradius rechts oben für aufeinanderfolgende Nachrichten des Kundenservicemitarbeiters, überschreibt den rechten oberen Radius des Kundenservicemitarbeiters
df-messenger-message-bot-stack-border-bottom-left-radius Optional 8 Pixel Rahmenradius links unten für aufeinanderfolgende Agentennachrichten, überschreibt den linken unteren Radius des Agents
df-messenger-message-bot-stack-border-bottom-right-radius Optional 8 Pixel Rahmenradius unten rechts für aufeinanderfolgende Agent-Nachrichten, Radius unten rechts des Agenten wird überschrieben
df-messenger-message-user-stack-border-top-left-radius Optional 8 Pixel Rahmenradius oben links für aufeinanderfolgende Nutzernachrichten, überschreibt den Nutzerradius oben links
df-messenger-message-user-stack-border-top-right-radius Optional 8 Pixel Ränder oben rechts für aufeinanderfolgende Nutzernachrichten, überschreibt den Ränder oben rechts für Nutzer
df-messenger-message-user-stack-border-bottom-left-radius Optional 8 Pixel Ränder an der unteren linken Seite für aufeinanderfolgende Nutzernachrichten, überschreibt den Ränder an der unteren linken Seite des Nutzers
df-messenger-message-user-stack-border-bottom-right-radius Optional 8 Pixel Ränder unten rechts für aufeinanderfolgende Nutzernachrichten, überschreibt den Ränder unten rechts des Nutzers
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 Agent schreibt; nur aktiv, wenn bot-writing-image festgelegt ist
df-messenger-message-bot-writing-font-color Optional #1f1f1f Schriftfarbe des Textes, der angezeigt wird, während der Kundenservicemitarbeiter schreibt
df-messenger-message-bot-writing-font-weight Optional normal Schriftstärke des Textes, der angezeigt wird, während der Kundenservicemitarbeiter schreibt
df-messenger-message-bot-writing-font-size Optional 14 Pixel Textgröße des Texts, der angezeigt wird, während der Kundenservicemitarbeiter schreibt
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 Weißraum um die 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 Legt die Anzeige von „Zum Ende springen“ fest. Schaltfläche, auf flex einstellen, um die Schaltfläche zu aktivieren
df-messenger-chat-scroll-button-align Optional center Ausrichtung von „Zum Ende springen“ Schaltfläche, 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 „Nach unten springen“
df-messenger-chat-scroll-button-text-display Optional Inline Anzeige des Texts neben dem Symbol auf der Schaltfläche „Nach unten springen“. Mit none lässt sich der Text ausblenden.
df-messenger-chat-scroll-button-font-size Optional 14 Pixel Textgröße der Schaltfläche „Nach unten springen“
df-messenger-chat-scroll-button-font-color Optional Weiß Schriftfarbe der Schaltfläche „Nach unten springen“
df-messenger-chat-scroll-button-background Optional #0b57d0 Hintergrund von „Zum Ende springen“ Schaltfläche
df-messenger-chat-scroll-button-border-radius Optional 999 Pixel Rahmenradius für „Zum Ende springen“ Schaltfläche
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 wird. Legen Sie none fest, um ihn zu deaktivieren.

Stile für Schauspielerbilder

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

Attribute 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 des Schauspielerbilds und der Nachrichten. Mit row wird das Schauspielerbild links und die Nachrichten rechts angezeigt. Mit row-reverse wird das Schauspielerbild rechts und die Nachrichten auf der linken Seite angezeigt.
df-messenger-message-user-actor-order Optional row-reverse Reihenfolge von Bild des Schauspielers und Nachrichten. Mit row-reverse wird das Schauspielerbild rechts und die Nachrichten links angezeigt. Mit row wird das Schauspielerbild links und die Nachrichten rechts angezeigt.
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. Verwende column, wenn sie auf row basieren, oder row, wenn sie auf column basieren.
df-messenger-message-actor-align Optional flex-start Ausrichtung des Akteurs in Bezug auf die Nachrichten. Mit flex-start wird das Bild des Schauspielers oben, mit center zentriert und mit flex-end unten angezeigt.
df-messenger-message-actor-border-radius Optional 999 px Rahmenradius des Schauspielerbilds
df-messenger-message-actor-padding Optional 8 Pixel Padding des Schauspielerbilds
df-messenger-message-actor-image-size Optional 24 Pixel Größe des Schauspielerbilds
df-messenger-message-bot-actor-background Optional Weiß Hintergrund des Schauspielerbilds des Kundenservicemitarbeiters
df-messenger-message-bot-actor-border Optional keine Rahmen des Schauspielerbilds des Kundenservicemitarbeiters
df-messenger-message-bot-actor-offset Optional 0 Offset, um das Schauspielerbild des Kundenservicemitarbeiters zu verschieben
df-messenger-message-user-actor-background Optional Weiß Hintergrund des Schauspielerbilds des Nutzers
df-messenger-message-user-actor-border Optional keine Rahmen des Schauspielerbilds des Nutzers
df-messenger-message-user-actor-offset Optional 0 Versatz zum Verschieben des Schauspielerbilds des Nutzers

Stil für Nutzereingaben

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

Attribute 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 von "send" Symbol 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 Offset von "send" Symbol in der Nutzereingabe
df-messenger-send-icon-offset-y Optional -4 px Horizontaler Offset von "send" Symbol in der Nutzereingabe
df-messenger-input-background Optional Weiß Hintergrund der Nutzereingabe
df-messenger-input-padding Optional 8 Pixel Der Abstand zwischen dem Eingabefeld des Nutzers (einschließlich Schaltfläche zum Senden von Nachrichten) und dem Container.
df-messenger-input-inner-padding Optional 0px 48px 0px 0 Innenabstand zwischen dem Nutzereingabefeld (ohne die Schaltfläche zum Senden einer Nachricht) und dem Container.
df-messenger-input-border Optional keine Rahmen der Nutzereingabe
df-messenger-input-border-top Optional 1px solid #e0e0e0 Oberer Rahmen der Nutzereingabe
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 Nutzereingabe
df-messenger-input-box-border Optional keine Rahmen des Eingabefelds für Nutzer
df-messenger-input-box-focus-border Optional keine Rahmen des Eingabefelds, wenn es den Fokus hat
df-messenger-input-box-border-radius Optional 0 Rahmenradius des Nutzereingabefelds
df-messenger-input-box-padding Optional 12px 0 Padding des Nutzereingabefelds
df-messenger-input-box-focus-padding Optional 12px 0 Ränder des Eingabefelds, wenn es den Fokus hat
df-messenger-input-gutter Optional stabil Abstand der Bildlaufleiste der Nutzereingabe
df-messenger-input-info-font-size Optional 14 Pixel Textgröße von Botschaften in der Nutzereingabe
df-messenger-input-info-font-weight Optional normal Schriftstärke von Informationsmeldungen in der Nutzereingabe
df-messenger-input-info-padding Optional 14 px 16 px Informationsfüllung in der Nutzereingabe
df-messenger-input-info-line-height Optional 20 Pixel Zeilenhöhe von Nachrichten mit Informationen 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 max-query-length-Attribut 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 Schriftfarbe der Fehlermeldung in der Nutzereingabe
df-messenger-input-error-icon-color Optional #b3261e Farbe des Symbols in der Warnmeldung in der Nutzereingabe

Stil für Authentifizierungs-Overlay

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

Attribute Eingaberichtlinie Standardwert Beschreibung
df-messenger-auth-background Optional rgba(204, 204, 204, .8) Hintergrund des Dialogfelds für Kundenservicemitarbeiter, 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“, serifenlos Schriftfamilie der Authentifizierungsschaltfläche
df-messenger-auth-button-font-color Optional Weiß Textfarbe der Authentifizierungsschaltfläche
df-messenger-auth-button-font-size Optional 14 Pixel Textgröße der Authentifizierungsschaltfläche
df-messenger-auth-button-border Optional keine Rahmen der Authentifizierungsschaltfläche
df-messenger-auth-button-border-radius Optional 8 Pixel Rahmenradius der Authentifizierungsschaltfläche

Feedback-Styling

Wenn die Funktion Feedback zur Antwort aktiviert ist, können die folgenden CSS-Variablen für die Feedbacksteuerelemente angegeben werden.

Attribute Eingaberichtlinie Standardwert Beschreibung
df-messenger-message-feedback-icon-distance Optional 8 Pixel Abstand zwischen den Schaltflächen für „Mag ich“ und „Mag ich nicht“
df-messenger-message-feedback-icon-font-color Optional #444746 Farbe der Schaltflächen „Mag ich“ und „Mag ich nicht“
df-messenger-message-feedback-icon-font-color-active Optional #444746 Farbe der Schaltflächen „Mag ich“ und „Mag ich nicht“, wenn sie aktiv sind
df-messenger-message-feedback-icon-border Optional keine Rand der Schaltflächen für „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“, wenn der Mauszeiger darauf ruht
df-messenger-message-feedback-icon-padding Optional 0 Abstand zwischen den Schaltflächen „Mag ich“ und „Mag ich nicht“
df-messenger-message-rich-feedback-spacing Optional 10 Pixel Abstände von Elementen im umfangreichen Feedback
df-messenger-message-rich-feedback-padding Optional 0 Padding des Rich-Feedbacks
df-messenger-message-rich-feedback-background Optional keine Hintergrund des aussagekräftigen Feedbacks
df-messenger-message-rich-feedback-border-radius Optional 0 Rahmenradius für das erweiterte Feedback
df-messenger-message-rich-feedback-border Optional keine Rand des ausführlichen Feedbacks
df-messenger-rich-feedback-offset-left Optional 0 Offset auf der linken Seite