WebflowサイトにAIチャットボットを追加する

Webflowの条件

Webflowでサイト全体にカスタムコードを追加できるのは、有料のSite planがあるサイトか、有料のWorkspaceプランの場合です。無料のStarterサイトではできません。また、カスタムコードが実行されるのは公開済みのサイトだけで、Designerのキャンバス上では動きません。

コードを取得する

メールアドレスで登録し、サイトの公開アドレス（独自ドメイン、または訪問者が使っているのがそれなら webflow.io のアドレス）を入力します。最初の読み込みが終わったら、ダッシュボードからコードをコピーします。

Webflowでの追加手順

1. プロジェクトの Site settings を開きます。
2. Custom code タブに進みます。
3. Footer code にコードを貼り付けます。全ページの閉じタグ </body> の前に入ります。
4. Save changes を押します。
5. 使っているドメインにサイトを Publish します。
6. 公開されたサイトを開きます。右下にチャットボタンが表示され、ダッシュボードに接続済みと表示されます。

一つのページだけに表示したい場合は、サイト全体のフッターではなく、そのページ自体のカスタムコード設定（</body> の前）を使います。

ドメインが二つある場合は両方を追加

多くのWebflowサイトは、独自ドメインと webflow.io の両方でアクセスできます。チャットが答えるのはダッシュボードに登録したドメインの上だけです。wwwの有無は同じものとして扱います。ステージング用のアドレスでも使いたい場合は、そのドメインをダッシュボードで追加してください。ローカルでのテストなら localhost でも動作します。

Webflowサイトでできること

サイトの公開ページを、リンクからたどれるCMSコレクションのページも含めて読み込み、毎日読み込み直します。新しいCMSアイテムや修正は、あなたが何もしなくてもアシスタントに反映されます。それらのページの情報だけをもとに訪問者の言語で答え、書かれていない質問にはそう伝え、その質問を一覧にまとめます。

WebflowはSaaS、制作会社、サービス業のサイトによく使われます。そうしたサイトでよくある質問は「Xと連携できますか」「Proプランには何が含まれますか」「解約方法は？」「私の国の顧客にも対応していますか」などです。ページに答えが書いてあれば、アシスタントも答えます。書いていなければ、その質問が一覧に表示されます。

Webflow Ecommerceでは、ページをもとに商品とポリシーについての質問に答えます。Webflowの注文には接続しないため、注文を調べることもキャンセル・変更することもできません。そうした会話はあなたに引き継がれます。

チームへの引き継ぎ

訪問者が担当者との会話を希望した時や、何か対応が必要な時は、会話があなたのメールに、または接続していればSlack、Discord、Telegramに届きます。チャットアプリから返信すると、訪問者のチャット画面にあなたの回答が表示されます。

告知する前に確認する

1. 設定ページのテストチャットに、先月の営業・サポートの受信箱に届いた質問をしてみます。
2. 答えが出てこないところは、訪問者が探しそうなページにその情報を書き足して公開します。
3. 次の毎日の読み込みの後でもう一度質問し、ダッシュボードで「答えられなかった質問」の一覧を確認します。

回答はあなたのものです。アシスタントは、あなたの製品、競合、価格について外部の知識を使わず、公開中のサイトに書かれていることだけを使います。