Webflow

第一步:登入您的 ChatsLink 帐户并设置您的 ChatsLinkBot

  1. 如果您尚未拥有 ChatsLink 帐户,请注册一个免费的 ChatsLink 帐户。
  2. 登入您的 ChatsLink 帐户,并导航至机器人创建页面。
  3. 通过上传文本片段、文档、网站内容或问答对等来为您的新机器人提供训练数据。
  4. 在 ChatsLink 中训练和测试您的机器人,直到它能够准确回答查询。

不熟悉如何创建 ChatsLinkBot?这里有一个 使用 ChatsLink 创建 ChatsLinkBot 的分步指南

第二步:复制您的 ChatsLinkBot 嵌入代码

设置并测试您的 ChatsLinkBot 后,您将需要嵌入代码来在您的网站上显示机器人小部件。要做到这一点:

1. 前往您的 ChatsLink 帐户的仪表板

2. 您应该会看到一个 ChatsLinkBot 列表,点击您希望集成到 Webflow 网站中的 ChatsLinkBot,然后您应该会进入 ChatsLinkBot 的预览页面。

3. 在 ChatsLinkBot 预览页面上,点击 嵌入到网站 选项卡。

4. 点击 公开 按钮(如果您之前已经公开过机器人,则可能不会显示此按钮)。

5. 会弹出一个窗口。点击 复制 iframe 以从此窗口复制提供的 HTML 代码。

第三步:设置容器以显示您的 ChatsLinkBot 小部件

在将嵌入代码添加到您的 Webflow 网站之前,您需要创建一个容器来显示小部件。这将确保小部件显示在您网站的正确位置,并且不会延伸到整个页面的宽度。

1. 要创建容器,在 Webflow 上,登入您的 Webflow 帐户并前往您的仪表板。

2. 在您的 Webflow 仪表板上,您将找到所有网站项目的列表,将滑鼠悬停在您想要添加 ChatsLinkBot 的网站上,然后点击 打开设计师

3. 在设计师页面上,点击 Webflow 网站设计师的左上角的文件图标 (页面),然后选择您要嵌入 ChatsLinkBot 的页面。

4. 选择页面后,点击设计师屏幕左上角的加号按钮 (添加元素),然后应该会出现可用元素的列表。

5. 将区域元素拖到您想要嵌入 ChatsLinkBot 的页面部分。

6. 将容器元素拖到 区域上。

7. 将Div元素拖到容器元素上,并设置 Div 元素的大小,以确保机器人将包含在 Div 内,并且不会延伸到整个页面的宽度。

8. 现在,向下滚动元素列表,并将 嵌入元素拖到您在 Webflow 画布上添加的 Div 上。

9. 选择并双击嵌入元素,以显示 HTML 嵌入代码编辑器。

10. 将第 2 步中的 ChatsLinkBot 嵌入代码粘贴到其中,然后点击 保存并关闭

如果一切顺利,您应该会在设计师内部的 Webflow 网站的实时预览中看到 ChatsLinkBot 的预览。

完成这些步骤后,您的 ChatsLinkBot 应该已经准备好为您的网站访客提供服务!


如果您在管理嵌入和 ChatsLinkBot 元素的尺寸方面遇到困难,这是一个常见问题。Webflow 元件需要一点时间来熟悉。您可以查看这个 Webflow 官方文档中关于嵌入元素 的内容,以了解如何在 Webflow 网站上嵌入像 ChatsLink ChatsLinkBot 这样的第三方工具。


注意:您可以在您的 ChatsLink 仪表板上自定义机器人的外观和颜色。要做到这一点,前往您的 仪表板,选择一个机器人,点击页面顶部的 设置 选项卡,然后点击左侧边栏中的 聊天界面 以显示 ChatsLinkBot 的自定义选项