如何为 Webflow 添加 AI 聊天机器人（5 分钟完成）

Nexoply 是一款 AI 助手，您在它自己的控制台中搭建，再用一个 script 标签添加到 Webflow 网站上。Webflow 中只存放这一行代码；AI 助手的知识、外观和行为都在 Nexoply 中管理，无需代码，也无需 AI 密钥，因为 AI 由 Nexoply 运行。实际使用中，这意味着：

• 它了解这家企业。添加服务和价格、常见问题、政策、营业时间和服务范围，或从 Webflow 网站的公开页面导入（免费版每次扫描 15 页）。所有内容都需经您批准后才会添加。
• 它只根据这些信息作答。它被设定为在不知道时如实说明，而不是乱猜，每次对话都保存在控制台中供您查看。
• 它与设计相协调。消息按钮或侧边标签、配色、字体和标志、现成的模板、手机上的独立外观、针对特定页面的页面规则，以及预约、致电或 WhatsApp 等开始页面按钮。
• 它支持 12 种语言。使用其他受支持语言提问的访客，会收到用该语言作出的回答。
• 它不是什么。它不是供人工客服使用的在线客服收件箱，本身也不处理预约或付款；它的按钮会把访客引导到预约页面、电话或 WhatsApp。

免费版每月包含 50 次对话；付费方案起价为每月 $19，详见价格页面。在为客户搭建 Webflow 网站？每家企业都有自己的 Nexoply 账户和一个聊天机器人，因此请使用客户自己的信息进行设置。完整的选项列表请参阅聊天机器人功能。

请先确认以下三点：

• 一个 Nexoply 账户。免费注册：免费版每月包含 50 次对话，无需信用卡。
• 在 Nexoply 中添加企业信息：服务和价格、常见问题、政策、营业时间和服务范围。最快的方法是输入 Webflow 网站地址，让 Nexoply 导入其公开页面，包括用 JavaScript 构建的页面。您审核建议内容，所有内容都需经您批准后才会添加。
• 能够访问 Webflow 项目的设置，并拥有允许使用自定义代码的套餐。如果您无法使用 Custom code 设置，请检查您的套餐，或询问网站所有者。

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

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

YOUR-KEY 会被替换为您的聊天机器人专属密钥，“聊天机器人”页面会自动为您填好。这个密钥是公开的：它不是密码，也无法访问您的账户。想在改动 Webflow 之前先看看 AI 助手的效果？点击打开包含聊天机器人的测试页面，在示例页面上试用。

1. 1

   打开 Project settings

   在 Webflow 中，打开该项目的 Project settings。

2. 2

   前往 Custom code

   打开 Custom code 部分。这里的代码作用于全站，会在项目的每个页面上运行。

3. 3

   粘贴到 Footer code

   将 Nexoply 代码粘贴到 Footer code 中。Footer code 位于每个页面的末尾之前，正是这段脚本应放的位置。

4. 4

   保存

   在 Project settings 中保存更改。

5. 5

   发布

   发布网站。自定义代码只会添加到已发布的网站上，因此完成这一步后聊天按钮才会出现。

在新的无痕窗口中打开已发布的网站，以访客的视角查看。底部角落会出现一个聊天按钮。提一个真实的问题，例如“你们接收新患者吗？”或“第一次就诊需要带什么？”（更多示例请参阅诊所 AI 聊天机器人指南）。几秒钟内，这段对话就会出现在 Nexoply 控制台的对话下。此后，您在控制台中所做的更改会在大约一分钟内同步到网站，无需在 Webflow 中重新发布。

• 尚未发布。仅保存 Project settings 还不够：请发布网站，然后重新加载。
• 在 Designer 中查看。请在无痕窗口中查看已发布的网站，而不是在 Designer 中查看。
• 字段错误或代码不完整。重新打开 Custom code，检查代码是否位于 Footer code 中，且完整未改动，从 <script 到 </script>。
• 套餐或权限。如果无法保存自定义代码，请检查您的 Webflow 套餐是否允许使用，或者您在项目中的角色是否有权编辑 Project settings。
• 允许的域名。如果您在“聊天机器人”页面设置了仅允许在以下网站上使用，请列出网站发布到的每个地址（例如 myclinic.com，子域名可用 *.myclinic.com）。
• Content-Security-Policy。如果网站发送了 Content-Security-Policy，请在 script-src、connect-src 和 img-src 中允许 https://nexoply.com。
• 聊天机器人已关闭，或广告拦截器。检查启用聊天机器人开关是否已打开。极少数情况下，浏览器扩展会拦截聊天小组件；请换一个浏览器试试。

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

如果想通过您自己的某个 Webflow 按钮打开聊天，可以用一段简短的脚本调用 window.dispatchEvent(new Event("nexoply:open-chat"))；如果想在页面加载后立即打开，请在 script 标签中添加 data-open="true"。之后请定期查看对话：AI 助手未能解答的问题会单独列出，可以一键转为常见问题。阅读 Nexoply 的工作原理了解全貌；其他平台请参阅如何为任意网站添加 AI 聊天机器人。