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

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

プラットフォーム:

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

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

<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：コードインジェクションを使用してコードを追加する

サイトがSquarespaceのCore、Plus、Advancedプラン（または以前のBusinessプランやCommerceプラン）の場合は、コードインジェクションを使用してすべてのページに一度にチャットボットを追加できます：

Squarespaceアカウントにログインし、サイトを開きます
左パネルのPagesをクリックします
パネル下部のCustom Codeをクリックします
コードインジェクションをクリックします
フッターセクションまでスクロールします
フッターテキストボックスにAsyntaiの埋め込みコードを貼り付けます
「保存」をクリックしてください

注記: Squarespace 7.0では、コードインジェクションはPages → Website Toolsにあります。

ヒント: フッターセクションにコードを追加すると、閉じタグ</body>の直前に配置されます。これはチャットウィジェットに推奨される配置であり、ページの読み込みを遅くすることはありません。

代替方法：コードブロックを使用する

特定のページにのみチャットボットを追加するには、コードブロックを使用できます。コードブロックでJavaScriptが実行されるのは、Core、Plus、Advancedプラン（または以前のBusinessプランやCommerceプラン）のみです。

Squarespaceエディターでサイトを開きます
チャットボットを追加したいページに移動します
ページで「Edit」をクリックしてください
セクションにカーソルを合わせ、「+ Add Block」をクリックします
下にスクロールして「Code」を選択してください
鉛筆アイコンをクリックしてコードブロックを編集します
Asyntaiの埋め込みコードを貼り付けます
ブロックのModeメニューがHTMLに設定されていることを確認します
ブロックの外側をクリックしてエディターを閉じます
「保存」をクリックしてください

重要: コードブロックを使用する場合は、チャットボットを表示したい各ページにコードを追加する必要があります。サイト全体にインストールするには、上記のコードインジェクション方式を使用してください。

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

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

ウィジェットが表示されませんか？ 変更を保存して公開したことを確認してください。ブラウザのキャッシュをクリアするか、シークレットウィンドウでサイトを表示してみてください。Squarespaceではコードの変更が反映されるまで数分かかる場合があります。 Squarespaceにログインしている間はコードが実行されない場合があるため、プライベートウィンドウでサイトを確認してください。

AI 検索バーを追加する

AI 検索バーは独自のコードを持つ別のウィジェットです。チャットと一緒に追加しても、単独で追加してもかまいません。Standard 以上のプランが必要で、下位プランではバーは表示されますが結果は返りません。

script タグに data-replace 属性を追加すると、テーマにある既存の検索バーと置き換わります。チャットコードと同じ場所である「Pages」、「Custom Code」、「コードインジェクション」、「フッター」に追加します。SquarespaceのコードインジェクションはCore、Plus、Advancedプラン（または以前のBusinessプランやCommerceプラン）でのみ利用できるため、これをインストールするにはいずれかのプランが必要です。

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