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

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

埋め込みコードの取得

プラットフォーム:

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

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

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

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

ステップ2：マスターページテンプレートへのコード追加（推奨）

Kenticoウェブサイトのすべてのページにチャットボットを一度に追加するには、マスターページテンプレート方式を使用します：

Kentico管理画面にログインし、Page templatesアプリケーションに移動します
マスターページテンプレート（すべてのページで使用されるテンプレート）を見つけて開きます
テンプレートエディターのHeaderタブをクリックします
ヘッダーセクションにAsyntaiの埋め込みコードを貼り付けます
または、閉じ</head>タグの前にテンプレートのレイアウトにコードを追加します
Saveをクリックして変更を適用します
サイトのキャッシュをクリアし、本番サイトで変更を確認します

ヒント: マスターページテンプレートを使用することで、このテンプレートを継承するすべてのページにチャットボットが表示されます。これはKenticoでのサイト全体のデプロイメントに最も効率的な方法です。

代替方法1：ページテンプレートヘッダー

特定のページテンプレートにのみチャットボットを追加したい場合：

Kentico管理画面のPage templatesアプリケーションに移動します
編集したい特定のページテンプレートを選択します
Headerタブをクリックします
scriptタグを使用してAsyntaiの埋め込みコードを追加します：

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

Saveをクリックします
このテンプレートを使用するすべてのページにチャットボットが含まれます

注記: この方法は、サイト全体ではなく、同じページテンプレートを共有するサイトの特定のセクションにチャットボットを追加したい場合に便利です。

代替方法2：HEAD HTML Webパーツ

特定のページのより詳細な制御、またはサブページ全体に継承可能なJavaScriptのために：

Kenticoページエディターで編集したいページを開きます
ページに新しいWebパーツを追加します（継承のために親ページに追加することを推奨します）
HEAD HTML Webパーツを検索して選択します
Webパーツの設定にAsyntaiの埋め込みコードを貼り付けます
子ページにもチャットボットを表示したい場合は、Webパーツを継承可能に設定します
OKをクリックしてWebパーツを保存します
ページを保存して公開します

ヒント: HEAD HTML Webパーツは、親ページにコードを追加してすべての子ページに自動的に伝播させるのに最適で、セクション全体へのインストールを実現します。

代替方法3：カスタムJavaScriptファイル（上級者向け）

スクリプトをファイルとして管理したい開発者向け：

Kenticoプロジェクトで~/CMSScripts/Custom/ディレクトリに移動します
新しいJavaScriptファイル（例：asyntai-widget.js）を作成します
Asyntaiウィジェットを動的に読み込むコードを追加します：

(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.head.appendChild(script);
})();

マスターページテンプレートのヘッダーでこのファイルを参照します：

<script src="~/CMSScripts/Custom/asyntai-widget.js"></script>

重要: この上級者向けの方法には、ファイルシステムへのアクセスとKenticoのディレクトリ構造の知識が必要です。適切な権限があることを確認し、必ずステージング環境でテストしてください。

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

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

ウィジェットが表示されませんか？ すべての変更を保存し、Kenticoのキャッシュ（Settings > System > Clear cache）をクリアしたことを確認してください。シークレットウィンドウでサイトを表示してみてください。ブラウザコンソール（F12）でウィジェットの読み込みを妨げるJavaScriptエラーがないか確認してください。