如何将 Asyntai AI 聊天机器人添加到 Webflow

Webflow 网站分步指南

平台：

步骤1：获取您的嵌入代码

首先，前往您的Asyntai 控制面板，向下滚动到"嵌入代码"部分。复制您专属的嵌入代码，它看起来如下：

<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>

注意： 以上代码仅为示例。您必须从仪表板复制您自己的专属嵌入代码，因为其中包含您的个人小部件 ID。

第 2 步：通过站点设置添加代码（所有页面）

要一次性将聊天机器人添加到 Webflow 网站的所有页面：

登录您的Webflow 账户并选择您的项目
点击左侧边栏中的齿轮图标（站点设置）
在设置菜单中点击"Custom Code"
向下滚动到"页脚代码"部分（</body> 标签前）
粘贴您的Asyntai嵌入代码
点击"保存更改"
发布您的网站以使更改生效

提示： 将代码添加到 Footer 部分会将其放置在闭合的</body>标签之前，这对于聊天小部件来说是推荐的做法，因为它不会减慢页面加载速度。

替代方案：特定页面自定义代码

如果您只想在特定页面上添加聊天机器人：

在Webflow Designer中打开您的项目
点击左侧边栏中的Pages 面板（文件夹图标）
将鼠标悬停在要编辑的页面上，然后点击齿轮图标
向下滚动到"自定义代码"
将您的 Asyntai 嵌入代码粘贴到"Before </body> tag"部分
点击"保存"
发布您的网站

替代方案：使用 Embed 元素

您还可以使用 Embed 元素在页面的任意位置添加聊天机器人：

在Webflow Designer中打开您的项目
点击"+"按钮打开添加面板
搜索"Embed"或在组件下查找
将Embed 元素拖放到您的页面上
在代码编辑器中粘贴您的 Asyntai 嵌入代码
点击"保存并关闭"
发布您的网站

重要提示： 使用 Embed 元素时，您需要在每个要使用聊天机器人的页面上添加它。如需全站安装，请使用上述站点设置方法。

步骤3：验证安装

发布网站后，在新的浏览器标签页或无痕窗口中打开它。您应该会在右下角看到聊天小部件按钮。点击它以确保其正常打开和运行。

看不到小部件？ 请确保在添加代码后已发布网站。自定义代码仅出现在已发布的网站上，不会在 Designer 预览中显示。尝试清除浏览器缓存或在无痕窗口中查看。

添加 AI 搜索框

AI 搜索框是一个独立挂件，有自己的代码。可以和聊天一起加，也可以单独加。它需要 Standard 或更高套餐：低于该套餐时搜索框会出现，但不会返回结果。

在 script 标签中添加 data-replace 属性，该搜索栏就会替换主题原有的搜索栏。在 Site Settings、Custom Code、Footer 中添加，和聊天代码同一个位置，这样它就位于结束 body 标签之前。

<script src="https://widget.asyntai.com/static/js/search-widget.js" data-asyntai-id="YOUR_WIDGET_ID" data-replace="auto" async></script>

阅读 AI 搜索框完整指南