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“, serifenlos | Schriftfamilie, die im gesamten Widget verwendet werden soll |
df-messenger-font-size |
Optional | 14 Pixel | Textgröße für das gesamte Widget |
df-messenger-font-color |
Optional | #1f1f1f | Textfarbe 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 |
Stil für df-messenger-chat-bubble
Wenn du das df-messenger-chat-bubble-Element verwendest, kannst du die folgenden CSS-Variablen angeben:
| 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 der Chatbubble 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 die Minimierungsschaltfläche in der Titelleiste |
df-messenger-chat-bubble-icon-size |
Optional | 36 Pixel | Größe des Symbols für die Chatblase |
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 Symbol „Schließen“ für die Chatbubble. Beim Schließen des Chats wird es auf 0 Grad gedreht. |
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 Chatbubble |
df-messenger-chat-bubble-border-radius |
Optional | 32 Pixel | Rahmenradius der Chatbubble |
df-messenger-chat-bubble-border |
Optional | keine | Rahmen der Chatbubble |
df-messenger-chat-border-minimized |
Optional | keine | Rahmen des minimierten Chats |
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 angegeben werden:
| Attribute | Eingaberichtlinie | Standardwert | Beschreibung |
|---|---|---|---|
df-messenger-titlebar-background |
Optional | #0b57d0 | Hintergrund der Titelleiste |
df-messenger-titlebar-padding |
Optional | 0 15 px | Ränder 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ß | 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“, serifenlos | 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“, serifenlos | 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 das Chatfenster
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 Dialognachrichten des Kundenservicemitarbeiters |
df-messenger-message-font-weight |
Optional | normal | Schriftstärke der Dialognachrichten des Kundenservicemitarbeiters |
df-messenger-message-bot-background |
Optional | #ecf3fe | Hintergrund der vom Kundenservicemitarbeiter gesendeten Nachrichten |
df-messenger-message-bot-border |
Optional | keine | Rahmen der vom Kundenservicemitarbeiter 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 | Ränder für Nachrichten, gilt für alle Ecken |
df-messenger-message-bot-border-top-left-radius |
Optional | 8 Pixel | Rahmenradius oben links für Nachrichten von Kundenservicemitarbeitern, überschreibt den generischen Radius |
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 Agentennachrichten, überschreibt den generischen Radius |
df-messenger-message-user-border-top-left-radius |
Optional | 8 Pixel | Rahmenradius oben links für Nutzernachrichten, überschreibt den generischen Radius |
df-messenger-message-user-border-top-right-radius |
Optional | 8 Pixel | Rahmenradius oben rechts für Nutzernachrichten, überschreibt generischen 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 | Ränderdurchmesser unten rechts für Nutzernachrichten, überschreibt den generischen Durchmesser |
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 | 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 | Ränderradius rechts unten für aufeinanderfolgende Nachrichten von Kundenservicemitarbeitern, überschreibt den Ränderradius rechts unten des Kundenservicemitarbeiters |
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 Kundenservicemitarbeiter 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 | Schriftfarbe des Textes, der angezeigt wird, während der Kundenservicemitarbeiter schreibt |
df-messenger-message-bot-writing-font-weight |
Optional | normal | Schriftstärke des Texts, 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, der 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 | Hiermit wird festgelegt, ob die Schaltfläche „Nach unten springen“ angezeigt wird. Legen Sie flex fest, um die Schaltfläche zu aktivieren. |
df-messenger-chat-scroll-button-align |
Optional | center | Ausrichtung der Schaltfläche „Nach unten 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 „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 der Schaltfläche „Nach unten springen“ |
df-messenger-chat-scroll-button-border-radius |
Optional | 999 px | Rahmenradius der Schaltfläche „Nach unten 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 wird. Legen Sie none fest, um ihn zu deaktivieren. |
Styling für Bilder von Schauspielern
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 Darstellers und den Botschaften |
df-messenger-message-bot-actor-order |
Optional | Zeile | Reihenfolge von Bild des Schauspielers und Nachrichten. Mit row wird das Bild des Schauspielers links und die Nachrichten rechts angezeigt. Mit row-reverse wird das Bild des Schauspielers rechts und die Nachrichten links angezeigt. |
df-messenger-message-user-actor-order |
Optional | row-reverse | Reihenfolge von Bild des Schauspielers und Nachrichten. Mit row-reverse wird das Bild des Schauspielers rechts und die Nachrichten links angezeigt. Mit row wird das Bild des Schauspielers 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. Verwenden Sie column, wenn diese auf row basieren, oder row, wenn sie auf column basieren. |
df-messenger-message-actor-align |
Optional | flex-start | Ausrichtung des Aktors 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 | Ränder des Schauspielerbilds |
df-messenger-message-actor-image-size |
Optional | 24 Pixel | Größe des Bilds des Schauspielers |
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 | Versatz, 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 | Offset, um das Schauspielerbild des Nutzers zu verschieben |
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 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 | Vertikale Verschiebung des Sendesymbols in der Nutzereingabe |
df-messenger-send-icon-offset-y |
Optional | -4 px | Horizontaler Versatz des Sendesymbols 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 Eingabefeld des Nutzers (ohne Schaltfläche „Nachricht senden“) 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“, serifenlos | 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 Eingabefelds für Nutzer |
df-messenger-input-box-padding |
Optional | 12px 0 | Ränder des Eingabefelds |
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 Informationsnachrichten in der Nutzereingabe |
df-messenger-input-info-font-weight |
Optional | normal | Schriftschnitt von Informationsnachrichten in der Nutzereingabe |
df-messenger-input-info-padding |
Optional | 14 px 16 px | Einfügen von Leerzeichen in Informationsmeldungen 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 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 | Schriftfarbe 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 |
Styling für das Authentifizierungs-Overlay
Bei einer authentifizierten Einrichtung können die folgenden CSS-Variablen für das Overlay angegeben 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ß | Schriftfarbe 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 | Randradius 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 „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 | 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“, 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 | Abstand zwischen den Elementen im ausführlichen 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 des Rich-Feedbacks |
df-messenger-message-rich-feedback-border |
Optional | keine | Rand des Rich-Feedbacks |
df-messenger-rich-feedback-offset-left |
Optional | 0 | Offset auf der linken Seite |