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には、JavaScriptファイルを読み込むための組み込みjs()ヘルパーが用意されています。テンプレートやスニペットで使用できます：

<?= 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）でエラーがないか確認してください。