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

Drupalウェブサイトのためのステップバイステップガイド

プラットフォーム:

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

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<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：Header and Footer Scriptsモジュールを使用（推奨）

チャットボットを追加する最も簡単な方法は、「Header and Footer Scripts」モジュールを使用することです：

Drupal管理パネルにログインします
拡張に移動し、「新しいモジュールをインストール」をクリックしてください
Search for "Header and Footer Scripts" or download it from Drupal.org
モジュールをインストールして有効にします
設定 → 開発 → Header and Footer Scriptsに移動します
「フッター」タブをクリックしてください
Footer ScriptsフィールドにAsyntaiの埋め込みコードを貼り付けます
「設定を保存」をクリックしてください

ヒント: フッターセクションにコードを追加すると、ページコンテンツの後に読み込まれるため、チャットウィジェットに推奨されます。

代替方法：テーマテンプレートを編集

テーマのテンプレートファイルにコードを直接追加できます：

テーマフォルダに移動します：themes/your_theme/
html.html.twigファイルを開きます（存在しない場合は作成します）
</body>閉じタグを見つけます
</body>タグの直前にAsyntaiの埋め込みコードを貼り付けます
ファイルを保存します
Drupalのキャッシュをクリアします：設定 → パフォーマンス → すべてのキャッシュをクリア

重要: テーマファイルへの変更は、テーマの更新時に上書きされる場合があります。より永続的なソリューションとして、子テーマまたはHeader and Footer Scriptsモジュールの使用を検討してください。

代替方法：ライブラリを使用（開発者向け）

Drupalのアセットライブラリシステムを使用する開発者向け：

テーマの*.libraries.ymlファイルを作成または編集します
新しいライブラリエントリを追加します：
asyntai-chatbot: js: https://asyntai.com/static/js/chat-widget.js: { type: external, attributes: { async: true, data-asyntai-id: YOUR_WIDGET_ID } }
テーマの*.info.ymlファイルにライブラリをアタッチします：
libraries: - your_theme/asyntai-chatbot
Drupalのキャッシュをクリアします

ステップ3：インストールの確認

変更を保存してキャッシュをクリアした後、新しいブラウザタブまたはシークレットウィンドウでウェブサイトにアクセスしてください。右下にチャットウィジェットボタンが表示されます。クリックして正しく開いて動作することを確認してください。