网页小组件
网页小组件让您可以将由 AI 机器人驱动的实时聊天窗口直接嵌入任意网站。按照您的品牌风格进行自定义，几分钟内即可完成部署。
-
在左侧菜单中前往 渠道 → 网页小组件。
-
点击 创建小组件 并为其命名。
-
配置小组件设置（参见下方的自定义部分）。
-
复制提供的嵌入代码片段。
-
将代码片段粘贴到您网站的 HTML 中，紧靠在
</body>标签之前。 -
保存并发布您的网站——小组件将立即显示。
<!-- Clienta.ai Web Widget --><script> window.ClientaConfig = { botId: "YOUR_BOT_ID", widgetId: "YOUR_WIDGET_ID", };</script><script src="https://api.clienta.ai/widget/YOUR_WIDGET_ID/loader.js" async></script>将 YOUR_BOT_ID 和 YOUR_WIDGET_ID 替换为仪表板中显示的值。
| 选项 | 说明 |
|---|---|
| 主题颜色 | 设置与您品牌相匹配的主色调（十六进制代码或颜色选择器） |
| 欢迎消息 | 用户打开小组件时显示的第一条消息 |
| 位置 | 选择在屏幕右下角或左下角显示 |
| 头像 | 为机器人上传自定义头像图片 |
其他选项包括：
- 小组件标题 — 显示在小组件标题栏中的名称
- 占位文本 — 消息输入框内的提示文字
- 自动弹出延迟 — 在 N 秒后自动打开小组件（可选）
- 移动端隐藏 — 切换小组件在移动设备上的可见性
-
用户打开小组件 — 聊天窗口从页面角落滑出。
-
消息发送至机器人 — 用户的消息通过安全的 WebSocket 连接发送至 Clienta.ai。
-
AI 处理并响应 — 机器人从知识库中检索相关内容并生成回复。
-
如需转接人工 — 若置信度较低或用户请求人工服务，对话将通过对话收件箱路由至可用的客服人员。
当 AI 机器人离线或无法响应时，小组件会显示一个 CTA 气泡，提示访客留下联系方式。点击气泡将打开联系表单：
| 字段 | 必填 | 备注 |
|---|---|---|
| 邮箱 | 是 | 跟进联系必填 |
| 电话 | 否 | 包含支持 37 个国家的国家代码选择器及 emoji 国旗（例如 🇹🇭 +66、🇺🇸 +1、🇬🇧 +44、🇯🇵 +81）。服务器端验证确保提交的区号有效。 |
| 姓名 | 否 | 访客姓名 |
| 消息 | 否 | 补充说明 |
提交联系表单后，将在管理员的工单页面生成一张工单，同时显示邮箱和电话（如已填写）。
解决后发起新对话
Section titled “解决后发起新对话”当客服人员解决对话后，小组件会显示系统通知和**“开始新对话”**按钮。点击该按钮将：
- 清除当前对话历史
- 重新建立全新的 WebSocket 会话
- 将小组件恢复至初始状态
这让访客无需刷新页面即可开始新的对话。
WebSocket 实时通信
Section titled “WebSocket 实时通信”小组件使用持久的 WebSocket 连接实现实时低延迟消息传输。主要行为：
- 自动重连 — 连接断开时客户端自动重新连接。
- 正在输入指示器 — 机器人生成回复时显示正在输入动画。
- 客服输入指示器 — v1.6.8 当人工客服正在输入回复时，小组件会实时向访客显示正在输入动画。
- 消息历史 — 对话历史在同一浏览器会话中保留。
- 跨标签页同步 — 若用户打开多个标签页，对话状态将同步。
Markdown 响应
Section titled “Markdown 响应”AI 和客服消息将渲染为格式化 Markdown，而非纯文本。支持的格式包括：
- 粗体、斜体、
删除线 - 链接（自动在新标签页中打开）
- 行内
代码和围栏代码块 - 有序和无序列表
- 标题、块引用和表格
所有 Markdown 内容均通过严格的许可列表进行清理，以防止 XSS 攻击。无需任何配置——所有 AI 和客服回复默认启用 Markdown 渲染。用户消息保持纯文本格式。
v1.6.4在小组件标题栏和主屏幕上展示您的品牌 Logo 或自定义头像。在设置 → 渠道 → 网页 → 自定义器中设置 avatarUrl，或在嵌入代码中以 config.theme.avatarUrl 的方式传入。
- 仅接受
https://URL - 若 URL 无效或图片加载失败，将显示默认的星光图标
- 建议使用正方形图片（例如 128 × 128 像素）以获得最佳效果
详情请参阅小组件自定义——头像。
AI 与人工标签
Section titled “AI 与人工标签”每条非用户消息都会显示一个小型作者标签以标识发送方：
| 作者类型 | 显示标签 |
|---|---|
| AI 机器人 | ”AI 助手”（已本地化） |
| 人工客服 | 客服姓名（例如”Sarah”） |
标签已在全部 15 种支持的语言中完成本地化，并支持屏幕阅读器。这有助于访客清晰区分 AI 生成的回复与人工回复，符合透明度最佳实践。
v1.6.2小组件问候消息支持三种语言模式，可在设置 → 渠道 → 网页 → 自定义器 → 问候语模式中配置：
| 模式 | 行为 |
|---|---|
| 静态 | 向所有访客显示相同的问候语，不区分语言 |
| 匹配访客 | 显示对应语言的问候语——可为全部 15 种语言区域分别配置不同的问候语文本 |
| 组织主语言 | 始终以组织在 AI 设置 中设定的主要响应语言显示问候语 |
在匹配访客模式下，未配置问候语的语言区域将回退至静态问候语文本。
逐步配置说明请参阅小组件自定义——问候语模式。
v1.6.2
小组件可在标题栏显示一个地球图标，让访客明确选择自己偏好的语言。此功能默认禁用，需在设置 → 渠道 → 网页 → 自定义器中为每个小组件单独启用。
启用后：
- 小组件标题栏出现地球（🌐）图标
- 访客可从最多 15 种支持的语言区域中进行选择
- 选择语言后，本次会话中所有 AI 回复将锁定为该语言，覆盖自动检测
- 即使访客以其他语言输入，锁定状态仍然保持
RTL（从右到左）支持
Section titled “RTL（从右到左）支持”
小组件和落地页完全支持阿拉伯语和希伯来语的 RTL 布局。当访客使用 RTL 语言区域时：
- 整体布局将镜像翻转（文本对齐、导航、UI 元素）
<html dir="rtl">属性自动设置- 聊天消息和输入框正确对齐，符合 RTL 阅读习惯
无需手动配置——RTL 将根据所选语言区域自动激活。
挂载超时回退
Section titled “挂载超时回退”若小组件脚本（widget.js）在 10 秒内加载失败，嵌入区域将显示回退 UI，而非留下空白区域。回退界面包含一个重试按钮，访客无需刷新页面即可尝试重新加载小组件。
这在网络问题、广告拦截器或 CDN 故障导致小组件无法挂载时，有效保障用户体验。
小组件视觉重设计
Section titled “小组件视觉重设计”v1.6.8 对小组件进行了视觉焕新，呈现出现代、精致的外观：
- 渐变标题栏 — 小组件标题栏采用基于主题颜色的细腻渐变，并显示状态点和头像。
- 圆角消息气泡 — 聊天气泡使用更大的圆角半径（
rounded-2xl），外观更为柔和。 - 动画开关 — 小组件通过流畅的 CSS 动画滑入滑出，不再是瞬间出现。
- 重新设计的启动按钮 — 聊天气泡启动按钮为 60px 的圆角方形，带有品牌色调的发光阴影和入场动画。
- 深色模式切换 — 聊天标题栏中的切换按钮允许访客在会话期间随时切换明暗模式。
- 主题聚焦环 — 输入字段显示品牌色调的聚焦环，提升无障碍体验。
- 通知徽章 — 启动气泡上显示未读消息徽章。
这些视觉变化自动生效，无需任何配置更改。
v1.6.5当 AI 机器人使用知识库中的信息进行回复时，消息下方会显示引用标签。每个标签代表一份对答案有贡献的检索文档。
| 行为 | 说明 |
|---|---|
| 标签显示 | 最多显示 3 个文档标题标签。若使用了更多来源，将以”+N 更多”标签提示额外引用。 |
| 点击展开 | 点击标签可切换显示检索内容前 200 个字符的内联摘要。同一时间只能展开一个摘要。 |
| 标题截断 | 过长的文档标题将被截断至 40 个字符，并以省略号表示。 |
| 主题适配 | 标签使用您小组件的主色调作为淡色背景，完整支持深色模式和 RTL。 |
| 无障碍访问 | 标签支持键盘导航，具有正确的 ARIA 标签（aria-expanded）、列表角色和屏幕阅读器支持。 |
引用标签让访客清晰了解机器人答案的来源，增强对 AI 回复的信任。无需任何配置——当 RAG 管道检索到相关文档时，引用将自动显示。
v1.6.8每当有新内容到达时，小组件会自动滚动至最新消息。适用于：
- AI 机器人或人工客服的新消息
- 机器人实时生成回复时的流式内容
滚动使用平滑动画，使过渡感觉自然流畅。无需任何配置——自动滚动始终处于激活状态。
各套餐渠道限制
Section titled “各套餐渠道限制”| 套餐 | 最大渠道数 |
|---|---|
| 免费版 | 1 |
| 入门版 | 2 |
| 成长版 | 5 |
| 增强版 | 6 |
| 专业版 | 15 |
| 规模版 | 30 |
| 企业版 | 50 |