如何将Asyntai AI聊天机器人添加到Adobe Experience Manager

AEM网站的分步指南

平台：

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

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

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

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

步骤2：使用页面组件添加代码（推荐）

推荐的方法是将聊天机器人代码添加到AEM页面组件的head部分，以实现全站安装：

登录您的AEM Author实例
导航到CRXDE Lite（通常位于 http://your-aem-instance:4502/crx/de）
找到您的页面组件模板（通常位于/apps/your-project/components/page下）
找到或创建head.html或headerlibs.html文件
将您的Asyntai嵌入代码添加到此文件中
点击顶部菜单中的"全部保存"
将更改复制到您的发布实例

提示： 将代码放在head.html文件中可确保聊天机器人显示在使用该模板的所有页面上。这是全站安装最简洁的方式。

替代方法1：客户端库（ClientLibs）

如需更有结构的方式，您可以使用AEM的客户端库系统：

在/apps/your-project/clientlibs下创建新的客户端库文件夹
设置cq:clientLibraryFolder节点类型
创建一个js.txt文件，列出您的JavaScript文件
将您的Asyntai嵌入代码添加到此文件夹中的JavaScript文件中
使用以下方式在页面组件中包含客户端库：

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='your-category-name'}" />

注意： 此方法推荐用于已有ClientLib结构的项目，为大型实施提供更好的组织方式。

替代方法2：标签管理（Adobe Launch）

如果您正在使用Adobe Launch（前身为DTM）或其他标签管理器：

登录Adobe Experience Platform Launch
导航到您的属性
前往Rules并创建新规则
将事件设置为"页面底部"或"DOM 就绪"
添加操作：Custom Code
粘贴您的Asyntai嵌入代码
保存并发布库

提示： 使用Adobe Launch是Adobe推荐的添加第三方脚本的方法。它提供更好的控制、测试功能，且无需代码部署。

替代方法3：体验片段

实现灵活、对作者友好的方式：

在AEM中导航到体验片段
创建新的体验片段
添加文本组件或HTML组件
切换到HTML源代码模式
粘贴您的Asyntai嵌入代码
将此体验片段包含在页面模板的页脚中

重要提示： 确保您拥有修改模板和组件的适当AEM权限。对于AEM as a Cloud Service，更改可能需要通过您的CI/CD流水线。

步骤3：验证安装

部署更改后，清除浏览器缓存并访问您的网站。您应该在右下角看到聊天小部件按钮。点击它以确保其正常打开和运行。

看不到小部件？ 检查浏览器控制台（F12）中是否有JavaScript错误。验证代码是否已正确部署到您的发布实例。对于AEM as a Cloud Service，确保您的更改已成功通过部署流水线。