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

Backdrop CMSウェブサイト向けステップバイステップガイド

埋め込みコードの取得

プラットフォーム:

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

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

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

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

ステップ2：テーマテンプレートに追加する（推奨）

Backdrop CMSはテーマ内で.tpl.phpテンプレートファイルを使用しています。推奨される方法は、アクティブなテーマのページテンプレートに直接埋め込みコードを追加することです：

FTPまたはファイルマネージャーからBackdrop CMSのインストールにアクセスします
アクティブなテーマのディレクトリに移動します：themes/yourtheme/
page.tpl.phpファイル（テーマによってはlayout.tpl.php）を開きます
</body>閉じタグまたは<?php print $page_bottom; ?>の行を見つけます
その行の直前にAsyntaiの埋め込みコードを貼り付けます
ファイルを保存します

<!-- Asyntai AI Chatbot -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
<?php print $page_bottom; ?>
</body>

ヒント: コードを<?php print $page_bottom; ?>または</body>閉じタグの直前に配置することで、ページコンテンツの後にチャットボットが読み込まれ、ページの読み込みパフォーマンスが向上します。この方法により、このテーマを使用するすべてのページに自動的にチャットボットが追加されます。

代替方法1：カスタムモジュールを使用する

backdrop_add_js()を使用してチャットボットスクリプトを挿入する簡単なBackdrop CMSモジュールを作成できます：

モジュールディレクトリを作成します：modules/custom/asyntai_widget/
以下のコードでasyntai_widget.moduleモジュールファイルを作成します：
// modules/custom/asyntai_widget/asyntai_widget.module function asyntai_widget_init() { backdrop_add_js('https://asyntai.com/static/js/chat-widget.js', array( 'type' => 'external', 'scope' => 'footer', 'attributes' => array('async' => 'async', 'data-asyntai-id' => 'YOUR_WIDGET_ID'), )); }
asyntai_widget.infoファイルを作成します：
name = Asyntai AI Chatbot Widget description = Adds the Asyntai AI chatbot widget to all pages. backdrop = 1.x package = Custom type = module
Backdrop管理パネルの機能（admin/modules）に移動します
Customパッケージの下にある「Asyntai AI Chatbot Widget」を見つけて有効にしてください
「設定を保存」をクリックしてください

注記: モジュールコード内のYOUR_WIDGET_IDを、Asyntaiダッシュボードから取得した実際のウィジェットIDに置き換えてください。カスタムモジュールのアプローチはアップグレードに対して安全で、テーマの更新時に上書きされません。

代替方法2：Backdropの「Add to Head」モジュールを使用

コントリビュートされた「Add to Head」モジュールは、コードを編集せずにスクリプトを挿入する簡単な方法を提供します：

Backdrop CMSウェブサイトから「Add to Head」コントリビュートモジュールをダウンロードしてインストールしてください
設定 > 開発 > Add to Headに移動します
Asyntaiの埋め込みコードをフッターセクションに追加してください
「設定を保存」をクリックしてください

ヒント: 「Add to Head」モジュールの使用は、テーマファイルの編集やカスタムモジュールの作成を避けたい場合に最も簡単な方法です。挿入されたスクリプトを管理するためのシンプルな管理インターフェースを提供します。

代替方法3：ブロックシステムを使用する

Backdrop CMSのレイアウトとブロックシステムを使用してチャットボットを追加することもできます：

Backdrop CMS管理パネルにログインします
構造 > レイアウトに移動します
編集するレイアウトを選択します（例：デフォルトレイアウト）
フッター領域で「ブロックを追加」をクリックしてください
「カスタムブロック」を選択してください
ブロック形式を「Full HTML」または「Raw HTML」に設定してください
ブロック本文にAsyntaiの埋め込みコードを貼り付けます
ブロックにタイトルを付け（例：「Asyntai Chatbot」）、必要に応じて「タイトルを非表示」をチェックしてください
「ブロックを保存」をクリックし、次に「レイアウトを保存」をクリックしてください

重要: スクリプトタグが除去されないよう、テキスト形式を「Full HTML」または「Raw HTML」に設定してください。デフォルトの「Filtered HTML」形式はセキュリティ上の理由からスクリプトタグを削除します。

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

変更を行った後、Backdrop CMSのキャッシュをクリアしてインストールを確認します：

管理パネルの設定 > パフォーマンスに移動します
「すべてのキャッシュをクリア」をクリックしてください
新しいブラウザタブまたはシークレットウィンドウでウェブサイトを開きます
右下にチャットウィジェットボタンが表示されるはずです
クリックして正しく開いて動作することを確認してください

ウィジェットが表示されませんか？ 設定 > パフォーマンスでBackdrop CMSのキャッシュをクリアしたことを確認してください。シークレットウィンドウでサイトを表示するか、ブラウザキャッシュをクリアしてみてください。ブラウザコンソール（F12）でJavaScriptエラーがないか確認してください。カスタムモジュール方式を使用した場合は、機能でモジュールが有効になっていることを確認してください。