如何为您的网站添加 AI 聊天机器人（适用于任何平台，分步指南）

为网站添加 AI 聊天机器人分为两部分：搭建 AI 助手，以及把它放到网站上。使用 Nexoply 时，第一部分在 Nexoply 控制台中完成，无需代码，也无需 AI 密钥，因为 AI 由 Nexoply 运行。第二部分只是一行代码。您需要：

• 一个 Nexoply 账户。免费注册：免费版每月包含 50 次对话，无需信用卡。付费方案起价为每月 $19，详见价格页面。
• 能够访问网站中接受自定义代码的位置：建站工具中的页脚代码设置、主题文件或 HTML 模板。如果使用托管式建站工具，请确认您的套餐允许添加自定义代码。
• 大约五分钟时间，外加审核企业信息所需的时间。

小型企业网站上的 AI 聊天机器人，价值取决于它掌握的信息。在 Nexoply 中，您可以提供服务和价格、常见问题、政策、营业时间和服务范围。最快的方法是网站导入：输入您的网站地址，Nexoply 会读取您的公开页面（每次扫描：免费版 15 页，Starter 40 页，Business 100 页，Pro 200 页），包括用 JavaScript 构建的页面，然后建议服务及价格、常见问题、政策、营业时间和联系方式。您审核这些建议，所有内容都需经您批准后才会添加。

此后，AI 助手只根据这些信息作答。它被设定为在不知道时如实说明，而不是乱猜，每次对话都保存在控制台中供您查看。访客可以使用 12 种语言中的任意一种提问，并以自己的语言获得回答。Nexoply 不是供人工客服使用的在线客服收件箱，本身也不处理预约或付款；它的按钮可以把访客引导到您的预约页面、电话或 WhatsApp。阅读 Nexoply 的工作原理了解全貌。

在控制台中打开聊天机器人页面（如果还没有创建，请点击创建聊天机器人），然后复制安装代码。代码如下所示：

<script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>

YOUR-KEY 会被替换为您的聊天机器人专属密钥，“聊天机器人”页面会自动为您填好。这个密钥是公开的：它不是密码，也无法访问您的账户，只是告诉小组件它属于哪家企业。想在修改网站之前先看看 AI 助手的效果？点击打开包含聊天机器人的测试页面。

如果您以 HTML 文件的形式编辑网站，请将代码单独放在一行，位于结束标签 </body> 的正上方：

    <!-- …您的页面内容… -->
    <script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>
  </body>
</html>

1. 1

   找到共享的页脚

   如果您的页面共用一个页脚模板或 include 文件（在 PHP 网站和静态网站生成器中很常见），只需在那里粘贴一次代码。否则，请把它粘贴到每个需要显示聊天按钮的页面中。

2. 2

   每个页面粘贴一次

   每个页面一份代码就足够了。脚本以异步方式加载，因此放在页面末尾可以让您的内容先显示出来。

3. 3

   上传或部署

   保存文件，然后按照您平时更新网站的方式上传或部署。

每个建站工具和框架都有一个放置全站代码的位置。在那里粘贴同一行代码即可；各平台指南会逐步讲解具体操作。

• 无需 npm 包。小组件始终是同一个 script 标签。通过代码添加该标签同样可行，只要保留 data-chatbot 属性，并且 src 中包含 widget.js。
• 单页应用。它只在页面上挂载一次，位于应用根元素之外；访客在页面间导航时会保留对话，URL 变化时会重新检查页面规则。重复加载两次也不会有问题。
• 服务端渲染。它只在浏览器中运行，不会改动框架生成的标记，因此不会产生水合（hydration）问题。
• Content-Security-Policy。如果您的网站发送了该策略，请在 script-src、connect-src 和 img-src 中允许 https://nexoply.com。
• 本地测试。如果您填写了仅允许在以下网站上使用，请添加带端口的本地开发主机（例如 localhost:3000），或在测试期间将列表留空。

在新的无痕窗口中打开您的线上网站。底部角落会出现一个聊天按钮。提一个真实的问题，例如“周末提供紧急上门服务吗？”或“你们的服务范围包括哪些地区？”（更多示例请参阅水管工 AI 聊天机器人指南）。几秒钟内，这段对话就会出现在 Nexoply 控制台的对话下。此后，您在控制台中所做的更改会在大约一分钟内同步到网站，无需再次修改代码。

• 代码尚未上线。确认更改已保存并已发布或部署，然后在无痕窗口中重新加载线上网站。建站工具中的编辑器预览不一定会运行自定义代码。
• 代码被改动或不完整。检查这一行是否完整，从 <script 到 </script>，且 data-chatbot 和您的密钥均未改动。
• 不允许自定义代码。在托管式建站工具中，能否使用自定义代码可能取决于您的套餐（例如 Wix 需要付费套餐并已连接域名，Squarespace 需要 Business 套餐或更高）。
• 允许的域名。如果您在“聊天机器人”页面设置了仅允许在以下网站上使用，请确认已准确列出网站的每个地址（例如 mybusiness.com，子域名可用 *.mybusiness.com）。
• Content-Security-Policy。严格的策略会拦截该脚本，直到在 script-src、connect-src 和 img-src 中允许 https://nexoply.com。
• 聊天机器人已关闭，或广告拦截器。检查启用聊天机器人开关是否已打开。极少数情况下，浏览器扩展会拦截聊天小组件；请换一个浏览器试试。

外观设计在 Nexoply 控制台中设置，而不是在网站代码中。在聊天机器人 → 自定义下，您可以选择消息按钮的图标（或您自己的图片或 SVG）、文字标签、形状、大小、颜色、边框、阴影和位置，也可以改用屏幕边缘的侧边标签（例如“帮助”）。您可以为手机设置不同的外观，并使用页面规则在特定页面上更改或隐藏按钮（例如 /services/*）。让聊天窗口与您网站的字体和颜色保持一致，添加您的标志，或从现成的模板开始。开始页面可以显示您自己的按钮，例如预约、致电或 WhatsApp。小组件使用 Shadow DOM，因此您网站的 CSS 不会影响它。

之后请定期查看对话：AI 助手未能解答的问题会单独列出，可以一键转为常见问题；数据分析会显示话题、最繁忙的时段以及打开聊天的页面。完整的选项列表请参阅聊天机器人功能；如果想先比较各类工具，请阅读适合小型企业的最佳 AI 聊天机器人。