返回仪表板
文档
了解如何使用 Asyntai
如何将 Asyntai AI 聊天机器人添加到 Framer
Framer 网站的分步指南
平台:
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:使用自定义代码(推荐)
Framer 内置了自定义代码功能,可以轻松添加脚本:
- 打开您的 Framer 项目
- 点击左上角的齿轮图标(站点设置)
- 前往"自定义代码"部分
- 点击"添加脚本"按钮
- 将您的 Asyntai 嵌入代码粘贴到脚本字段中
- 将放置位置设置为"<body> 标签末尾"
- 保存并发布您的站点
提示: 将脚本放置在"<body> 标签末尾"可确保它在页面内容之后加载,这对于聊天小部件是推荐的做法,不会减慢页面加载速度。Framer 还提供"<head> 标签开头"和"<head> 标签末尾"选项,但建议使用 body 末尾。
替代方法:使用代码组件
如果您更喜欢使用代码组件添加聊天机器人:
- 在 Framer 编辑器中,打开您想要添加聊天机器人的页面
- 在画布上添加一个代码组件
- 将 Asyntai 嵌入代码粘贴到组件中
- 根据需要将其放置在布局中
注意: 自定义代码方法更为推荐,因为它可以在所有页面上全站应用聊天机器人。代码组件方法可能只会将聊天机器人添加到您放置组件的特定页面。
步骤3:验证安装
发布更改后,在新的浏览器标签页或无痕窗口中访问您的 Framer 站点。您应该能在右下角看到聊天小部件按钮。点击它确保它能正常打开和运行。
看不到小部件? 确保添加代码后已保存并发布了站点。尝试清除浏览器缓存或在无痕窗口中查看。如果使用自定义域名,更改可能需要几分钟才能生效。