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

Framer 网站的分步指南

获取嵌入代码

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

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

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

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

步骤 2:使用自定义代码(推荐)

Framer 内置了自定义代码功能,可以轻松添加脚本:

  1. 打开您的 Framer 项目
  2. 点击左上角的齿轮图标(站点设置)
  3. 前往"自定义代码"部分
  4. 点击"添加脚本"按钮
  5. 将您的 Asyntai 嵌入代码粘贴到脚本字段中
  6. 将放置位置设置为"<body> 标签末尾"
  7. 保存发布您的站点

提示: 将脚本放置在"<body> 标签末尾"可确保它在页面内容之后加载,这对于聊天小部件是推荐的做法,不会减慢页面加载速度。Framer 还提供"<head> 标签开头"和"<head> 标签末尾"选项,但建议使用 body 末尾。

替代方法:使用代码组件

如果您更喜欢使用代码组件添加聊天机器人:

  1. Framer 编辑器中,打开您想要添加聊天机器人的页面
  2. 在画布上添加一个代码组件
  3. 将 Asyntai 嵌入代码粘贴到组件中
  4. 根据需要将其放置在布局

注意: 自定义代码方法更为推荐,因为它可以在所有页面上全站应用聊天机器人。代码组件方法可能只会将聊天机器人添加到您放置组件的特定页面。

步骤3:验证安装

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

看不到小部件? 确保添加代码后已保存并发布了站点。尝试清除浏览器缓存或在无痕窗口中查看。如果使用自定义域名,更改可能需要几分钟才能生效。