您可以通过设置 CSS 变量来自定义聊天对话框的样式。
常规样式
以下 CSS 变量提供常规样式选项：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-font-family |
可选 | “Google Sans”“Helvetica Neue”无衬线 | 要在整个 widget 中使用的字体系列 |
df-messenger-font-size |
可选 | 14px | 要在整个微件中使用的文字大小 |
df-messenger-font-color |
可选 | #1f1f1f | 要在整个微件中使用的文字颜色 |
df-messenger-primary-color |
可选 | #0b57d0 | 整个 widget 中元素的基色（例如标题栏背景、操作按钮背景等） |
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 |
可选 | 480 像素 | 聊天窗口的高度 |
df-messenger-chat-window-width |
可选 | 320 像素 | 聊天窗口的宽度 |
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 |
可选 | -90 度 | 聊天气泡的关闭图标的旋转角度，在关闭聊天时旋转到 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”无衬线 | 标题栏中标题文本的字体系列 |
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”无衬线 | 标题栏中副标题文本的字体系列 |
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”无衬线 | 代理对话消息的字体系列 |
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 | 用户消息的右下角边框半径，会替换通用半径 |
df-messenger-message-stack-spacing |
可选 | 10px | 两条连续消息之间的间距 |
df-messenger-message-bot-stack-border-top-left-radius |
可选 | 8px | 连续代理消息的左上角边框半径，会替换代理左上角半径 |
df-messenger-message-bot-stack-border-top-right-radius |
可选 | 8px | 连续代理消息的右上角边框半径，会替换代理右上角半径 |
df-messenger-message-bot-stack-border-bottom-left-radius |
可选 | 8px | 连续代理消息的左下角边框半径，会替换代理左下角半径 |
df-messenger-message-bot-stack-border-bottom-right-radius |
可选 | 8px | 连续代理消息的右下角边框半径，会替换代理右下角半径 |
df-messenger-message-user-stack-border-top-left-radius |
可选 | 8px | 连续用户消息的左上角边框半径，会替换用户左上角半径 |
df-messenger-message-user-stack-border-top-right-radius |
可选 | 8px | 连续用户消息的右上角边框半径，会覆盖用户右上角半径 |
df-messenger-message-user-stack-border-bottom-left-radius |
可选 | 8px | 连续用户消息的左下角边框半径，会替换用户左下角半径 |
df-messenger-message-user-stack-border-bottom-right-radius |
可选 | 8px | 连续用户消息的右下角边框半径，会覆盖用户右下角半径 |
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-chat-scroll-button-enabled-display |
可选 | 无 | 定义“跳转到底部”按钮的显示，设置为 flex 可启用该按钮 |
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 |
可选 | 999 像素 | “跳转到底部”按钮的边框半径 |
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 可将演员图片放在右侧，消息放在左侧。 |
df-messenger-message-user-actor-order |
可选 | row-reverse | 演员图片和消息的顺序。使用 row-reverse 可将演员图片放在右侧，将消息放在左侧；使用 row 可将演员图片放在左侧，将消息放在右侧。 |
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 可将演员图片放在底部。 |
df-messenger-message-actor-border-radius |
可选 | 999 像素 | 执行者图片的边框半径 |
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 |
可选 | 0 像素 48 像素 0 像素 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”无衬线 | 用户输入的字体系列 |
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”无衬线 | 身份验证按钮的字体系列 |
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 | 左侧的偏移量 |