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

Kirby CMS 网站的分步指南

获取嵌入代码

平台：

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

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

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

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

步骤 2：添加到 Kirby 代码片段（推荐）

Kirby 是一个基于文件的 PHP CMS，使用代码片段来复用模板部分。推荐的方法是为聊天机器人创建一个专用的代码片段：

在 site/snippets/asyntai-widget.php 创建一个新的代码片段文件
将您的嵌入代码粘贴到文件中：

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

然后在您的主模板（例如 site/templates/default.php）或布局中，在 </body> 闭合标签之前包含该代码片段：

<?php snippet('asyntai-widget') ?>
</body>
</html>

提示： 如果您使用共享布局或页脚代码片段，可以在那里添加代码片段调用，使其自动出现在每个页面上。例如，将其添加到页脚代码片段中 </body> 标签之前。

备选方法 1：添加到页脚代码片段

如果您的 Kirby 网站使用了页脚代码片段，您可以直接在其中添加嵌入代码：

打开 site/snippets/footer.php（如果不存在则创建它）
在 </body> 闭合标签之前添加嵌入代码：

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

确保您的模板包含了页脚代码片段：

<?php snippet('footer') ?>

注意： 如果页脚代码片段已包含在所有模板中，在此处添加聊天机器人可确保它出现在每个页面上，无需修改单独的模板文件。

备选方法 2：使用 Kirby 插件

您可以创建一个 Kirby 插件，自动将聊天机器人脚本注入到每个页面中，无需修改任何模板：

在 site/plugins/asyntai/index.php 创建插件目录和文件
添加以下代码，使用 Kirby 的钩子来注入脚本：

Kirby::plugin('custom/asyntai', [
    'hooks' => [
        'page.render:after' => function ($contentType, $body) {
            $script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
            return str_replace('</body>', $script . '</body>', $body);
        }
    ]
]);

提示： 如果您希望聊天机器人自动加载到每个页面而无需编辑任何模板或代码片段文件，插件方法是理想的选择。它还能使您的聊天机器人集成保持模块化，便于启用或禁用。

备选方法 3：使用 Kirby 的 js() 辅助函数

Kirby 提供了内置的 js() 辅助函数用于加载 JavaScript 文件。您可以在模板或代码片段中使用它：

<?= js('https://asyntai.com/static/js/chat-widget.js', ['async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID']) ?>

或者直接在模板 PHP 文件中 </body> 之前添加脚本：

<?php // site/templates/default.php ?>
<html>
<head>
    <!-- head content -->
</head>
<body>
    <!-- page content -->
    <?php snippet('header') ?>
    <main>
        <?= $page->text()->kirbytext() ?>
    </main>
    <?php snippet('footer') ?>

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

注意： 如果您使用 js() 辅助函数，请确保将其放置在模板的 <body> 部分内，以确保聊天机器人正确加载。

步骤3：验证安装

将嵌入代码添加到您的 Kirby 网站后，在新的浏览器标签页或无痕窗口中访问您的网站。您应该会在右下角看到聊天小部件按钮。点击它以确保它能正常打开和运行。

看不到小部件？ 请确保已将 YOUR_WIDGET_ID 替换为仪表板中您的实际小部件 ID。验证代码片段或插件文件已保存在正确的目录中。如果使用插件方法，请确保插件目录结构为 site/plugins/asyntai/index.php。清除浏览器缓存或在无痕模式下测试。检查浏览器的开发者控制台（F12）是否有任何错误。