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

Google Sites向けのステップバイステップガイド

プラットフォーム:

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

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

<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：埋め込み機能を使用してコードを追加

Google Sitesでは、埋め込み機能を使用してカスタムHTMLおよびJavaScriptコードを追加します：

パソコンでGoogle Sitesのサイトを開きます
チャットボットを追加したいページに移動します
右サイドバー（または上部メニュー）の「挿入」をクリックしてください
オプションから「埋め込み」を選択してください
上部の「埋め込みコード」タブをクリックしてください
テキストボックスにAsyntaiの埋め込みコードを貼り付けます
「次へ」をクリックしてプレビューを確認してください
「挿入」をクリックしてページにコードを追加します
右上の「公開」をクリックして変更を反映してください

ヒント: Google Sitesは埋め込みをiframe内にラップするため、チャットボットはブラウザの角に固定されるのではなく、埋め込みエリア内に表示されます。最適な体験のために、埋め込み要素をページコンテンツの最下部に配置して、チャットボットボタンを見つけやすくしてください。

複数ページへの追加

Google Siteの複数ページにチャットボットを追加するには：

チャットボットを表示したい各ページで埋め込みプロセスを繰り返します
テンプレートが対応している場合は、ヘッダーまたはフッターセクションに埋め込みを追加することもできます
ページ数が多いサイトの場合は、まずメインのランディングページに追加することを検討してください

注記: 他のプラットフォームとは異なり、Google Sitesにはサイト全体のコードインジェクションポイントがありません。チャットボットを表示したい各ページに埋め込みコードを追加するか、テーマがサポートしている場合はカスタムヘッダー/フッターを使用する必要があります。

Google Sitesにおける埋め込みコードの処理方法

Google Sitesがコードをどのように処理するかについて：

Google Sitesはコードをサンドボックス環境の<iframe>要素にラップします
JavaScriptは<script>タグ内に記述する必要があります（Asyntaiのコードには既に含まれています）
外部JavaScriptファイル（Asyntaiウィジェットなど）を参照できます
埋め込み機能は、従来のGoogle SitesのHTMLボックスよりも制限が少なくなっています
埋め込みコードはサイト検索のインデックスに含まれません

重要: Google Sitesのiframeサンドボックスの影響で、一部の高度な機能が従来のウェブサイトとは異なる動作をする場合があります。Asyntaiチャットボットはこれらの制約の中で動作するように設計されています。

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

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