跳转到内容
Clienta.ai

网页小组件

网页小组件

Section titled “网页小组件”

网页小组件可让您将由 AI 机器人驱动的实时聊天窗口直接嵌入任何网站。根据您的品牌进行自定义，并在几分钟内完成部署。

小组件设置与实时预览

安装

Section titled “安装”

  1. 在左侧菜单中前往 频道 → 网页小组件。

  2. 点击 创建小组件 并为其命名。

  3. 配置小组件设置（请参阅下方的自定义选项）。

  4. 复制提供的嵌入代码片段。

  5. 将代码片段粘贴到您网站的 HTML 中，紧贴在 </body> 标签之前。

  6. 保存并发布您的网站——小组件将立即显示。

嵌入代码

Section titled “嵌入代码”
<!-- 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 替换为您控制台中显示的对应值。

自定义选项

Section titled “自定义选项”
选项说明
主题颜色设置与您品牌匹配的主色调（十六进制代码或颜色选择器）
欢迎消息用户打开小组件时显示的第一条消息
位置选择在屏幕右下角或左下角显示
头像为机器人上传自定义头像图片

其他选项包括：

  • 小组件标题 — 显示在小组件标题栏中的名称
  • 占位符文本 — 消息输入框内的提示文字
  • 自动弹出延迟 — 在 N 秒后自动打开小组件（可选）
  • 在移动端隐藏 — 切换小组件在移动设备上的显示状态

工作原理

Section titled “工作原理”

  1. 用户打开小组件 — 聊天窗口从页面角落滑出。

  2. 消息发送至机器人 — 用户的消息通过安全的 WebSocket 连接发送至 Clienta.ai。

  3. AI 处理并回复 — 机器人从知识库中检索相关内容并生成回复。

  4. 必要时转接人工 — 如果置信度较低或用户请求人工服务，对话将通过 对话 收件箱路由至可用的客服人员。

联系表单

Section titled “联系表单”
v1.6.8

当 AI 机器人离线或无法响应时，小组件会显示一个 CTA 气泡，提示访客留下联系方式。点击气泡将打开联系表单：

字段是否必填备注
邮箱是后续跟进时始终需要
电话否包含国家代码选择器（+66、+1、+81、+86）
姓名否访客姓名
留言否补充说明

联系表单提交后将在管理员 工单 页面创建一条工单，同时显示所提供的邮箱和电话信息。

解决后发起新对话

Section titled “解决后发起新对话”
v1.6.8

当客服人员解决对话后，小组件会显示一条系统通知和一个 “发起新对话” 按钮。点击后将：

  1. 清除当前对话历史记录
  2. 重新建立全新的 WebSocket 会话
  3. 将小组件恢复至初始状态

这样访客无需刷新页面即可开始新的对话。

WebSocket 实时通信

Section titled “WebSocket 实时通信”

小组件使用持久的 WebSocket 连接实现实时低延迟消息传递。主要行为包括：

  • 自动重连 — 连接断开后客户端会自动重新连接。
  • 正在输入指示 — 机器人生成回复时显示输入动画。
  • 客服输入指示 — v1.6.8 当人工客服正在输入回复时，小组件会实时向访客显示输入动画。
  • 消息历史 — 对话历史在同一浏览器会话中保持保存状态。
  • 跨标签页同步 — 如果用户打开了多个标签页，对话状态会同步。

Markdown 回复渲染

Section titled “Markdown 回复渲染”
v1.6.4

AI 和客服消息将以 格式化 Markdown 而非纯文本方式渲染。支持的格式包括：

  • 粗体、斜体、删除线
  • 链接（自动在新标签页中打开）
  • 行内 代码 和围栏代码块
  • 有序和无序列表
  • 标题、引用块和表格

所有 Markdown 内容均通过严格的白名单进行过滤，以防止 XSS 攻击。无需任何配置——Markdown 渲染对所有 AI 和客服回复默认启用。用户消息保持纯文本显示。

品牌头像

Section titled “品牌头像”
v1.6.4

在小组件标题栏和主页屏幕中显示您的品牌 Logo 或自定义头像。在 设置 → 频道 → 网页 → 自定义工具 中设置 avatarUrl，或在嵌入代码中通过 config.theme.avatarUrl 传入。

  • 仅接受 https:// 协议的 URL
  • 如果 URL 无效或图片加载失败，将显示默认的闪光图标
  • 建议使用正方形图片（例如 128 × 128 像素）以获得最佳效果

详情请参阅 小组件自定义——头像。

AI 与人工标签

Section titled “AI 与人工标签”
v1.6.4

每条非用户消息都会显示一个小型作者标签，用于标识发送者：

作者类型显示标签
AI 机器人”AI 助手”（已本地化）
人工客服客服姓名（例如 “Sarah”）

标签已针对全部 15 种支持语言进行本地化，并支持屏幕阅读器访问。这有助于访客清晰区分 AI 生成的回复和人工回复，符合透明度最佳实践。

问候语语言

Section titled “问候语语言”
v1.6.2

小组件问候语消息支持三种语言模式，可在 设置 → 频道 → 网页 → 自定义工具 → 问候语模式 中配置：

模式行为
静态无论访客使用何种语言，均显示相同的问候语
匹配访客显示按语言定制的问候语——为全部 15 种语言区域各自配置不同的问候语文本
组织主语言始终以组织的主要回复语言显示问候语（在 AI 设置 中设置）

在 匹配访客 模式下，未配置问候语的语言区域将回退至静态问候语文本。

分步配置说明请参阅 小组件自定义——问候语模式。

语言选择器

Section titled “语言选择器”
v1.6.2

小组件语言选择器

小组件可在标题栏中显示一个地球图标，让访客明确选择其偏好语言。此功能默认禁用，需在 设置 → 频道 → 网页 → 自定义工具 中逐个小组件手动启用。

启用后：

  • 小组件标题栏中将出现地球（🌐）图标
  • 访客可从最多 15 种支持的语言区域中进行选择
  • 选择语言后将在本次会话中锁定所有 AI 回复使用该语言，覆盖自动检测结果
  • 即使访客使用其他语言输入，语言锁定仍然保持

RTL（从右到左）支持

Section titled “RTL（从右到左）支持”
v1.6.2

RTL 布局预览

小组件和落地页完全支持阿拉伯语和希伯来语的 RTL 布局。当访客使用 RTL 语言区域时：

  • 整体布局将镜像翻转（文本对齐、导航、UI 元素）
  • <html dir="rtl"> 属性自动设置
  • 聊天消息和输入框将正确对齐以适应 RTL 阅读方式

无需手动配置——RTL 根据所选语言区域自动激活。

挂载超时回退

Section titled “挂载超时回退”
v1.6.5

如果小组件脚本（widget.js）在 10 秒内加载失败，嵌入区域将显示一个回退 UI，而非留下空白区域。回退界面包含一个重试按钮，访客无需刷新页面即可尝试重新加载小组件。

这能在网络问题、广告拦截器或 CDN 故障导致小组件无法加载时，有效保护用户体验。

各方案频道数量限制

Section titled “各方案频道数量限制”
方案最大频道数
免费版1
入门版2
成长版5
增强版6
专业版15
规模版30
企业版50