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

CrafterCMS 网站的分步指南

获取嵌入代码

平台：

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

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

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

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

步骤 2：添加到 FreeMarker 模板（推荐）

CrafterCMS 使用 FreeMarker（.ftl）模板来渲染页面。将聊天机器人添加到所有页面的最简单方法是编辑主页面模板：

在 Crafter Studio 中，转到站点仪表板 > 内容类型或导航到模板
打开主页面模板（例如 /templates/web/pages/home.ftl 或基础布局）
找到</body>闭合标签
将您的 Asyntai 嵌入代码粘贴到 </body> 标签之前：
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
保存文件并通过 Crafter Studio 发布

提示： 在 </body> 闭合标签之前添加脚本可确保它在页面内容之后加载，这是聊天小部件的推荐做法，不会拖慢页面加载速度。

替代方法 1：使用 Crafter 模板组件

为了更好地组织代码，为聊天机器人小部件创建专用组件模板：

在 Crafter Studio 中，在 /templates/web/components/asyntai-widget.ftl 创建新模板文件
将以下内容添加到组件模板：
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
使用 FreeMarker include 指令将其包含在主布局模板中：
<#include "/templates/web/components/asyntai-widget.ftl" />
或者，如果使用 Crafter 的组件渲染系统，请使用：
<@renderComponent component=contentModel.asyntaiWidget />
保存两个文件并通过 Crafter Studio 发布

注意： 使用单独的组件模板可以通过注释掉一行 include 代码，轻松在整个网站启用或禁用聊天机器人。

替代方法 2：使用 Crafter 的 Head/Scripts 配置

CrafterCMS 允许您通过站点配置全局注入脚本：

在 Crafter Studio 中，导航到站点配置 > 配置
打开引擎站点配置文件（site-config.xml）
添加自定义脚本注入配置：
<site>   <scripts> <script> <src>https://asyntai.com/static/js/chat-widget.js</src> <async>true</async> <data-asyntai-id>YOUR_WIDGET_ID</data-asyntai-id> </script> </scripts> </site>
或者，编辑基础 FreeMarker 布局以从站点配置中读取并动态注入脚本：
<#if siteConfig.getString("scripts.script.src", "")?has_content> <script async src="${siteConfig.getString("scripts.script.src")}" data-asyntai-id="${siteConfig.getString("scripts.script.data-asyntai-id")}"></script> </#if>
保存并发布配置更改

提示： 使用站点配置允许您无需直接修改模板文件即可管理聊天机器人小部件，使后续更新或移除更加方便。

替代方法 3：使用 Groovy 控制器

CrafterCMS 支持用 Groovy 脚本处理服务端逻辑。您可以使用控制器动态添加聊天机器人脚本：

在 /scripts/pages/ 中创建 Groovy 脚本（例如 /scripts/pages/home.groovy 或全站控制器）
添加以下代码将脚本 URL 注入模板模型：
// /scripts/pages/home.groovy import org.craftercms.engine.service.context.SiteContext def siteContext = SiteContext.current // Add Asyntai chatbot configuration to the model model.asyntaiEnabled = true model.asyntaiWidgetId = "YOUR_WIDGET_ID" model.asyntaiScriptSrc = "https://asyntai.com/static/js/chat-widget.js"
然后在 FreeMarker 模板中引用模型变量：
<#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
保存 Groovy 脚本和模板文件
通过 Crafter Studio 发布更改

注意： 当您需要条件逻辑（例如仅对特定用户角色或页面类型启用聊天机器人）或需要从外部来源获取配置值时，Groovy 控制器方法非常有用。

步骤 3：发布并验证

完成更改后，通过 Crafter Studio 发布：

在 Crafter Studio 中，转到站点仪表板
在我的最近活动或待审批部分查看您的更改
点击发布将更改部署到正式站点
在新的浏览器标签页或无痕窗口中访问您的 CrafterCMS 网站
您应该在右下角看到聊天小部件按钮
点击它以确保其正常打开和运行

看不到小部件？ 确保已通过 Crafter Studio 发布更改。验证您编辑的是页面使用的正确模板文件。清除浏览器缓存或在无痕窗口中查看。如果使用了 Crafter 的缓存，请从 Crafter Studio 仪表板清除引擎缓存。

模板位置： CrafterCMS 模板位置可能因项目结构而异。常见位置包括 /templates/web/pages/（页面模板）、/templates/web/components/（组件模板）和 /templates/web/（布局模板）。请检查现有模板以找到 </body> 标签的定义位置。