Squarespace にAIチャットボットを追加する方法（5分で完了）

Nexoply は、専用のダッシュボードで作成し、コード1行で Squarespace のサイトに追加するAIアシスタントです。Squarespace に置くのはその1行だけで、それ以外はすべて Nexoply 側で、コードも AIキーもなしに設定します。AIは Nexoply が運用しているからです。実際には次のような意味になります。

• あなたのビジネスを把握します。 サービスと料金、よくある質問、ポリシー、営業時間、対応エリアを追加するか、Squarespace サイトの公開ページ（無料プランではスキャン1回あたり15ページ）から取り込みます。あなたが承認するまで、何も追加されません。
• その情報だけをもとに答えます。 推測せずにわからないと伝えるよう指示されており、すべての会話をダッシュボードで確認できます。
• サイトのデザインに合わせられます。 メッセージボタンかサイドタブ、色、フォント、ロゴ、既製のテンプレート、スマートフォン用の別デザイン、予約、電話、WhatsApp などのスタート画面ボタン。
• 12言語で回答します。 対応する別の言語で書いた訪問者には、その言語で回答します。
• できないこと。 人のスタッフが対応するライブチャットの受信箱ではなく、予約や支払い自体も受け付けません。ボタンで訪問者を予約ページ、電話、WhatsApp へ案内します。

無料プランには月50会話が含まれ、有料プランは月額$19からです（料金ページ参照）。オプションの一覧はチャットボットの機能をご覧ください。

まず次の3点を確認してください。

• Nexoply のアカウント。無料で登録できます。無料プランには月50会話が含まれ、カードは不要です。
• Nexoply に登録したビジネス情報：サービスと料金、よくある質問、ポリシー、営業時間、対応エリア。最も手早いのは、Squarespace サイトのアドレスを入力して、Nexoply に公開ページを取り込ませる方法です（JavaScript で作られたページも読み取れます）。提案を確認し、承認するまで何も追加されません。
• Code Injection を含む Squarespace のプラン：Business プラン以上。わからない場合は、以下で説明する Squarespace の設定を開き、サイトで Code Injection が使えるか確認してください。

Nexoply のダッシュボードで チャットボット ページを開き（まだの場合は チャットボットを作成 をクリック）、設置コードをコピーします。コードは次のような形です。

<script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>

YOUR-KEY の部分には、チャットボットページが自動で入れるあなたのチャットボット専用のキーが入ります。このキーは公開されるもので、パスワードではなく、アカウントへのアクセス権も与えません。Squarespace に触れる前にアシスタントを見てみたい場合は、チャットボット付きのテストページを開く をクリックすると、サンプルページで試せます。

1. 1

   サイトの設定を開く

   Squarespace にログインし、対象のサイトを開いて Settings をクリックします。

2. 2

   Code Injection を開く

   Advanced を開き、Code Injection を開きます。ここはサイト全体に適用される場所なので、置いたコードはすべてのページで実行されます。

3. 3

   Footer に貼り付ける

   Nexoply のコードを Footer 欄に貼り付けます。フッター部分は各ページの末尾の直前に配置されるため、コードを置くのに適した場所です。

4. 4

   保存する

   Save をクリックします。Squarespace でインストールするものも、ほかに設定するものもありません。

訪問者と同じ見え方で確認するため、公開中のサイトを新しいプライベートウィンドウで開きます。画面下の隅にチャットボタンが表示されます。「ベジタリアン向けのメニューはありますか？」「8人で席を予約できますか？」など、実際の質問をしてみてください（ほかの例は飲食店向けAIチャットボットガイドにあります）。数秒以内に、その会話が Nexoply のダッシュボードの 会話 に表示されます。以降、ダッシュボードでの変更は約1分でサイトに反映され、Squarespace に戻る必要はありません。

• プラン。 Code Injection が見当たらない、またはロックされている場合は、サイトのプランに含まれていません。Business プラン以上が必要です。
• 貼り付け先の間違い。 Code Injection をもう一度開き、コードが Footer 欄に、<script から </script> までそろった状態で変更されずに入っているか確認してください。
• 保存していない、または古い表示。 Save をクリックしたことを確認し、エディターにログインしたまま確認するのではなく、公開中のサイトをプライベートウィンドウで再読み込みしてください。
• 許可するドメイン。 チャットボットページで 許可するウェブサイト を設定している場合は、訪問者がサイトにアクセスするすべてのアドレスが正確に登録されているか確認してください（例：mystudio.com、サブドメインには *.mystudio.com）。
• チャットボットがオフ、または広告ブロッカー。 チャットボットを有効にする のスイッチがオンになっているか確認してください。まれに、ブラウザの拡張機能がチャットウィジェットをブロックすることがあります。別のブラウザで試してください。

デザインは Squarespace ではなく、Nexoply のダッシュボードで設定します。チャットボット → カスタマイズ で、メッセージボタンのアイコン（または独自の画像）、テキストラベル、形、サイズ、色、位置を選べます。代わりに、画面の端に表示するサイドタブ（「ヘルプ」など）も使えます。スマートフォンでは別のデザインにでき、ページのルールを使えば、選んだページ（例：/menu/*）で表示を変えられます。チャットウィンドウを Squarespace のフォントや色に合わせ、ロゴを追加し、既製のテンプレートから始めることもできます。スタート画面には、予約、電話、WhatsApp など独自のボタンを表示できます。ウィジェットは Shadow DOM を使うため、サイトのスタイルがチャットを変えることはなく、その逆もありません。

その後は定期的に会話を確認しましょう。アシスタントが答えられなかった質問は一覧になり、ワンクリックでよくある質問に追加できます。全体像はNexoply の仕組みを、ほかのプラットフォームでもサイトを運営している場合はあらゆるウェブサイトにAIチャットボットを追加する方法をご覧ください。