ウェブサイトにAIチャットボットを追加する方法（どのプラットフォームでも、手順つき）

ウェブサイトにAIチャットボットを追加する作業は、アシスタントを作ることと、それをサイトに置くことの2つに分かれます。Nexoply では、1つ目は Nexoply のダッシュボードで行い、コードも AIキーも必要ありません。AIは Nexoply が運用しているからです。2つ目はコード1行だけです。必要なものは次のとおりです。

• Nexoply のアカウント。無料で登録できます。無料プランには月50会話が含まれ、カードは不要です。有料プランは月額$19からです（料金ページ参照）。
• サイトにカスタムコードを追加できる場所へのアクセス：サイトビルダーのフッターコード設定、テーマのファイル、または HTML テンプレート。ホスティング型のサイトビルダーでは、ご利用のプランでカスタムコードを使えるか確認してください。
• 約5分の作業時間と、ビジネス情報を確認する時間。

小規模ビジネスのウェブサイト向けAIチャットボットが役に立つかどうかは、何を知っているかで決まります。Nexoply には、サービスと料金、よくある質問、ポリシー、営業時間、対応エリアを登録します。最も手早いのはウェブサイトの取り込みです。サイトのアドレスを入力すると、Nexoply が公開ページ（スキャン1回あたり無料15、Starter 40、Business 100、Pro 200ページ）を JavaScript で作られたページも含めて読み取り、料金つきのサービス、よくある質問、ポリシー、営業時間、連絡先を提案します。提案を確認し、承認するまで何も追加されません。

それ以降、アシスタントはその情報だけをもとに答えます。推測せずにわからないと伝えるよう指示されており、すべての会話をダッシュボードで確認できます。訪問者は12言語のどれで書いても、その言語で回答を受け取れます。Nexoply は人のスタッフが対応するライブチャットの受信箱ではなく、予約や支払い自体も受け付けません。ボタンで訪問者を予約ページ、電話、WhatsApp へ案内できます。全体像はNexoply の仕組みをご覧ください。

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

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

YOUR-KEY の部分には、チャットボットページが自動で入れるあなたのチャットボット専用のキーが入ります。このキーは公開されるもので、パスワードではなく、アカウントへのアクセス権も与えません。ウィジェットがどのビジネスのものかを示すだけです。サイトを変更する前にアシスタントを見てみたい場合は、チャットボット付きのテストページを開く をクリックしてください。

HTML ファイルを直接編集するサイトでは、閉じタグ </body> のすぐ上に、コードを1行として貼り付けます。

    <!-- …ページのコンテンツ… -->
    <script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>
  </body>
</html>

1. 1

   共通のフッターを探す

   ページが共通のフッターテンプレートやインクルードファイルを使っている場合（PHP サイトや静的サイトジェネレーターでよくある形です）、そこに1回だけ貼り付けます。そうでない場合は、チャットボタンを表示したい各ページに貼り付けます。

2. 2

   1ページに1回だけ貼り付ける

   1ページにつき1つで十分です。スクリプトは非同期で読み込まれるため、ページの最後に置けばコンテンツが先に表示されます。

3. 3

   アップロードまたはデプロイする

   ファイルを保存し、いつもサイトを更新するときと同じ方法でアップロードまたはデプロイします。

サイトビルダーやフレームワークには、それぞれサイト全体用のコードを置く場所が1つあります。そこに同じ1行を貼り付けてください。各プラットフォームのガイドで、手順を1つずつ説明しています。

• npm パッケージは不要です。 ウィジェットは常に同じ script タグです。data-chatbot 属性と、widget.js を含む src を残していれば、コードからタグを追加しても動作します。
• シングルページアプリ。 アプリのルート要素の外側にページ上で1回だけマウントされ、訪問者がページを移動しても会話を保ち、URL が変わるとページのルールを確認し直します。2回読み込んでも問題ありません。
• サーバーサイドレンダリング。 ブラウザ内でのみ動作し、フレームワークのマークアップには触れないため、ハイドレーションの問題は起きません。
• Content-Security-Policy。 サイトで設定している場合は、script-src、connect-src、img-src で https://nexoply.com を許可してください。
• ローカルでのテスト。 許可するウェブサイト を入力している場合は、ローカル開発用のホストをポート番号つきで追加するか（例：localhost:3000）、テスト中は空欄のままにしてください。

公開中のサイトを新しいプライベートウィンドウで開きます。画面下の隅にチャットボタンが表示されます。「週末も緊急の出張対応はしていますか？」「対応エリアはどこですか？」など、実際の質問をしてみてください（ほかの例は水道業者向けAIチャットボットガイドにあります）。数秒以内に、その会話が Nexoply のダッシュボードの 会話 に表示されます。以降、ダッシュボードでの変更は約1分でサイトに反映され、コードを編集し直す必要はありません。

• コードがまだ公開されていない。 変更を保存し、公開またはデプロイしたことを確認してから、公開中のサイトをプライベートウィンドウで再読み込みしてください。サイトビルダーのエディターのプレビューでは、カスタムコードが実行されないことがあります。
• コードが変わっている、または欠けている。 <script から </script> まで1行がそろっていて、data-chatbot とキーが変更されていないか確認してください。
• カスタムコードが使えない。 ホスティング型のサイトビルダーでは、カスタムコードの利用がプランによって決まることがあります（たとえば Wix では独自ドメインを接続したプレミアムプラン、Squarespace では Business プラン以上が必要です）。
• 許可するドメイン。 チャットボットページで 許可するウェブサイト を設定している場合は、サイトのすべてのアドレスが正確に登録されているか確認してください（例：mybusiness.com、サブドメインには *.mybusiness.com）。
• Content-Security-Policy。 厳しいポリシーを設定していると、script-src、connect-src、img-src で https://nexoply.com を許可するまでスクリプトがブロックされます。
• チャットボットがオフ、または広告ブロッカー。 チャットボットを有効にする のスイッチがオンになっているか確認してください。まれに、ブラウザの拡張機能がチャットウィジェットをブロックすることがあります。別のブラウザで試してください。

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

その後は定期的に会話を確認しましょう。アシスタントが答えられなかった質問は一覧になり、ワンクリックでよくある質問に追加できます。インサイトでは、話題、混み合う時間帯、チャットが開かれたページがわかります。オプションの一覧はチャットボットの機能を、ツールを先に比較したい場合は小規模ビジネス向けAIチャットボットのおすすめをご覧ください。