You can customize the style of your chat dialog by setting CSS variables.
General styling
The following CSS variables provide general styling options:
| Properties | Input policy | Default value | Description |
|---|---|---|---|
df-messenger-font-family |
Optional | "Google Sans", "Helvetica Neue", sans-serif | Font family to use throughout the widget |
df-messenger-font-size |
Optional | 14px | Text size to use throughout the widget |
df-messenger-font-color |
Optional | #1f1f1f | Text color to use throughout the widget |
df-messenger-primary-color |
Optional | #0b57d0 | Primary color for elements throughout the widget (such as title bar background, action button background and more) |
df-messenger-focus-color |
Optional | #1e88e5 | Color of the focus ring around elements |
df-messenger-focus-color-contrast |
Optional | white | Color of the focus ring around elements when inside a parent with a background color (such as the title bar) |
df-messenger-chat-border |
Optional | none | Border for the dialog |
df-messenger-chat-border-radius |
Optional | 0 | Border radius for the dialog |
Styling for df-messenger-chat-bubble
When using the df-messenger-chat-bubble element, the following CSS variables can be provided:
| Properties | Input policy | Default value | Description |
|---|---|---|---|
df-messenger-chat-window-height |
Optional | 480px | Height of the chat window |
df-messenger-chat-window-width |
Optional | 320px | Width of the chat window |
df-messenger-chat-window-offset |
Optional | 16px | Distance between the chat bubble and the chat window |
df-messenger-chat-window-box-shadow |
Optional | none | Box shadow of the chat window |
df-messenger-chat-collapse-icon-size |
Optional | unset | Size of the collapse button icon in the title bar |
df-messenger-chat-bubble-icon-size |
Optional | 36px | Size of the icon for the chat bubble |
df-messenger-chat-bubble-close-icon-size |
Optional | 24px | Size of the close icon for the chat bubble |
df-messenger-chat-bubble-close-icon-transform-rotate |
Optional | -90deg | Rotation of the close icon for the chat bubble, rotates to 0deg on closing the chat |
df-messenger-chat-bubble-icon-color |
Optional | white | Color of the icon and close icon for the chat bubble |
df-messenger-chat-bubble-size |
Optional | 64px | Size of the chat bubble |
df-messenger-chat-bubble-background |
Optional | #0b57d0 | Background of the chat bubble |
df-messenger-chat-bubble-border-radius |
Optional | 32px | Border radius of the chat bubble |
df-messenger-chat-bubble-border |
Optional | none | Border of the chat bubble |
df-messenger-chat-border-minimized |
Optional | none | Border of the chat in minimized form |
df-messenger-chat-border-radius-minimized |
Optional | 0 | Border radius of the chat in minimized form |
Styling for titlebar
For the titlebar, the following CSS variables can be provided:
| Properties | Input policy | Default value | Description |
|---|---|---|---|
df-messenger-titlebar-background |
Optional | #0b57d0 | Background of the title bar |
df-messenger-titlebar-padding |
Optional | 0 15px | Padding of the title bar |
df-messenger-titlebar-border |
Optional | none | Border for the title bar |
df-messenger-titlebar-border-bottom |
Optional | none | Border bottom of the title bar |
df-messenger-titlebar-title-align |
Optional | start | Text alignment of the title text(s) in the title bar, allowed values are start, center or end |
df-messenger-titlebar-font-color |
Optional | white | Text color of the text in the title bar |
df-messenger-titlebar-letter-spacing |
Optional | normal | Letter spacing of the text in the title bar |
df-messenger-titlebar-title-font-size |
Optional | 18px | Text size of the title text in the title bar |
df-messenger-titlebar-title-font-family |
Optional | "Google Sans", "Helvetica Neue", sans-serif | Font family of the title text in the title bar |
df-messenger-titlebar-title-font-weight |
Optional | 400 | Font weight of the title text in the title bar |
df-messenger-titlebar-title-line-height |
Optional | normal | Line height of the title text in the title bar |
df-messenger-titlebar-title-letter-spacing |
Optional | normal | Letter spacing of the title text in the title bar |
df-messenger-titlebar-subtitle-font-color |
Optional | white | Text color of the subtitle text in the title bar |
df-messenger-titlebar-subtitle-font-size |
Optional | 18px | Text size of the subtitle text in the title bar |
df-messenger-titlebar-subtitle-font-family |
Optional | "Google Sans", "Helvetica Neue", sans-serif | Font family of the subtitle text in the title bar |
df-messenger-titlebar-subtitle-font-weight |
Optional | 400 | Font weight of the subtitle text in the title bar |
df-messenger-titlebar-subtitle-line-height |
Optional | normal | Line height of the subtitle text in the title bar |
df-messenger-titlebar-subtitle-letter-spacing |
Optional | normal | Letter spacing of the subtitle text in the title bar |
df-messenger-titlebar-title-order |
Optional | row | Order elements in the title bar, allowed values are row or row-reverse. This value is only effective if the chat-title-icon attribute has been specified. |
df-messenger-titlebar-icon-width |
Optional | 18px | The width of the icon in the title bar. This value is only applied if the chat-title-icon has been specified. |
df-messenger-titlebar-icon-height |
Optional | 18px | The height of the icon in the title bar. This value is only applied if the chat-title-icon has been specified. |
df-messenger-titlebar-icon-padding |
Optional | 0 12px 0 0 | The padding around the icon in the title bar. This value is only applied if the chat-title-icon has been specified. |
Styling for chat window
For the chat window, the following CSS variables can be provided:
| Properties | Input policy | Default value | Description |
|---|---|---|---|
df-messenger-chat-background |
Optional | #fafafa | Background of the agent dialog where messages are shown |
df-messenger-chat-padding |
Optional | 10px | Padding of the agent dialog where messages are shown |
df-messenger-messagelist-border |
Optional | none | Border of the message list |
df-messenger-message-border |
Optional | none | Border of the agent dialog messages |
df-messenger-message-font-size |
Optional | 14px | Text size of the agent dialog messages |
df-messenger-message-font-family |
Optional | "Google Sans", "Helvetica Neue", sans-serif | Font family of the agent dialog messages |
df-messenger-message-font-weight |
Optional | normal | Font weight of the agent dialog messages |
df-messenger-message-bot-background |
Optional | #ecf3fe | Background of the messages sent by the agent |
df-messenger-message-bot-border |
Optional | none | Border of the messages sent by the agent |
df-messenger-message-bot-font-color |
Optional | #1f1f1f | Text color of the messages sent by the agent |
df-messenger-message-bot-font-weight |
Optional | normal | Font weight of the messages sent by the agent |
df-messenger-message-user-background |
Optional | #e1e3e1 | Background of the messages sent by the user |
df-messenger-message-user-border |
Optional | none | Border of the messages sent by the user |
df-messenger-message-user-font-color |
Optional | #1f1f1f | Text color of the messages sent by the user |
df-messenger-message-user-font-weight |
Optional | normal | Font weight of the messages sent by the user |
df-messenger-message-spacing |
Optional | 10px | Space between two messages |
df-messenger-message-border-radius |
Optional | 8px | Border radius for messages, applies to all corners |
df-messenger-message-bot-border-top-left-radius |
Optional | 8px | Border radius top left for agent messages, overrides generic radius |
df-messenger-message-bot-border-top-right-radius |
Optional | 8px | Border radius top right for agent messages, overrides generic radius |
df-messenger-message-bot-border-bottom-left-radius |
Optional | 8px | Border radius bottom left for agent messages, overrides generic radius |
df-messenger-message-bot-border-bottom-right-radius |
Optional | 8px | Border radius bottom right for agent messages, overrides generic radius |
df-messenger-message-user-border-top-left-radius |
Optional | 8px | Border radius top left for user messages, overrides generic radius |
df-messenger-message-user-border-top-right-radius |
Optional | 8px | Border radius top right for user messages, overrides generic radius |
df-messenger-message-user-border-bottom-left-radius |
Optional | 8px | Border radius bottom left for user messages, overrides generic radius |
df-messenger-message-user-border-bottom-right-radius |
Optional | 8px | Border radius bottom right for user messages, overrides generic radius |
df-messenger-message-stack-spacing |
Optional | 10px | Space between two consecutive messages |
df-messenger-message-bot-stack-border-top-left-radius |
Optional | 8px | Border radius top left for consecutive agent messages, overrides agent top left radius |
df-messenger-message-bot-stack-border-top-right-radius |
Optional | 8px | Border radius top right for consecutive agent messages, overrides agent top right radius |
df-messenger-message-bot-stack-border-bottom-left-radius |
Optional | 8px | Border radius bottom left for consecutive agent messages, overrides agent bottom left radius |
df-messenger-message-bot-stack-border-bottom-right-radius |
Optional | 8px | Border radius bottom right for consecutive agent messages, overrides agent bottom right radius |
df-messenger-message-user-stack-border-top-left-radius |
Optional | 8px | Border radius top left for consecutive user messages, overrides user top left radius |
df-messenger-message-user-stack-border-top-right-radius |
Optional | 8px | Border radius top right for consecutive user messages, overrides user top right radius |
df-messenger-message-user-stack-border-bottom-left-radius |
Optional | 8px | Border radius bottom left for consecutive user messages, overrides user bottom left radius |
df-messenger-message-user-stack-border-bottom-right-radius |
Optional | 8px | Border radius bottom right for consecutive user messages, overrides user bottom right radius |
df-messenger-message-user-writing-image-width |
Optional | 24px | Width of the image shown while the agent is writing, only active if bot-writing-image is set |
df-messenger-message-bot-writing-image-height |
Optional | 24px | Height of the image shown while the agent is writing, only active if bot-writing-image is set |
df-messenger-message-bot-writing-font-color |
Optional | #1f1f1f | Text color of the text shown while the agent is writing |
df-messenger-message-bot-writing-font-weight |
Optional | normal | Font weight of the text shown while the agent is writing |
df-messenger-message-bot-writing-font-size |
Optional | 14px | Text size of the text shown while the agent is writing |
df-messenger-message-bot-writing-border |
Optional | none | Border of the message shown while the agent is writing |
df-messenger-message-bot-writing-background |
Optional | #ecf3fe | Background of the message shown while the agent is writing |
df-messenger-message-bot-writing-padding |
Optional | 12px | Padding of the message shown while the agent is writing |
df-messenger-message-bot-writing-spacing |
Optional | 10px | Space between the message shown while the agent is writing and the previous message |
df-messenger-chat-scroll-button-enabled-display |
Optional | none | Defines the display of the "Jump to Bottom" button, set to flex to enable the button |
df-messenger-chat-scroll-button-align |
Optional | center | Alignment of the "Jump to Bottom" button, allowed values include flex-start, center, flex-end |
df-messenger-chat-scroll-button-container-padding |
Optional | 8px | Padding of the container around the "Jump to Bottom" button |
df-messenger-chat-scroll-button-text-display |
Optional | inline | Display of the text next to the icon in the "Jump to Bottom" button, use none to hide the text |
df-messenger-chat-scroll-button-font-size |
Optional | 14px | Text size of the "Jump to Bottom" button |
df-messenger-chat-scroll-button-font-color |
Optional | white | Text color of the "Jump to Bottom" button |
df-messenger-chat-scroll-button-background |
Optional | #0b57d0 | Background of the "Jump to Bottom" button |
df-messenger-chat-scroll-button-border-radius |
Optional | 999px | Border radius of the "Jump to Bottom" button |
df-messenger-chat-messagelist-scroll-shadow-background |
Optional | radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), transparent) bottom |
Shadow that is shown on the bottom of the message list when the list is not scrolled to the bottom, set to none to disable |
Styling for actor images
Actor images are the images shown alongside messages of either the bot or the actor. For those actor images, the following CSS variables can be provided:
| Properties | Input policy | Default value | Description |
|---|---|---|---|
df-messenger-message-actor-spacing |
Optional | 16px | Distance between the actor image and the messages |
df-messenger-message-bot-actor-order |
Optional | row | Order of actor image and messages. Use row to have the actor image on the left and messages on the right, or row-reverse to have the actor image on the right and messages on the left. |
df-messenger-message-user-actor-order |
Optional | row-reverse | Order of actor image and messages. Use row-reverse to have the actor image on the right and messages on the left, or row to have the actor image on the left and messages on the right. |
df-messenger-message-actor-direction |
Optional | column | Should be the opposite of df-messenger-message-bot-actor-order and df-messenger-message-user-actor-order, use column when these are row based, or row when they are column based. |
df-messenger-message-actor-align |
Optional | flex-start | Alignment of the actor in relation to the messages. Use flex-start to have the actor image on top, center to have the actor image centered, or flex-end to have the actor image on the bottom. |
df-messenger-message-actor-border-radius |
Optional | 999px | Border radius of the actor image |
df-messenger-message-actor-padding |
Optional | 8px | Padding of the actor image |
df-messenger-message-actor-image-size |
Optional | 24px | Size of the actor image image |
df-messenger-message-bot-actor-background |
Optional | white | Background of the agent's actor image |
df-messenger-message-bot-actor-border |
Optional | none | Border of the agent's actor image |
df-messenger-message-bot-actor-offset |
Optional | 0 | Offset to move the agent's actor image |
df-messenger-message-user-actor-background |
Optional | white | Background of the user's actor image |
df-messenger-message-user-actor-border |
Optional | none | Border of the user's actor image |
df-messenger-message-user-actor-offset |
Optional | 0 | Offset to move the user's actor image |
Styling for user input
For the user input, the following CSS variables can be provided:
| Properties | Input policy | Default value | Description |
|---|---|---|---|
df-messenger-send-icon-color |
Optional | #0b57d0 | Color of the "send" icon in the user input |
df-messenger-send-icon-color-hover |
Optional | #0b57d0 | Color of the "send" icon in the user input when hovered |
df-messenger-send-icon-color-active |
Optional | #0b57d0 | Color of the "send" icon in the user input when text can be sent |
df-messenger-send-icon-offset-x |
Optional | 0 | Vertical offset of the "send" icon in the user input |
df-messenger-send-icon-offset-y |
Optional | -4px | Horizontal offset of the "send" icon in the user input |
df-messenger-input-background |
Optional | white | Background of the user input |
df-messenger-input-padding |
Optional | 8px | Overall padding between the user input field (including send message button) and the container. |
df-messenger-input-inner-padding |
Optional | 0px 48px 0px 0 | Inner padding between the user input field (not including send message button) and the container. |
df-messenger-input-border |
Optional | none | Border of the user input |
df-messenger-input-border-top |
Optional | 1px solid #e0e0e0 | Top border of the user input |
df-messenger-input-border-bottom |
Optional | none | Border bottom of the text field of the user input |
df-messenger-input-font-family |
Optional | "Google Sans", "Helvetica Neue", sans-serif | Font family of the user input |
df-messenger-input-font-color |
Optional | #1f1f1f | Text color of the user input |
df-messenger-input-font-size |
Optional | 14px | Text size of the user input |
df-messenger-input-font-weight |
Optional | normal | Font weight of the user input |
df-messenger-input-box-border |
Optional | none | Border of the user input box |
df-messenger-input-box-focus-border |
Optional | none | Border of the user input box while focused |
df-messenger-input-box-border-radius |
Optional | 0 | Border radius of the user input box |
df-messenger-input-box-padding |
Optional | 12px 0 | Padding of the user input box |
df-messenger-input-box-focus-padding |
Optional | 12px 0 | Padding of the user input box while focused |
df-messenger-input-gutter |
Optional | stable | Scrollbar gutter of the user input |
df-messenger-input-info-font-size |
Optional | 14px | Text size of informational messages in the user input |
df-messenger-input-info-font-weight |
Optional | normal | Font weight of informational messages in the user input |
df-messenger-input-info-padding |
Optional | 14px 16px | Padding of informational messages in the user input |
df-messenger-input-info-line-height |
Optional | 20px | Line height of informational messages in the user input |
df-messenger-input-long-text-warning-display |
Optional | none | If set to block, will show a warning message once the input exceeds 256 characters. Only active if the max-query-length attribute is higher (e.g. disabled). Additional documentation. |
df-messenger-input-warning-background |
Optional | #fef7e0 | Background of the warning message in the user input |
df-messenger-input-warning-color |
Optional | #410e0b | Text color of the warning message in the user input |
df-messenger-input-warning-icon-color |
Optional | #e37400 | Color of the icon in the warning message in the user input |
df-messenger-input-error-background |
Optional | #f9dedc | Background of the error message in the user input |
df-messenger-input-error-color |
Optional | #410e0b | Text color of the error message in the user input |
df-messenger-input-error-icon-color |
Optional | #b3261e | Color of the icon in the warning message in the user input |
Styling for authentication overlay
When using an authenticated setup, the following CSS variables can be provided for the overlay:
| Properties | Input policy | Default value | Description |
|---|---|---|---|
df-messenger-auth-background |
Optional | rgba(204, 204, 204, .8) | Background of the agent dialog when authentication is shown |
df-messenger-auth-button-background |
Optional | #0b57d0 | Background of the authentication button |
df-messenger-auth-button-font-family |
Optional | "Google Sans", "Helvetica Neue", sans-serif | Font family of the authentication button |
df-messenger-auth-button-font-color |
Optional | white | Text color of the authentication button |
df-messenger-auth-button-font-size |
Optional | 14px | Text size of the authentication button |
df-messenger-auth-button-border |
Optional | none | Border of the authentication button |
df-messenger-auth-button-border-radius |
Optional | 8px | Border radius of the authentication button |
Feedback styling
When the answer feedback feature is enabled, the following CSS variables can be provided for the feedback controls.
| Properties | Input policy | Default value | Description |
|---|---|---|---|
df-messenger-message-feedback-icon-distance |
Optional | 8px | Distance between the thumbs up and down buttons |
df-messenger-message-feedback-icon-font-color |
Optional | #444746 | Color of the thumbs up and down buttons |
df-messenger-message-feedback-icon-font-color-active |
Optional | #444746 | Color of the thumbs up and down buttons when active |
df-messenger-message-feedback-icon-border |
Optional | none | Border of the thumbs up and down buttons |
df-messenger-message-feedback-icon-border-radius |
Optional | 0 | Border radius of the thumbs up and down buttons |
df-messenger-message-feedback-icon-background |
Optional | none | Background of the thumbs up and down buttons |
df-messenger-message-feedback-icon-background-hover |
Optional | none | Background of the thumbs up and down buttons when hovered |
df-messenger-message-feedback-icon-padding |
Optional | 0 | Padding of the thumbs up and down buttons |
df-messenger-message-rich-feedback-spacing |
Optional | 10px | Spacing of elements in the rich feedback |
df-messenger-message-rich-feedback-padding |
Optional | 0 | Padding of the rich feedback |
df-messenger-message-rich-feedback-background |
Optional | none | Background of the rich feedback |
df-messenger-message-rich-feedback-border-radius |
Optional | 0 | Border radius of the rich feedback |
df-messenger-message-rich-feedback-border |
Optional | none | Border of the rich feedback |
df-messenger-rich-feedback-offset-left |
Optional | 0 | Offset on the left side |