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

SilverStripe CMS 的分步指南

获取嵌入代码

平台：

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

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

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

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

第 2 步：添加到 SilverStripe 模板（推荐）

将聊天机器人添加到 SilverStripe 站点最简单的方法是直接编辑主题的主模板文件：

打开主题的模板文件（例如 themes/yourtheme/templates/Page.ss）
在 </body> 闭合标签之前添加嵌入代码：

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

保存文件并通过在站点 URL 后附加 ?flush=1 来刷新 SilverStripe 缓存

提示： SilverStripe 使用 .ss 模板文件和模板继承系统。将脚本放在基础 Page.ss 模板中可确保聊天机器人出现在站点的每个页面上。如果您的主题使用 Includes 文件夹，也可以将脚本放在共享的 include 文件中。

替代方法 1：在控制器中使用 Requirements 类

SilverStripe 提供了 Requirements 类，用于以编程方式管理 JavaScript 和 CSS 依赖项。这是面向开发者的推荐方法：

打开 app/src/PageController.php（或您的页面控制器文件）
在 init() 方法中，使用 Requirements::customScript() 动态加载小部件：

use SilverStripe\View\Requirements;

class PageController extends \SilverStripe\CMS\Controllers\ContentController
{
    protected function init()
    {
        parent::init();
        Requirements::customScript(<<<JS
            var script = document.createElement('script');
            script.src = 'https://asyntai.com/static/js/chat-widget.js';
            script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
            script.async = true;
            document.head.appendChild(script);
        JS);
    }
}

保存文件并通过访问 yourdomain.com?flush=1 刷新缓存

注意： Requirements 类是 SilverStripe 标准的引入脚本和样式表的方式。使用 Requirements::customScript() 输出内联 JavaScript。此方法可确保小部件在 PageController 处理的每个页面上加载。

替代方法 2：在模板中使用 Requirements

您还可以使用 SilverStripe 的模板语法在 .ss 模板中直接引入 JavaScript 文件：

打开主题的模板文件（例如 themes/yourtheme/templates/Page.ss）
在模板底部、</body> 之前添加以下内容：

<% require javascript("https://asyntai.com/static/js/chat-widget.js") %>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var scripts = document.querySelectorAll('script[src*="chat-widget.js"]');
        scripts.forEach(function(s) {
            s.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
        });
    });
</script>
</body>

提示： <% require %> 语法是 SilverStripe 在模板层面引入资源的方式。请注意，此方法不原生支持向脚本标签添加自定义 data 属性，因此我们添加了一小段初始化代码来设置小部件 ID。

替代方法 3：使用 SilverStripe 配置（YAML）

如需配置驱动的方法，您可以使用 SilverStripe 的 YAML 配置添加全局依赖项：

打开或创建文件 app/_config/app.yml
添加配置，通过自定义扩展或控制器设置来引入小部件：

# app/_config/app.yml
---
Name: asyntai-chatbot
After: '#rootroutes'
---
SilverStripe\Core\Injector\Injector:
  AsyntaiChatbotExtension:
    class: App\Extensions\AsyntaiChatbotExtension

创建扩展文件 app/src/Extensions/AsyntaiChatbotExtension.php：

namespace App\Extensions;

use SilverStripe\Core\Extension;
use SilverStripe\View\Requirements;

class AsyntaiChatbotExtension extends Extension
{
    public function onAfterInit()
    {
        Requirements::customScript("
            var script = document.createElement('script');
            script.src = 'https://asyntai.com/static/js/chat-widget.js';
            script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
            script.async = true;
            document.head.appendChild(script);
        ");
    }
}

在 app/_config/app.yml 中将扩展应用到 PageController：

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

运行 ?flush=1 以重建配置缓存

注意： 使用 YAML 配置和扩展是最模块化的 SilverStripe 方法。它将聊天机器人集成与主控制器逻辑分离，便于在不修改代码的情况下启用或禁用。

步骤3：验证安装

添加代码并刷新 SilverStripe 缓存后，在新的浏览器标签页中打开您的站点。您应该会在右下角看到聊天小部件按钮。点击它以确保其正常打开和运行。

看不到小部件？ 请确保通过在站点 URL 后附加 ?flush=1 来刷新缓存。检查是否已将 YOUR_WIDGET_ID 替换为仪表板中的实际小部件 ID。清除浏览器缓存或在无痕模式下查看。打开浏览器控制台（F12）检查是否有 JavaScript 错误。如果使用 Requirements 类，请验证 PageController 的 init() 方法是否被正确调用。