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

Nexoply は、専用のダッシュボードで作成し、script タグ1つで Webflow のサイトに追加するAIアシスタントです。Webflow に置くのはその1行だけで、アシスタントの知識、デザイン、動作は Nexoply 側で、コードも AIキーもなしに管理します。AIは Nexoply が運用しているからです。実際には次のような意味になります。

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

無料プランには月50会話が含まれ、有料プランは月額$19からです（料金ページ参照）。クライアントの Webflow サイトを制作している場合、Nexoply のアカウントとチャットボット1つはビジネスごとに用意するものなので、クライアント自身の情報で設定してください。オプションの一覧はチャットボットの機能をご覧ください。

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

• Nexoply のアカウント。無料で登録できます。無料プランには月50会話が含まれ、カードは不要です。
• Nexoply に登録したビジネス情報：サービスと料金、よくある質問、ポリシー、営業時間、対応エリア。最も手早いのは、Webflow サイトのアドレスを入力して、Nexoply に公開ページを取り込ませる方法です（JavaScript で作られたページも読み取れます）。提案を確認し、承認するまで何も追加されません。
• Webflow プロジェクトの設定へのアクセス権と、カスタムコードを使えるプラン。Custom code の設定が使えない場合は、プランを確認するか、サイトのオーナーに相談してください。

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

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

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

1. 1

   Project settings を開く

   Webflow で、対象プロジェクトの Project settings を開きます。

2. 2

   Custom code を開く

   Custom code セクションを開きます。ここに置いたコードはサイト全体に適用され、プロジェクトのすべてのページで実行されます。

3. 3

   Footer code に貼り付ける

   Nexoply のコードを Footer code に貼り付けます。Footer code は各ページの末尾の直前に配置されるため、スクリプトを置くのに適した場所です。

4. 4

   保存する

   Project settings の変更を保存します。

5. 5

   公開する

   サイトを公開します。カスタムコードは公開したサイトにだけ追加されるため、この手順でチャットボタンが表示されるようになります。

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

• 公開していない。 Project settings を保存するだけでは不十分です。サイトを公開してから再読み込みしてください。
• Designer で確認している。 Designer ではなく、公開したサイトをプライベートウィンドウで確認してください。
• 入力欄の間違い、またはコードの欠落。 Custom code をもう一度開き、コードが Footer code に、<script から </script> までそろった状態で変更されずに入っているか確認してください。
• プランまたは権限。 カスタムコードを保存できない場合は、Webflow のプランでカスタムコードを使えるか、またはプロジェクトでのあなたの役割で Project settings を編集できるか確認してください。
• 許可するドメイン。 チャットボットページで 許可するウェブサイト を設定している場合は、サイトを公開しているすべてのアドレスを登録してください（例：myclinic.com、サブドメインには *.myclinic.com）。
• Content-Security-Policy。 サイトで Content-Security-Policy を設定している場合は、script-src、connect-src、img-src で https://nexoply.com を許可してください。
• チャットボットがオフ、または広告ブロッカー。 チャットボットを有効にする のスイッチがオンになっているか確認してください。まれに、ブラウザの拡張機能がチャットウィジェットをブロックすることがあります。別のブラウザで試してください。

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

Webflow で作った自分のボタンからチャットを開くには、短いスクリプトで window.dispatchEvent(new Event("nexoply:open-chat")) を呼び出します。ページを読み込んだらすぐに開きたい場合は、script タグに data-open="true" を追加します。その後は定期的に会話を確認しましょう。アシスタントが答えられなかった質問は一覧になり、ワンクリックでよくある質問に追加できます。全体像はNexoply の仕組みを、ほかのプラットフォームについてはあらゆるウェブサイトにAIチャットボットを追加する方法をご覧ください。