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

Webflow 网站分步指南

获取嵌入代码

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

首先,前往您的 Asyntai 仪表板并向下滚动到"嵌入代码"部分。复制您的专属嵌入代码,格式如下:

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

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

第 2 步:通过站点设置添加代码(所有页面)

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

  1. 登录您的Webflow 账户并选择您的项目
  2. 点击左侧边栏中的齿轮图标(站点设置)
  3. 在设置菜单中点击"自定义代码"
  4. 向下滚动到"页脚代码"部分(</body> 标签前)
  5. 粘贴您的Asyntai嵌入代码
  6. 点击"保存更改"
  7. 发布您的网站以使更改生效

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

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

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

  1. Webflow Designer中打开您的项目
  2. 点击左侧边栏中的Pages 面板(文件夹图标)
  3. 将鼠标悬停在要编辑的页面上,然后点击齿轮图标
  4. 向下滚动到"自定义代码"
  5. 将您的 Asyntai 嵌入代码粘贴到"</body> 标签前"部分
  6. 点击"保存"
  7. 发布您的网站

替代方案:使用 Embed 元素

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

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

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

步骤3:验证安装

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

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