小组件外观自定义
小组件外观自定义
Section titled “小组件外观自定义”个性化您的聊天小组件外观，使其与您的品牌形象和网站设计相匹配。
所有小组件自定义选项均可在 设置 → 渠道 → 网页 中找到。选择您的网页渠道并打开 外观 选项卡。
主题颜色将统一应用于整个小组件的以下元素：
- 启动按钮背景
- 标题栏背景
- 发送按钮颜色
- 链接高亮颜色
- 用户消息气泡背景
请选择与您品牌形象相符、并能与白色文字形成良好对比的颜色。
欢迎消息是客户打开小组件时看到的第一段文字。请保持友好的语气，并清晰说明机器人能够提供哪些帮助。
示例：
- “您好！今天有什么可以帮助您的？”
- “欢迎使用 Acme 支持服务。您可以询问我们的产品和服务相关问题。”
- “您好！我在这里为您提供帮助，请问有什么需要？“
| 位置 | 设置值 | 使用场景 |
|---|---|---|
| 右下角 | bottom-right (默认) | 标准位置，适用于大多数网站 |
| 左下角 | bottom-left | 当右侧与其他元素冲突时使用 |
v1.6.4
通过提供图片 URL，在小组件标题栏和主屏幕上显示自定义头像。
通过仪表板设置： 在 设置 → 渠道 → 网页 → 自定义器 → 头像 URL 中填写头像 URL。
通过嵌入代码设置： 在主题配置中传入 avatarUrl：
<script> window.ClientaConfig = { botId: "YOUR_BOT_ID", widgetId: "YOUR_WIDGET_ID", theme: { avatarUrl: "https://example.com/your-logo.png" } };</script>要求：
- 必须使用
https://开头的 URL（出于安全原因，http、data: 和 javascript: 类型的 URL 将被拒绝） - 推荐尺寸： 128 × 128 像素（正方形）
- 支持格式： PNG、JPG、WebP、SVG
- 如果 URL 无效或图片加载失败，将显示默认图标
v1.6.2
问候消息支持三种语言模式。前往 设置 → 渠道 → 网页 → 自定义器，找到 问候语模式 部分进行配置。
无论访客使用何种语言，均显示相同的问候语文字。这是默认模式。
在文本框中输入一条问候语，例如：“您好！今天有什么可以帮助您的？“
匹配访客语言（locale）
Section titled “匹配访客语言（locale）”为每种语言显示不同的问候语。小组件会读取访客检测到的语言，并显示对应的问候语。
- 选择 匹配访客语言 模式。
- 系统会为 15 种支持的语言各显示一个输入框。
- 为您希望支持的每种语言填写问候语文字。
- 将某个语言的输入框留空，则该语言将回退到静态模式的问候语。
示例配置：
- 泰语：“สวัสดีค่ะ! มีอะไรให้ช่วยไหม?”
- 英语：“Hi! How can I help you today?”
- 日语：“こんにちは！何かお手伝いできますか？“
组织主语言模式
Section titled “组织主语言模式”无论访客使用何种语言，问候语始终以组织的主要回复语言显示。此模式读取在 AI 设置 → 主要回复语言 中设置的语言。
当您的团队仅使用一种语言运营，且希望所有问候语保持一致时，请使用此模式。
v1.6.2
语言选择器会在小组件标题栏中添加一个地球图标（🌐），让访客可以主动选择自己的语言。该功能默认关闭。
启用方法： 在 设置 → 渠道 → 网页 → 自定义器 中，将 显示语言选择器 切换为开启。
当访客从下拉菜单中选择语言后：
- 本次会话中所有 AI 回复将锁定为该语言
- 即使访客改用其他语言输入，该锁定也会覆盖自动检测结果
- 小组件界面将切换为所选语言
完整行为说明请参阅 网页小组件 — 语言选择器。
v1.6.8
为小组件设置默认语言，使访客在自动检测生效之前即可看到您偏好语言的界面。前往 设置 → 渠道 → 网页 → 自定义器 → 默认语言，从下拉菜单中进行选择。
语言优先级链如下：
- 强制使用此语言（AI 设置）— 开启后将覆盖所有其他设置
- 访客主动选择的语言（通过语言选择器，如已启用）
- 默认语言 — 即本设置
- 嵌入配置中的 locale — 嵌入代码中的
locale值 - 泰语 — 当以上均未设置时的兜底语言
选择 “无 — 跟随嵌入配置” 可跳过此设置，直接使用嵌入代码中的 locale 值。
深色模式与 CSS 变量
Section titled “深色模式与 CSS 变量”小组件支持内置深色模式切换，访客可在聊天标题栏中激活。整个小组件界面均通过 CSS 自定义属性进行主题化处理，确保在两种模式下外观保持一致。
关键 CSS 变量
Section titled “关键 CSS 变量”| 变量 | 说明 |
|---|---|
--cw-primary | 主品牌颜色（来自您的主题颜色设置） |
--cw-primary-rgb | 主颜色的 RGB 分量，用于透明度效果 |
--cw-bg | 小组件背景颜色 |
--cw-bg-secondary | 次级背景颜色（输入框、表单元素） |
--cw-surface | 卡片、工具提示、引用片段的表面颜色 |
--cw-text | 主文字颜色 |
--cw-text-secondary | 次级/次要文字颜色 |
--cw-border | 分隔线和输入框边框的颜色 |
切换深色模式时，小组件会在根容器上应用 cw-dark 或 cw-light 类，所有 CSS 变量将自动更新。渐变标题栏、消息气泡、联系表单和引用标签均会响应当前模式。
完成更改后，使用设置页面右侧的 实时预览 面板，在保存之前查看小组件在您网站上的实际显示效果。