您可以通过设置 CSS 变量来自定义聊天对话框的样式。
常规样式
以下 CSS 变量提供常规样式选项：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-font-family |
可选 | “Google Sans”“Helvetica Neue”，无衬线字体 | 要在整个微件中使用的字体系列 |
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 |
可选 | 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 可将演员图片放在右侧，将消息放在左侧。 |
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 |
可选 | 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”，无衬线字体 | 用户输入的字体系列 |
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 | 左侧的偏移 |