您可以通过设置 CSS 变量来自定义聊天对话框的样式。
常规样式
以下 CSS 变量提供了常规样式选项：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-font-family |
可选 | “Google Sans”“Helvetica Neue”、“sans-serif” | 要在整个 widget 中使用的字体系列 |
df-messenger-font-size |
可选 | 14px | 要在整个 widget 中使用的文本大小 |
df-messenger-font-color |
可选 | #1f1f1f | 要在整个 widget 中使用的文本颜色 |
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-bubble-close-icon-size |
可选 | 24px | 聊天气泡的关闭图标大小 |
df-messenger-chat-collapse-icon-size |
可选 | 未设置 | 标题栏中的收起按钮图标的尺寸 |
df-messenger-chat-bubble-close-icon-transform-rotate |
可选 | -90 度 | 旋转聊天气泡的“关闭”图标，关闭聊天时旋转到 0° |
df-messenger-chat-bubble-size |
可选 | 64px | 聊天气泡的大小 |
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 15 像素 | 标题栏的内边距 |
df-messenger-titlebar-border |
可选 | 无 | 标题栏的边框 |
df-messenger-titlebar-border-bottom |
可选 | 无 | 标题栏的下边框 |
df-messenger-titlebar-title-align |
可选 | 启动 | 标题栏中标题文字的文字对齐方式，允许的值为 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 12 像素 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 | 用户消息的右下角半径，会覆盖一般半径 |
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-message-error-background |
可选 | 黑色 | 代理对话框中显示的错误消息的背景 |
df-messenger-message-error-font-family |
可选 | “Google Sans”“Helvetica Neue”、“sans-serif” | 代理对话框中显示的错误消息的字体系列 |
df-messenger-message-error-font-size |
可选 | 12px | 代理对话框中显示的错误消息的字体大小 |
df-messenger-message-error-font-color |
可选 | 白色 | 代理对话框中显示的错误消息的文字颜色 |
df-messenger-chat-scroll-button-enabled-display |
可选 | 无 | 定义“Jump to Bottom”按钮的显示方式，设置为 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 |
可选 | 径向渐变（最远端为 50% 100%，rgba(0,0,0,.2)，透明）底部 |
未滚动到底部时在消息列表底部显示的阴影，设置为 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 将演员图片置于左侧，消息置于右侧。 |
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 |
可选 | -4 像素 | 用户输入中“发送”图标的水平偏移量 |
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 纯色 #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 |
可选 | 12 像素 0 | 用户输入框的内边距 |
df-messenger-input-box-focus-padding |
可选 | 12 像素 0 | 获得焦点时用户输入框的内边距 |
df-messenger-input-gutter |
可选 | 稳定版 | 用户输入的滚动条边线 |
身份验证叠加层的样式
使用经过身份验证的设置时，可以为叠加层提供以下 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 | 左侧偏移量 |