返回仪表板
文档
了解如何使用 Asyntai
如何将 Asyntai AI 聊天机器人添加到 Webflow
Webflow 网站分步指南
平台:
HTML/Custom
WordPress
Shopify
WooCommerce
BigCommerce
Ecwid
Wix
Squarespace
Webflow
Weebly
HubSpot
Tilda
Adobe Experience Manager
Duda
Google Sites
Bludit
Plesk
Concrete CMS
Craft CMS
Contentful
Docusaurus
Strapi
Joomla
Kentico
Drupal
Magento
Blogger
Bitrix
TYPO3
PrestaShop
OpenCart
Ghost
Hugo
Statamic
Umbraco
Volusion
Moodle
SilverStripe
Grav
October CMS
ProcessWire
Sanity
ExpressionEngine
Sylius
Backdrop CMS
MODX
Bagisto
PayloadCMS
e107
CrafterCMS
Kirby
MedusaCMS
DatoCMS
GoDaddy
Framer
Bubble
Carrd
Jimdo
Strikingly
Kajabi
Teachable
Thinkific
ClickFunnels
Hostinger
Unbounce
Leadpages
Systeme.io
Instapage
Weebly
步骤1:获取您的嵌入代码
首先,前往您的 Asyntai 仪表板并向下滚动到"嵌入代码"部分。复制您的专属嵌入代码,格式如下:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
注意: 以上代码仅为示例。您必须从仪表板复制您自己的专属嵌入代码,因为其中包含您的个人小部件 ID。
第 2 步:通过站点设置添加代码(所有页面)
要一次性将聊天机器人添加到 Webflow 网站的所有页面:
- 登录您的Webflow 账户并选择您的项目
- 点击左侧边栏中的齿轮图标(站点设置)
- 在设置菜单中点击"自定义代码"
- 向下滚动到"页脚代码"部分(</body> 标签前)
- 粘贴您的Asyntai嵌入代码
- 点击"保存更改"
- 发布您的网站以使更改生效
提示: 将代码添加到 Footer 部分会将其放置在闭合的</body>标签之前,这对于聊天小部件来说是推荐的做法,因为它不会减慢页面加载速度。
替代方案:特定页面自定义代码
如果您只想在特定页面上添加聊天机器人:
- 在Webflow Designer中打开您的项目
- 点击左侧边栏中的Pages 面板(文件夹图标)
- 将鼠标悬停在要编辑的页面上,然后点击齿轮图标
- 向下滚动到"自定义代码"
- 将您的 Asyntai 嵌入代码粘贴到"</body> 标签前"部分
- 点击"保存"
- 发布您的网站
替代方案:使用 Embed 元素
您还可以使用 Embed 元素在页面的任意位置添加聊天机器人:
- 在Webflow Designer中打开您的项目
- 点击"+"按钮打开添加面板
- 搜索"嵌入"或在组件下查找
- 将Embed 元素拖放到您的页面上
- 在代码编辑器中粘贴您的 Asyntai 嵌入代码
- 点击"保存并关闭"
- 发布您的网站
重要提示: 使用 Embed 元素时,您需要在每个要使用聊天机器人的页面上添加它。如需全站安装,请使用上述站点设置方法。
步骤3:验证安装
发布网站后,在新的浏览器标签页或无痕窗口中打开它。您应该会在右下角看到聊天小部件按钮。点击它以确保其正常打开和运行。
看不到小部件? 请确保在添加代码后已发布网站。自定义代码仅出现在已发布的网站上,不会在 Designer 预览中显示。尝试清除浏览器缓存或在无痕窗口中查看。