Asyntai AIチャットボットをGravに追加する方法

Grav CMS向けのステップバイステップガイド

埋め込みコードの取得

プラットフォーム:

ステップ1：埋め込みコードを取得する

まず、Asyntaiダッシュボードに移動し、「埋め込みコード」セクションまでスクロールしてください。次のような固有の埋め込みコードをコピーしてください：

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

注記: 上記のコードは一例です。個人のウィジェットIDが含まれているため、ダッシュボードから固有の埋め込みコードをコピーしてください。

ステップ2：Gravテーマテンプレートへの追加（推奨）

Gravサイトのすべてのページにチャットボットを追加する最良の方法は、テーマのベースTwigテンプレートを編集することです：

Gravプロジェクトのuser/themes/yourtheme/templates/ディレクトリに移動し、default.html.twig（またはテーマで使用されているベーステンプレート）を開きます
閉じ</body>タグの前にAsyntaiの埋め込みコードを追加します：

<!-- user/themes/yourtheme/templates/default.html.twig -->
...
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

ファイルを保存します

ヒント: GravはTwigをテンプレートエンジンとして使用しています。ベーステンプレートは通常、テーマに応じてdefault.html.twigまたはpartials/base.html.twigです。テーマの構造を確認して、</body>閉じタグを含む正しいファイルを見つけてください。

代替方法1：Grav Asset Managerの使用

Gravの組み込みAsset Managerは、Twigを使用してJavaScriptアセットを追加するクリーンな方法を提供します：

テーマのベースTwigテンプレートを開きます（例：user/themes/yourtheme/templates/partials/base.html.twig）
Asset Managerを使用してJavaScriptを追加します：

{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}

またはベーステンプレートでスクリプト要素を動的に作成するインラインJavaScriptを追加します：

<!-- user/themes/yourtheme/templates/partials/base.html.twig -->
...
{% block bottom %}
    {{ assets.js('bottom') }}
{% endblock %}

<script>
(function() {
  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.body.appendChild(script);
})();
</script>
</body>
</html>

注記: Asset Manager方式は、JavaScriptアセットを管理するためのGrav推奨のアプローチです。アセットのパイプライン処理、順序付け、グループ化のサポートが組み込まれています。

代替方法2：Custom JSプラグインの使用

テーマファイルを編集せずにプラグインベースのアプローチを好む場合：

Grav管理パネルまたはCLIから「Custom JS」プラグインをインストールします：

bin/gpm install custom-js

Admin > Plugins > Custom JSに移動します
埋め込みスクリプトコードを追加します：

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

プラグインの設定を保存します

ヒント: プラグインを使用してスクリプトを挿入すると、テーマファイルを変更する必要がありません。これにより、チャットボットの連携を失うことなく、テーマの切り替えや更新が容易になります。

代替方法3：子テンプレートでのブロックオーバーライドの使用

GravテーマがTwigブロック継承を使用している場合、子テンプレートでbottomブロックをオーバーライドできます：

{% block bottom %}
    {{ parent() }}
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{% endblock %}

テーマのベーステンプレートを拡張する子テンプレートを作成または開きます
上記のブロックオーバーライドを追加します
parent() の呼び出しにより、ブロック内の既存のコンテンツがすべて保持されます

注記: この方法はTwigのテンプレート継承システムを使用します。ブロック名（例：bottom）がテーマのベーステンプレートで定義されているブロックと一致していることを確認してください。一般的なブロック名にはbottom、javascripts、footerがあります。

代替方法4：Grav Custom Headプラグインの使用

もう一つのプラグインベースの選択肢はCustom Headプラグインです：

CLIまたは管理パネルからCustom Headプラグインをインストールします：

bin/gpm install custom-head

Admin > Plugins > Custom Headに移動します
プラグイン設定にAsyntaiの埋め込みスクリプトコードを追加します：

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

設定を保存します

ヒント: Custom Headプラグインを使用すると、テーマファイルに触れることなく、サイトのheadまたはbodyセクションにコードを挿入できます。閉じ</body>タグの前にスクリプトを挿入するための正しい配置オプションについては、プラグインのドキュメントを確認してください。

ステップ3：キャッシュをクリアして確認する

コードを追加した後、Gravのキャッシュをクリアしてインストールを確認します：

# Clear cache via CLI
bin/grav clearcache

# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache

新しいブラウザタブでGravサイトを開いてください。右下にチャットウィジェットボタンが表示されるはずです。クリックして正しく開き、動作することを確認してください。

ウィジェットが表示されませんか？ bin/grav clearcacheまたは管理パネルからGravキャッシュをクリアしたことを確認してください。YOUR_WIDGET_IDをダッシュボードから取得した実際のウィジェットIDに置き換えたことを確認してください。ブラウザのキャッシュをクリアするか、シークレットモードで表示してください。ブラウザコンソール（F12）を開いてJavaScriptエラーがないか確認してください。右クリックして「ページのソースを表示」を選択し、スクリプトがページソースに存在することを確認してください。