WhatsApp 网站聊天组件安装指南：配置 AI/WhatsApp 双入口模式、域名白名单与嵌入代码

概览

网站聊天组件（Chatbot Widget）是一段只需一行代码即可添加到任意网站的聊天气泡。访客点击气泡后，可与基于你的内容训练的 AI 助手对话，也可以转接给团队收件箱中的真人客服，或直接进入 WhatsApp。在 More → Chatbot Widgets 下管理组件。

每个组件都可完全自定义（颜色、位置、页眉、欢迎语、背景），适用于任何网站。组件不靠登录，而是用一段长且不可猜解的访问代码保护，因此不仅能用在你的站点，也能安全地运行在客户的网站上。由组件发起的聊天会自动出现在团队收件箱，与 WhatsApp 会话排在一起 — 无需另找地方管理。

与当前通道配合：本平台的 WhatsApp 消息由 WhatsApp 协议连接通道承载：扫码或配对码连接WhatsApp 账号，由自带辅助服务收发。AI 回复来自你在 AI Training 中设置的 AI 助手；「打开 WhatsApp」选项只是打开一个与你号码的聊天窗口，而从收件箱发出的客服回复会通过你的已连接 WhatsApp 号码送回。

组件模式

组件有三种运行模式：

AI 模式需要助手。选择 AI 或 Both 时，必须从工作区中选择一个 AI 助手，否则组件无法保存。请先在 AI Training 中创建一个，再回到这里关联。

创建组件

1. 进入 Chatbot Widgets，点击 Create Widget。
2. 填写名称并选择模式（AI / WhatsApp / Both）。
3. AI 模式选择 AI assistant；WhatsApp 模式设置目标号码（国家区号 + 号码）与可选的预填消息。
4. 设置气泡与面板的样式（见 外观与行为）。
5. 可启用聊天前字段（pre-chat fields） — 在对话开始前收集姓名、邮箱和/或电话。
6. 可限制允许的域名（allowed domains）（见 嵌入代码与允许的域名）。
7. 点击 Save。首次保存时 WAthink 会生成组件的访问代码，并给出可粘贴到网站的嵌入代码以及实时预览链接。

外观与行为

关联 AI 助手

• 助手从哪来。AI 回复由你在 AI Training 中创建并训练（基于你的文档、FAQ 与网页）的 AI 助手生成。组件只允许选择工作区中处于启用状态的助手。
• 回复如何流转。访客发送消息后，WAthink 会保存该消息、向你的助手请求回复、保存回复并显示在气泡中。如果助手出错，访客会看到助手设置的兜底话术（或一句通用的「稍后会有团队成员跟进」），而不会看到聊天中断。
• 切换模式。可把组件从 AI 改为 Both，在 AI 对话旁增加「继续到 WhatsApp」按钮；或改为仅 WhatsApp，完全去掉气泡内的 AI。

嵌入代码与允许的域名

保存后，复制那一行代码，粘贴到任何需要组件的页面的 </body> 闭合标签之前。它会添加悬浮按钮，访客点击后打开聊天面板。来自收件箱的客服回复会自动出现在面板中，访客无需刷新。

<script src="https://your-wathink-domain.com/widget/<your-access-code>/embed.js" async></script>

粘贴位置。放到网站页脚（WordPress：使用「before </body>」片段插件，或主题页脚文件；Shopify：主题的主布局文件、</body> 之前；纯 HTML：页面末尾）。每个站点放一段即可 — 它会在所有页面加载。

允许的域名

组件运行在客户的网站内。允许域名（allowed-domains）列表决定哪些网站可以加载它：

• 空列表（默认）→ 组件可在任意网站运行。访问代码就是入口，限流则防止滥用。
• 非空列表→ 只有列表内的网站被允许；其它网站会被阻止，并在浏览器开发者控制台给出明确提示，告诉你需要添加哪个域名。
• 格式。输入纯域名即可，如 acme.com 或 shop.acme.com — 任何 https:// 前缀与路径都会被自动移除，大小写不敏感，重复项会被忽略。最多可添加 50 个域名。
• 不支持通配符。不能用 *.acme.com 覆盖所有子域名 — 请逐个显式添加，这样像 evil.acme.com 这样的仿冒域名就无法混入。

当某个网站被允许时，访客在页面之间移动时聊天仍保持同一个会话。

提示。配置期间可以先留空列表，等确认实际使用的网站后再收紧。

AI 回复与团队收件箱接管

• 气泡内 AI。在 AI / Both 模式下，助手直接在气泡中作答，对话双方的消息都会保存。
• 转接到 WhatsApp。在 WhatsApp / Both 模式下，按钮会打开与你号码的 WhatsApp 聊天（若设置了预填消息则一并带上）。访客随后在团队收件箱中与你的团队继续对话，其行为与任何其它 WhatsApp 会话一致（分配、备注、响应目标）。
• 客服接管。组件会话会像其它聊天一样出现在收件箱中，客服可随时介入回复；访客无需刷新即可看到客服消息。
• 访客信息采集。若启用了聊天前字段，访客的姓名、邮箱与电话会被记录，并作为上下文展示给客服，让客服立即掌握背景。

访客跟踪与限流

• 回访访客。组件会记住访客（使用与该组件绑定的 cookie），这样访客再次回来时，收件箱中显示的是一条持续会话，而不是每次访问新建一条。某个组件的 cookie 绝不会被用于读取其它组件的会话。
• 记录内容。每位访客会记录唯一 ID、采集到的姓名 / 邮箱 / 电话、来源页面、浏览器、IP 地址，以及首次和最近出现的时间。
• 统计。组件列表会显示每个组件的访客数以及整个工作区的总数，同时显示有多少组件处于启用状态。
• 限流。为防止嵌入代码被复制后遭到滥用，每位访客每分钟最多发送 60 条消息，聊天每分钟最多检查 120 次新回复。正常聊天远低于这些上限。

管理组件

• 重置访问代码（Reset access code）：如果嵌入代码被复制或出现在错误的网站上，可重置访问代码 — 旧代码立即失效，你重新粘贴新代码即可。已保存的会话不受影响。
• 复制（Duplicate）：复制一个组件并使用新的访问代码，便于在另一个站点运行变体。
• 暂停（Pause）：暂停的组件会停止在网站上加载，直到你重新启用。
• 删除（Delete）：移除组件。

妥善保管访问代码：它在你的网站页面源码中可见。对敏感网站请使用允许域名列表；若怀疑被滥用，请重置代码。

故障排查