如何将 Asyntai AI 聊天机器人添加到 October CMS
October CMS 网站的分步指南
步骤1:获取您的嵌入代码
首先,前往您的 Asyntai 仪表板并向下滚动到"嵌入代码"部分。复制您的专属嵌入代码,格式如下:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
注意: 以上代码仅为示例。您必须从仪表板复制您自己的专属嵌入代码,因为其中包含您的个人小部件 ID。
步骤 2:添加到布局模板(推荐)
推荐的方法是在 October CMS 后端编辑默认布局来添加聊天机器人:
- 登录您的 October CMS 后端
- 在主菜单中转到 CMS > 布局
- 打开您的默认布局(通常是
default.htm) - 找到闭合
</body>标签和{% scripts %}占位符 - 将您的 Asyntai 嵌入代码添加到 before
{% scripts %}和</body>:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% scripts %} </body> - 点击"保存"以应用更改
提示: Placing the script before {% scripts %} and </body> ensures it loads after the page content, which is recommended for chat widgets and won't slow down your page loading.
Alternative Method 1: Using {% put scripts %} Block
您可以使用 October CMS 的脚本占位符从页面或部分组件注入聊天机器人:
- 在 CMS 编辑器中打开任何页面或部分组件
- 使用以下代码添加
{% put scripts %}块:{% put scripts %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endput %} - 将
YOUR_WIDGET_ID替换为仪表板中的实际小部件 ID - 点击"保存"
注意: For this method to work, your layout must include the {% scripts %} placeholder in its markup. This is where October CMS renders all injected scripts. Most default layouts already include this tag.
备选方法 2:使用 Component PHP
如果您更喜欢编程方式,可以通过自定义组件添加聊天机器人脚本:
- 在 October CMS 插件中创建或修改组件
- 在组件的
onRun()方法中,使用addJs()方法:public function onRun() { $this->addJs('https://asyntai.com/static/js/chat-widget.js', [ 'async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID' ]); } - 将
YOUR_WIDGET_ID替换为您的实际小部件 ID - 在您希望聊天机器人出现的页面上注册该组件
提示: 使用组件可以让您以编程方式控制聊天机器人的加载时间和位置。您可以在 onRun() 中添加条件逻辑,根据用户角色、页面类型或其他条件来控制加载。
备选方法 3:使用部分组件
您可以为聊天小部件创建一个可复用的部分组件:
- 在 October CMS 后端转到 CMS > 部分组件
- 点击"+ 添加"以创建新的部分组件
- 将其命名为
asyntai-widget.htm - 将您的 Asyntai 嵌入代码添加到部分组件中:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - 点击"保存"
- 打开您的布局模板并在
</body>之前包含该部分组件:{% partial 'asyntai-widget' %} - 保存布局
提示: 使用部分组件可以通过简单地在布局中添加或移除部分组件引用来轻松启用或禁用整个网站的聊天机器人。
步骤3:验证安装
保存更改后,在新的浏览器标签页或无痕窗口中访问您的 October CMS 网站。您应该会在右下角看到聊天小部件按钮。点击它以确保它能正常打开和运行。
看不到小部件? 请确保在 CMS 后端保存了所有更改。清除浏览器缓存或在无痕窗口中查看。如果您的网站使用缓存,可以通过命令行运行 php artisan cache:clear 来清除 October CMS 缓存,或使用后端的 设置 > 系统 > 清除缓存 选项。
布局选择: 确保您希望聊天机器人出现的页面使用了正确的布局。您可以通过在 CMS > 页面 中打开页面并查看页面设置中的布局下拉菜单来检查页面使用的布局。
Weebly