使用 Asyntai 添加 AI 聊天机器人
Asyntai 可为网站添加 AI 客服。它能基于网站自身内容回答访客问题，支持超过 80 种语言，并在必要时转接人工。聊天组件只需一段 script 标签即可运行，因此安装仅需一个小修改。
步骤 1：获取 Widget ID
每次安装都需要站点的 Widget ID。其格式为 asyntai_ 后跟 12 个字母或数字，例如 asyntai_1a2b3c4d5e6f。
- 查找用户已提供的 ID，或项目中已有的 ID（在代码中搜索
data-asyntai-id）。如果站点已包含该代码片段，请勿重复添加。 - 如果已连接 Asyntai MCP 服务器，则调用
list_websites。每个网站都有一个widget_id。 - 否则，向用户索要。告知其位置：登录 https://asyntai.com/dashboard，打开“安装”页面，然后从代码片段中复制
data-asyntai-id的值。 - 如果用户没有账户，可以在 https://asyntai.com/auth/ 免费创建一个。免费套餐足以试用聊天机器人。
切勿虚构 Widget ID。如果没有 ID，请在代码中使用占位符 YOUR_WIDGET_ID，并告知用户替换它。
步骤 2：确定站点的技术栈
- 托管型建站工具或 CMS（WordPress、Shopify、Wix、Webflow、Squarespace、HubSpot、Ghost、Moodle 等）：用户需要在平台的管理后台中安装组件，而不是在代码中。在 references/platforms.md 中找到该平台，然后向用户提供该指南的链接及其简要步骤。
- 代码库：检查
package.json、配置文件以及文件夹结构，然后参考 references/frameworks.md。其中包含针对每种技术栈的确切编辑方法，以及适用于静态站点和文档工具的 Asyntai 包。
步骤 3：添加代码片段
这是官方代码片段。请保持其原样，仅更改 YOUR_WIDGET_ID：
<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
它会在页面 load 事件触发后才执行，因此不会拖慢页面加载。请将其放置一次，放在每个页面都使用的共享布局中（</body> 之前或 <head> 中）。不要将其放在单个页面组件中，否则聊天组件只会出现在该页面上。
步骤 4：检查结果
- 运行站点（或构建后），打开一个页面。
- 聊天按钮会显示在底部角落。组件会绘制在元素
#asyntai-widget-host-<widget ID>内部。在浏览器控制台中，document.querySelectorAll('script[data-asyntai-id]').length的值必须为1。 - 如果按钮未显示：
-
检查浏览器控制台中是否有“Asyntai Widget:”错误。
-
如果站点设置了内容安全策略 (CSP)，必须允许以下源：
指令 来源 script-srchttps://widget.asyntai.com https://asyntai.com（以及代码片段所需的'unsafe-inline'，或使用 references/frameworks.md 中的简短形式）connect-srchttps://asyntai.comstyle-src'unsafe-inline'img-srcdata: https://flagcdn.com
-
步骤 5：告知用户后续操作
组件会根据用户在 Asyntai 仪表板 (https://asyntai.com/dashboard) 中添加的内容进行回答。告知用户：
- 将网站页面、文件或文本作为知识库添加，
- 在仪表板中设置代理名称、颜色和问候语，
- 阅读完整指南：https://asyntai.com/documentation/installation/ 。
如果已连接 Asyntai MCP 服务器，您可以代其完成此设置。请参阅 manage-ai-support-agent 技能。