您可以通过设置 CSS 变量来自定义聊天对话框的样式。
常规样式
以下 CSS 变量提供了常规样式选项：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-font-family |
可选 | "Google Sans", "Helvetica Neue", sans-serif | 要在整个微件中使用的字体系列。 |
df-messenger-font-size |
可选 | 14px | 要在整个 widget 中使用的文字大小。 |
df-messenger-font-color |
可选 | #1f1f1f | 要在整个 widget 中使用的文本颜色。 |
df-messenger-primary-color |
可选 | #0b57d0 | 整个微件中元素（例如标题栏背景、操作按钮背景等）的主色。 |
df-messenger-focus-color |
可选 | #1e88e5 | 元素周围聚焦环的颜色。 |
df-messenger-focus-color-contrast |
可选 | 白色 | 当元素位于具有背景颜色的父级（例如标题栏）中时，元素周围的焦点环的颜色。 |
df-messenger-chat-border |
可选 | 无 | 对话框的边框。 |
df-messenger-chat-border-radius |
可选 | 0 | 对话框的边框半径。 |
df-messenger-chat-bubble 的样式
使用 df-messenger-chat-bubble 元素时，可以提供以下 CSS 变量：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-chat-window-height |
可选 | 480px | 对话窗口的高度。 |
df-messenger-chat-window-width |
可选 | 320px | 对话窗口的宽度。 |
df-messenger-chat-window-offset |
可选 | 16px | 聊天气泡与聊天窗口之间的距离。 |
df-messenger-chat-window-box-shadow |
可选 | 无 | 对话窗口的框阴影。 |
df-messenger-chat-collapse-icon-size |
可选 | 未设置 | 标题栏中收起按钮图标的大小。 |
df-messenger-chat-bubble-icon-size |
可选 | 36px | 聊天气泡图标的大小。 |
df-messenger-chat-bubble-close-icon-size |
可选 | 24px | 聊天气泡的关闭图标的大小。 |
df-messenger-chat-bubble-close-icon-transform-rotate |
可选 | -90deg | 聊天气泡的关闭图标的旋转角度，在关闭聊天时旋转到 0 度。 |
df-messenger-chat-bubble-icon-color |
可选 | 白色 | 聊天气泡的图标和关闭图标的颜色。 |
df-messenger-chat-bubble-size |
可选 | 64px | 聊天气泡的大小。 |
df-messenger-chat-bubble-background |
可选 | #0b57d0 | 聊天气泡的背景。 |
df-messenger-chat-bubble-border-radius |
可选 | 32px | 聊天气泡的边框半径。 |
df-messenger-chat-bubble-border |
可选 | 无 | 聊天气泡的边框。 |
df-messenger-chat-border-minimized |
可选 | 无 | 最小化形式的对话边框。 |
df-messenger-chat-border-radius-minimized |
可选 | 0 | 最小化形式的对话框的边框半径。 |
标题栏样式
对于标题栏，可以提供以下 CSS 变量：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-titlebar-background |
可选 | #0b57d0 | 标题栏的背景。 |
df-messenger-titlebar-padding |
可选 | 0 15px | 标题栏的内边距。 |
df-messenger-titlebar-border |
可选 | 无 | 标题栏的边框。 |
df-messenger-titlebar-border-bottom |
可选 | 无 | 标题栏的下边框。 |
df-messenger-titlebar-title-align |
可选 | start | 标题栏中标题文本的文本对齐方式。允许的值为 start、center 或 end。 |
df-messenger-titlebar-font-color |
可选 | 白色 | 标题栏中文本的颜色。 |
df-messenger-titlebar-letter-spacing |
可选 | 正常 | 标题栏中文本的字间距。 |
df-messenger-titlebar-title-font-size |
可选 | 18px | 标题栏中标题文本的文字大小。 |
df-messenger-titlebar-title-font-family |
可选 | "Google Sans", "Helvetica Neue", sans-serif | 标题栏中标题文本的字体系列。 |
df-messenger-titlebar-title-font-weight |
可选 | 400 | 标题栏中标题文字的字体粗细。 |
df-messenger-titlebar-title-line-height |
可选 | 正常 | 标题栏中标题文本的行高。 |
df-messenger-titlebar-title-letter-spacing |
可选 | 正常 | 标题栏中标题文本的字间距。 |
df-messenger-titlebar-subtitle-font-color |
可选 | 白色 | 标题栏中副标题文本的文字颜色。 |
df-messenger-titlebar-subtitle-font-size |
可选 | 18px | 标题栏中副标题文本的文字大小。 |
df-messenger-titlebar-subtitle-font-family |
可选 | "Google Sans", "Helvetica Neue", sans-serif | 标题栏中副标题文本的字体系列。 |
df-messenger-titlebar-subtitle-font-weight |
可选 | 400 | 标题栏中副标题文字的字体粗细。 |
df-messenger-titlebar-subtitle-line-height |
可选 | 正常 | 标题栏中副标题文本的行高。 |
df-messenger-titlebar-subtitle-letter-spacing |
可选 | 正常 | 标题栏中副标题文本的字间距。 |
df-messenger-titlebar-title-order |
可选 | 行 | 标题栏中的元素顺序。允许的值为 row 或 row-reverse。仅当指定了 chat-title-icon 属性时，此值才有效。 |
df-messenger-titlebar-icon-width |
可选 | 18px | 标题栏中图标的宽度。仅当指定了 chat-title-icon 时，系统才会应用此值。 |
df-messenger-titlebar-icon-height |
可选 | 18px | 标题栏中图标的高度。仅当指定了 chat-title-icon 时，系统才会应用此值。 |
df-messenger-titlebar-icon-padding |
可选 | 0 12px 0 0 | 标题栏中图标周围的内边距。仅当指定了 chat-title-icon 时，系统才会应用此值。 |
聊天窗口的样式
对于对话窗口，可以提供以下 CSS 变量：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-chat-background |
可选 | #fafafa | 显示消息的代理对话框的背景。 |
df-messenger-chat-padding |
可选 | 10px | 显示消息的代理对话框的内边距。 |
df-messenger-messagelist-border |
可选 | 无 | 消息列表的边框。 |
df-messenger-message-border |
可选 | 无 | 智能体对话框消息的边框。 |
df-messenger-message-font-size |
可选 | 14px | 客服人员对话消息的文字大小。 |
df-messenger-message-font-family |
可选 | "Google Sans", "Helvetica Neue", sans-serif | 代理对话框消息的字体系列。 |
df-messenger-message-font-weight |
可选 | 正常 | 代理对话消息的字体粗细。 |
df-messenger-message-bot-background |
可选 | #ecf3fe | 代理发送的消息的背景。 |
df-messenger-message-bot-border |
可选 | 无 | 代理发送的消息的边框。 |
df-messenger-message-bot-font-color |
可选 | #1f1f1f | 代理发送的消息的文字颜色。 |
df-messenger-message-bot-font-weight |
可选 | 正常 | 客服人员发送的消息的字体粗细。 |
df-messenger-message-user-background |
可选 | #e1e3e1 | 用户发送的消息的背景。 |
df-messenger-message-user-border |
可选 | 无 | 用户发送的消息的边框。 |
df-messenger-message-user-font-color |
可选 | #1f1f1f | 用户发送的消息的文字颜色。 |
df-messenger-message-user-font-weight |
可选 | 正常 | 用户发送的消息的字体粗细。 |
df-messenger-message-spacing |
可选 | 10px | 两条消息之间的间距。 |
df-messenger-message-border-radius |
可选 | 8px | 消息的边框半径，适用于所有边角。 |
df-messenger-message-bot-border-top-left-radius |
可选 | 8px | 代理消息的左上角边框半径，会覆盖通用半径。仅适用于堆叠中的第一条消息。 |
df-messenger-message-bot-border-top-right-radius |
可选 | 8px | 代理消息的右上角边框半径，会覆盖通用半径。仅适用于堆叠中的第一条消息。 |
df-messenger-message-bot-border-bottom-left-radius |
可选 | 8px | 代理消息的左下角边框半径，会覆盖通用半径。仅适用于堆叠中的最后一条消息。 |
df-messenger-message-bot-border-bottom-right-radius |
可选 | 8px | 代理消息的右下角边框半径，会覆盖通用半径。仅适用于堆叠中的最后一条消息。 |
df-messenger-message-user-border-top-left-radius |
可选 | 8px | 用户消息的左上角边框半径，会覆盖通用半径。仅适用于堆叠中的第一条消息。 |
df-messenger-message-user-border-top-right-radius |
可选 | 8px | 用户消息的右上角边框半径，会覆盖通用半径。仅适用于堆叠中的第一条消息。 |
df-messenger-message-user-border-bottom-left-radius |
可选 | 8px | 用户消息的左下角边框半径，会覆盖通用半径。仅适用于堆叠中的最后一条消息。 |
df-messenger-message-user-border-bottom-right-radius |
可选 | 8px | 用户消息的右下角边框半径，会覆盖通用半径。仅在设置了 user-actor-image 的情况下有效。仅适用于堆叠中的最后一条消息。 |
df-messenger-message-stack-spacing |
可选 | 10px | 两条连续消息之间的间距。 |
df-messenger-message-bot-stack-border-top-left-radius |
可选 | 8px | 连续代理消息的左上角边框半径，会覆盖代理左上角半径。仅在设置了 bot-actor-image 的情况下有效。仅适用于堆叠中的第一条消息。 |
df-messenger-message-bot-stack-border-top-right-radius |
可选 | 8px | 连续代理消息的右上角边框半径，会覆盖代理右上角半径。仅在设置了 bot-actor-image 的情况下有效。仅适用于堆叠中的第一条消息。 |
df-messenger-message-bot-stack-border-bottom-left-radius |
可选 | 8px | 连续代理消息的左下角边框半径，会覆盖代理左下角半径。仅在设置了 bot-actor-image 的情况下有效。仅适用于堆叠中的最后一条消息。 |
df-messenger-message-bot-stack-border-bottom-right-radius |
可选 | 8px | 连续代理消息的右下角边框半径，会覆盖代理右下角半径。仅在设置了 bot-actor-image 的情况下有效。仅适用于堆叠中的最后一条消息。 |
df-messenger-message-user-stack-border-top-left-radius |
可选 | 8px | 连续用户消息的左上角边框半径，会覆盖用户左上角半径。仅在设置了 user-actor-image 的情况下有效。 |
df-messenger-message-user-stack-border-top-right-radius |
可选 | 8px | 连续用户消息的右上角边框半径，会覆盖用户右上角半径。仅在设置了 user-actor-image 的情况下有效。仅适用于堆叠中的第一条消息。 |
df-messenger-message-user-stack-border-bottom-left-radius |
可选 | 8px | 连续用户消息的左下角边框半径，会覆盖用户左下角半径。仅在设置了 user-actor-image 的情况下有效。仅适用于堆叠中的最后一条消息。 |
df-messenger-message-user-stack-border-bottom-right-radius |
可选 | 8px | 连续用户消息的右下角边框半径，会覆盖用户右下角半径。仅在设置了 user-actor-image 的情况下有效。仅适用于堆叠中的最后一条消息。 |
df-messenger-message-user-writing-image-width |
可选 | 24px | 代理正在撰写时显示的图片的宽度，仅在设置了 bot-writing-image 时有效。 |
df-messenger-message-bot-writing-image-height |
可选 | 24px | 代理正在撰写时显示的图片的高度，仅在设置了 bot-writing-image 时有效。 |
df-messenger-message-bot-writing-font-color |
可选 | #1f1f1f | 代理正在撰写时显示的文本的颜色。 |
df-messenger-message-bot-writing-font-weight |
可选 | 正常 | 代理正在撰写时显示的文本的字体粗细。 |
df-messenger-message-bot-writing-font-size |
可选 | 14px | 代理撰写内容时显示的文字的大小。 |
df-messenger-message-bot-writing-border |
可选 | 无 | 智能体撰写消息时显示的消息边框。 |
df-messenger-message-bot-writing-background |
可选 | #ecf3fe | 智能体撰写消息时显示的消息背景。 |
df-messenger-message-bot-writing-padding |
可选 | 12px | 代理撰写消息时显示的消息内边距。 |
df-messenger-message-bot-writing-spacing |
可选 | 10px | 代理正在撰写消息时显示的消息与上一条消息之间的间距。 |
df-messenger-message-bot-writing-border-radius |
可选 | 8px | 智能体撰写消息时显示的消息边框半径。 |
df-messenger-chat-scroll-button-align |
可选 | center | “跳转到底部”按钮的对齐方式。允许的值包括 flex-start、center 和 flex-end。 |
df-messenger-chat-scroll-button-container-padding |
可选 | 8px | “跳转到底部”按钮周围容器的内边距。 |
df-messenger-chat-scroll-button-text-display |
可选 | 内嵌 | “跳转到底部”按钮中图标旁边的文本显示，使用 none 可隐藏文本。 |
df-messenger-chat-scroll-button-font-size |
可选 | 14px | “跳至底部”按钮的文字大小。 |
df-messenger-chat-scroll-button-font-color |
可选 | 白色 | “跳转到底部”按钮的文字颜色。 |
df-messenger-chat-scroll-button-background |
可选 | #0b57d0 | “跳至底部”按钮的背景。 |
df-messenger-chat-scroll-button-border-radius |
可选 | 999px | “跳至底部”按钮的边框半径。 |
df-messenger-chat-messagelist-scroll-shadow-background |
可选 | radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), transparent) bottom |
当消息列表未滚动到底部时，在列表底部显示的阴影，设置为 none 可停用。 |
演员图片样式
角色图片会显示在机器人或用户的消息旁边。您可以提供以下 CSS 变量来自定义参与者图片的显示效果：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-message-actor-spacing |
可选 | 16px | 演员图片与消息之间的距离。 |
df-messenger-message-bot-actor-order |
可选 | 行 | 演员图片和消息的顺序。使用 row 可将演员图片放在左侧，消息放在右侧；使用 row-reverse 可将演员图片放在右侧，消息放在左侧。仅当设置了 bot-actor-image 属性时，才会使用此标志。 |
df-messenger-message-user-actor-order |
可选 | 行反向 | 演员图片和消息的顺序。使用 row-reverse 可将演员图片放在右侧，消息放在左侧；使用 row 可将演员图片放在左侧，消息放在右侧。仅当设置了 user-actor-image 属性时，才会使用此标志。 |
df-messenger-message-actor-direction |
可选 | 列 | 应与 df-messenger-message-bot-actor-order 和 df-messenger-message-user-actor-order 相反，如果这些是基于 row 的，则使用 column；如果它们是基于 column 的，则使用 row。 |
df-messenger-message-actor-align |
可选 | flex-start | 行为者与消息的关系。使用 flex-start 可将演员图片置于顶部，使用 center 可将演员图片置于中间，使用 flex-end 可将演员图片置于底部。仅当设置了 bot-actor-image 或 user-actor-image 属性时，才会使用此标志。 |
df-messenger-message-actor-border-radius |
可选 | 999px | 执行者图片的边框半径。 |
df-messenger-message-actor-padding |
可选 | 8px | 演员图片的内边距。 |
df-messenger-message-actor-image-size |
可选 | 24px | 演员图片的大小。 |
df-messenger-message-bot-actor-background |
可选 | 白色 | 代理角色图片的背景。 |
df-messenger-message-bot-actor-border |
可选 | 无 | 代理的头像图片边框。 |
df-messenger-message-bot-actor-offset |
可选 | 0 | 用于移动代理角色图片的偏移量。 |
df-messenger-message-user-actor-background |
可选 | 白色 | 用户角色图片的背景。 |
df-messenger-message-user-actor-border |
可选 | 无 | 用户角色图片的边框。 |
df-messenger-message-user-actor-offset |
可选 | 0 | 用于移动用户角色图片的偏移量。 |
用户输入的样式
您可以为用户输入提供以下 CSS 变量：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-send-icon-color |
可选 | #0b57d0 | 用户输入中“发送”图标的颜色。 |
df-messenger-send-icon-color-hover |
可选 | #0b57d0 | 用户输入中“发送”图标在悬停时的颜色。 |
df-messenger-send-icon-color-active |
可选 | #0b57d0 | 当可以发送文本时，用户输入中“发送”图标的颜色。 |
df-messenger-send-icon-offset-x |
可选 | 0 | 用户输入中“发送”图标的水平偏移量。 |
df-messenger-send-icon-offset-y |
可选 | -4px | 用户输入中“发送”图标的垂直偏移量。 |
df-messenger-input-background |
可选 | 白色 | 用户输入的背景。 |
df-messenger-input-padding |
可选 | 8px | 用户输入字段（包括“发送消息”按钮）与容器之间的整体内边距。 |
df-messenger-input-inner-padding |
可选 | 0px 48px 0px 0 | 用户输入字段（不包括“发送消息”按钮）与容器之间的内部内边距。 |
df-messenger-input-border |
可选 | 无 | 用户输入的边框。 |
df-messenger-input-border-top |
可选 | 1px solid #e0e0e0 | 用户输入的上边框。 |
df-messenger-input-border-bottom |
可选 | 无 | 用户输入文本字段的下边框。 |
df-messenger-input-font-family |
可选 | "Google Sans", "Helvetica Neue", sans-serif | 用户输入的字体系列。 |
df-messenger-input-font-color |
可选 | #1f1f1f | 用户输入的文字颜色。 |
df-messenger-input-font-size |
可选 | 14px | 用户输入的文字大小。 |
df-messenger-input-font-weight |
可选 | 正常 | 用户输入的字体粗细。 |
df-messenger-input-box-border |
可选 | 无 | 用户输入框的边框。 |
df-messenger-input-box-focus-border |
可选 | 无 | 用户输入框获得焦点时的边框。 |
df-messenger-input-box-border-radius |
可选 | 0 | 用户输入框的边框半径。 |
df-messenger-input-box-padding |
可选 | 12px 0 | 用户输入框的内边距。 |
df-messenger-input-box-focus-padding |
可选 | 12px 0 | 用户输入框获得焦点时的内边距。 |
df-messenger-input-gutter |
可选 | 稳定版 | 用户输入的滚动条边距。 |
df-messenger-input-info-font-size |
可选 | 14px | 用户输入中信息性消息的文本大小。 |
df-messenger-input-info-font-weight |
可选 | 正常 | 用户输入中信息性消息的字体粗细。 |
df-messenger-input-info-padding |
可选 | 14px 16px | 用户输入中信息性消息的内边距。 |
df-messenger-input-info-line-height |
可选 | 20px | 用户输入中参考性消息的行高。 |
df-messenger-input-long-text-warning-display |
可选 | 无 | 如果设置为 block，则当输入内容超过 256 个字符时，系统会显示警告消息。仅在 max-query-length 属性较高（例如，已停用）时有效。其他文档。 |
df-messenger-input-warning-background |
可选 | #fef7e0 | 用户输入中警告消息的背景。 |
df-messenger-input-warning-color |
可选 | #410e0b | 用户输入中警告消息的文字颜色。 |
df-messenger-input-warning-icon-color |
可选 | #e37400 | 用户输入中警告消息内的图标颜色。 |
df-messenger-input-error-background |
可选 | #f9dedc | 用户输入中的出错提示的背景。 |
df-messenger-input-error-color |
可选 | #410e0b | 用户输入中的出错提示的文本颜色。 |
df-messenger-input-error-icon-color |
可选 | #b3261e | 用户输入中警告消息内的图标颜色。 |
身份验证叠加层的样式
使用经过身份验证的设置时，您可以为叠加层提供以下 CSS 变量：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-auth-background |
可选 | rgba(204, 204, 204, .8) |
显示身份验证时代理对话框的背景。 |
df-messenger-auth-button-background |
可选 | #0b57d0 | 身份验证按钮的背景。 |
df-messenger-auth-button-font-family |
可选 | "Google Sans", "Helvetica Neue", sans-serif | 身份验证按钮的字体系列。 |
df-messenger-auth-button-font-color |
可选 | 白色 | 身份验证按钮的文字颜色。 |
df-messenger-auth-button-font-size |
可选 | 14px | 身份验证按钮的文字大小。 |
df-messenger-auth-button-border |
可选 | 无 | 身份验证按钮的边框。 |
df-messenger-auth-button-border-radius |
可选 | 8px | 身份验证按钮的边框半径。 |
反馈样式
启用回答反馈功能后，您可以为反馈控件提供以下 CSS 变量。
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-message-feedback-icon-distance |
可选 | 8px | “我喜欢”和“不喜欢”按钮之间的距离。 |
df-messenger-message-feedback-icon-font-color |
可选 | #444746 | “我喜欢”和“不喜欢”按钮的颜色。 |
df-messenger-message-feedback-icon-font-color-active |
可选 | #444746 | “我喜欢”和“不喜欢”按钮处于启用状态时的颜色。 |
df-messenger-message-feedback-icon-border |
可选 | 无 | “我喜欢”和“不喜欢”按钮的边框。 |
df-messenger-message-feedback-icon-border-radius |
可选 | 0 | “赞”和“不喜欢”按钮的边框半径。 |
df-messenger-message-feedback-icon-background |
可选 | 无 | “我喜欢”和“不喜欢”按钮的背景。 |
df-messenger-message-feedback-icon-background-hover |
可选 | 无 | 悬停光标时“我喜欢”和“不喜欢”按钮的背景。 |
df-messenger-message-feedback-icon-padding |
可选 | 0 | “我喜欢”和“不喜欢”按钮的内边距。 |
df-messenger-message-rich-feedback-spacing |
可选 | 10px | 富媒体反馈中元素之间的间距。 |
df-messenger-message-rich-feedback-padding |
可选 | 0 | 丰富反馈的内边距。 |
df-messenger-message-rich-feedback-background |
可选 | 无 | 丰富反馈的背景。 |
df-messenger-message-rich-feedback-border-radius |
可选 | 0 | 富媒体反馈的边框半径。 |
df-messenger-message-rich-feedback-border |
可选 | 无 | 丰富反馈的边框。 |
df-messenger-rich-feedback-offset-left |
可选 | 0 | 左侧丰富反馈的偏移量。 |