ウェブサイトにAIチャットボットを追加する方法（コード不要）

エージェントに自社のナレッジを与えて応答を設定し、プラグインまたは付属のスクリプトでチャットウィジェットを設置すると、ウェブサイトにAIチャットボットを追加できます。Quickchat AIのウェブサイト用チャットボットでは、ナレッジ、会話の設定、チームのInboxを一か所で管理できます。訪問者はアカウントを作成せずに、サイト上で質問できます。

このチュートリアルでは、架空のキッチン設計会社Kestrel Kitchensを例に構築します。訪問者がリフォームの所要期間を尋ね、3メートル×4メートルのキッチンのおおよその費用を確認してから、見積もりを依頼します。エージェントは会社の情報に基づいて回答し、工事の詳細を収集した後、デザイナーが会話を続けられるようにします。

基本の設定にプログラミングは不要です。ナレッジと指示、見込み顧客情報の収集、担当者への引き継ぎを設定してから、ウィジェットを設置します。オプションのAPI Actionでは、必要事項のそろった問い合わせを別のシステムに送信します。

Kestrel Kitchens設定キットをダウンロードすると、サンプルのウェブサイト、ナレッジ、Main Prompt、設定、テストメッセージを入手できます。ダッシュボードで手順に沿って使う編集可能なファイルであり、クリックひとつでエージェントをインポートするものではありません。検証済みの例を再現できるよう、スクリーンショットとコピーして使うキット・プロンプト・設定の内容は英語のままにしています。

ウェブサイトのチャットボットでできること

チャットボットは自社のコンテンツから質問に回答し、後日の連絡を希望する訪問者の情報を保存して、人の対応が必要なときにはチームに会話を引き継ぎます。

これらの結果は、それぞれ別の証拠で確認します。正しい価格帯はKnowledge Baseから得られます。見積もり依頼では、連絡先と工事の詳細がInboxに保存されている必要があります。引き継ぎでは、担当者が会話を引き受け、送信した返信が訪問者に届く必要があります。

この例で訪問者がたどる流れです。見積もり依頼は関心の記録であり、価格と対応可能な日程はデザイナーが確認します。

チャットボットの追加前に必要なもの

Quickchat AIアカウント、内容を確認できる自社の情報、ウェブサイトのプラグインまたはカスタムコード設定へのアクセスが必要です。

1. Quickchat AIアカウントを作成し、登録手順を完了します。この演習には別のエージェントを使い、サンプルの情報が既存の顧客対応に影響しないようにしてください。
2. サービスのページ、FAQ、各種方針を用意するか、キットに含まれる架空のナレッジを使います。実際の事業で導入する前に、架空の価格と対応地域を置き換えてください。
3. ウェブサイトのプランで、利用する設置方法が許可されているか確認します。WordPressではプラグインへのアクセスが必要です。一部のホスト型サイトビルダーでは、サイト全体にカスタムコードを追加するために有料プランが必要です。
4. 担当者への引き継ぎを試す際は、テスト用のInboxを確認する人を決めておきます。最後のウェブサイト確認用に、デスクトップブラウザーとスマートフォンを用意してください。

Freeは個人の非商用学習向けです。Freeプランには毎月50 AIクレジットが含まれます。ビジネスでの導入には商用プランが必要で、テストも他のAI会話と同じ返信枠を消費します。サイトビルダーのサブスクリプションと外部APIの費用は別途かかります。費用のセクションで、それぞれの費用を説明します。

ステップ1：ウェブサイトの情報をチャットボットに学習させる

自社の回答が載っているページをKnowledge Baseに追加し、テスト前に取り込まれた内容を確認します。これがエージェントの回答用の参照資料になります。

学習用エージェントを作成する

1. 最初の設定画面でSet up manuallyを選択します。既存のダッシュボードから始める場合は、AI Agentの横にある+（Add new AI Agent）で別のエージェントを作成し、Set up manuallyを選択します。
2. IdentityのName your AI AgentにKestrel Kitchensと入力します。キットのmain-prompt.txtをDescribe what you want your agent to doに貼り付けます。これがエージェントのMain Promptになります。ステップ2で詳しく説明します。Nextを選択します。
3. ここではKnowledge Baseを空のままにして、Nextを選択します。External appsでは接続を選ばずに進みます。DeploymentでChat widgetを選択し、Nextに進みます。
4. Choose your planで、個人の学習を続ける場合はSkip for nowを選択し、ビジネスで使う場合は適切な商用プランを選びます。その後に任意のオファーが表示された場合は、手続きを完了するか閉じてください。
5. ダッシュボードのIdentityでエージェント名を確認し、Knowledge Baseを開きます。自社のページか、以下のサンプル記事を選んで使います。

自社のページを取り込む

1. Knowledge BaseでAdd Websiteを選択します。必要な範囲に応じて、単一ページまたはウェブサイトの取り込みを選びます。
2. 公開URLを入力します。ウェブサイトを取り込む場合は、検出されたページを確認し、回答の根拠にするサービス、料金、手順、FAQのページを選択します。
3. 取り込まれたテキストを確認します。価格の通貨と税の扱いが正しく、古いキャンペーンや無関係なページが情報源に含まれていないことを確かめてください。
4. 処理が完了するまで待ちます。ダッシュボードに未反映のナレッジ変更が表示されている場合は、設置したウィジェットをテストする前に適用または公開します。

まずは内容が明確な少数のページを使います。サイト上では見やすい料金カードとは別の場所に適用条件が記載されていることがありますが、エージェントには両方が必要です。ホームページだけを取り込むと、回答に必要な施工条件、地域の制限、返金方針などが抜け落ちる場合があります。

Kestrel Kitchensの情報源を使う

先にウェブサイトを公開せずに例を再現するには、情報を直接追加します。

1. Knowledge BaseでAdd Articleを選択します。Untitledという記事が作成され、Edit Articleが開きます。
2. TitleにKestrel Kitchens: services, prices and processと入力します。ContentでPlain Textを選択し、キットのknowledge.txtを貼り付けます。
3. Saveを選択し、記事がReadyになるまで待ちます。Knowledge Baseの一覧にタイトルが表示されることを確認します。

保存した記事には価格と所要期間の条件が残っています。架空の情報はサンプルのウェブサイトと一致しています。

Kestrel Kitchens is a fictional kitchen design and renovation business used in this tutorial. It serves Bristol, Bath and addresses within 25 miles of central Bristol.

Services: kitchen design, supply and full installation. A full kitchen renovation typically costs £18,000 to £45,000 including VAT. This is a planning range, not a quote. The final price depends on the survey, layout, cabinetry, appliances and building work. Room dimensions alone are not enough to calculate a firm price.

Timelines: survey and design normally take 2 to 3 weeks. Installation usually takes 4 to 8 weeks after all materials are available. These are typical durations, not a promised start date or completion date.

Process: discuss the project, arrange a site survey, agree the design and receive a written quote, then schedule work once the quote is accepted and materials are available. The chatbot cannot book a survey or confirm availability.

The design team works Monday to Friday, 09:00 to 17:00, Europe/London. Quote enquiries need the visitor's full name, email, postcode and project type. A preferred timeline is helpful but optional. The team follows up by email. Do not promise a response deadline.

この情報源には、意図的にローンの利用可否を記載していません。情報が実際に欠けている場合に、エージェントがどう対応するかをテストできます。実際のサイトでは情報源のページを最新に保ち、対応している場合は更新設定を使ってください。Knowledge Baseガイドでは、情報源の整理とテスト方法を説明しています。

ステップ2：回答する内容と約束してはいけない内容を定める

Main Promptでナレッジの使い方を定めます。まず質問に答え、有用な返信にまとめ、確定見積もりなどの判断はチームに委ねるよう指示します。

Kestrelの場合、部屋の寸法で工事の規模は分かりますが、収納設備、家電、建築工事の内容までは分かりません。床面積から精密な価格を算出せず、情報源にあるVAT込み£18,000から£45,000という計画段階の価格帯を説明する必要があります。

これらの価格はチュートリアル用の架空データです。情報源に書かれた事実と、チームによる判断が必要な事項を区別することが要点です。

1. IdentityのMain PromptカードでEditを選択します。
2. 以下のプロンプト全文を貼り付けます。保存を待ってからエディターを開き直し、保存されたテキストを確認します。
3. 業務上の事実はKnowledge Baseに置きます。プロンプトには回答の文体、情報収集の振る舞い、人の判断が必要な事項を記載します。

Main Promptは指示を入力する欄です。以下とキットにある全文をコピーして使えます。

You are the website assistant for Kestrel Kitchens. Help visitors understand our services, indicative prices and process using the Knowledge Base.

Answer the visitor's question before asking for contact details. Keep replies concise, usually two to four sentences. Use the visitor's language.

Treat prices as planning ranges. Never calculate a firm quote from room dimensions, invent a discount, promise a start date, confirm a survey booking or claim financing is available. If the Knowledge Base does not answer a question, say that a designer must confirm it.

When a visitor wants a quote or follow-up, collect their full name, email, postcode and project type in conversation. Ask one or two relevant questions at a time. Ask about their preferred timeline only after the required details, and accept a refusal without pressure. Do not ask for payment information.

Offer Human Handoff when the visitor asks for a designer or needs information you cannot confirm. Respect the configured working hours. Never claim that a designer is connected or a quote is booked. If the team is unavailable, offer an email follow-up.

Acknowledge the details the visitor has provided. Do not claim CRM delivery or a confirmed booking. The design team reviews enquiries in the Inbox.

AI Previewを開き、How long does a full kitchen renovation take?と質問します。ローカルの確認テストでは、エージェントは現地調査と設計に2から3週間、その後に資材がそろってから施工に4から8週間と回答しました。期間とその条件の両方が重要です。

新しい会話を始め、Do you offer financing?と質問します。正しい回答は、情報源では提供の有無を確認できないと伝え、デザイナーへの確認を案内するものです。プロンプトに自信のある言い回しを増やしても、欠けている業務上の事実は補えません。

ステップ3：チャットで見積もり依頼を収集する

Smart Data Gatheringは会話中に指定した情報を尋ね、訪問者が提供した内容を保存します。見積もり依頼では、デザイナーが後日連絡するために必要な情報だけを収集します。

1. Actions & MCPsを開き、Smart Data Gatheringを有効にしてEdit Actionを選択します。NameをQuote enquiries、DescriptionをCapture contact and project details for a kitchen design enquiry.に設定します。保存した名前がカードのタイトルになります。
2. Data to collectに以下の行を追加します。例を再現する場合は、英語のData point名をそのまま使ってください。連絡先の項目名には、Inboxの訪問者フィールドへの特別な対応付けがあります。
3. Reason for collecting informationをSo a Kestrel Kitchens designer can assess your project and follow up by email.に設定します。
4. When to ask for dataをAfter exchanging a few messages、How to ask for dataをSubtleに設定します。
5. Actionを保存します。AI Previewでサービスについて有用な質問をしてから見積もりを依頼し、Inboxに保存された詳細を確認します。

質問は収集する情報を示します。タイミングとスタイルの設定は、いつ尋ねるかを指示するものです。実際の会話もテストしてください。

この例の必要事項がそろった問い合わせには、氏名、メールアドレス、郵便番号、工事の種類が必要です。希望時期はMain Promptで説明しているとおり任意です。この業務要件は会話中の収集設定とは別です。ステップ8では、CRMへのリクエスト送信前に必須項目がそろっていることを条件にします。

エージェントは一般的な費用の質問に対し、メールアドレスの提供を回答の条件にせず答える必要があります。訪問者は情報収集を断ることもできます。I am only researching. I do not want to leave contact details.を使い、情報提供を繰り返し求めずに有用な会話が続くことを確認します。

収集した情報の保存先

Inboxで会話を開きます。標準の連絡先情報は訪問者フィールドに表示されます。それ以外の収集値も会話にひも付いて残り、Export Gathered Dataからエクスポートできます。

Where to send dataのEmail new leadsは、メールアドレスまたは電話番号を初めて取得したときに、エージェントのすべての管理者へ通知します。氏名だけではメールは送信されません。PreviewとSimulationではこの通知は送信されないため、メール配信に頼る前に、設置したウィジェットで管理下のテストを行い、自分の管理者用受信箱で確認してください。このローカルの手順では、外部へのメール配信を無効にしています。

Smart Data Gatheringのドキュメントでは、収集、通知、エクスポートについて説明しています。自社サイトでは情報を尋ねる理由を説明し、ウィジェットからプライバシー通知へリンクしてください。チャットボットのデータ保護ガイドは、データの流れ全体を確認する際に役立ちます。

ステップ4：担当者がチャットを引き継ぐ

Human Handoffで会話をチームに渡すと、担当者がInboxで引き受け、同じ訪問者に返信できます。

ウィジェットを公開する前に引き継ぎを準備します。デザイナーとの会話を希望する人に、先に見積もりフォームをすべて埋めさせるべきではありません。また、対応時間外に誰かがオンラインであるかのように伝えてはいけません。

1. Actions & MCPsでHuman Handoffを有効にし、Edit Actionを開きます。
2. 標準のMedia Message、User Frustration、Customer Support Suggestion、Lack Of Knowledgeのルールはオンのまま、Irrelevant Adviceはオフにします。デザイナーへの案内を行う場面はMain Promptですでに説明しています。検証した例では、カスタムルールを追加せずにこれらの標準ルールを使っています。
3. 以下のメッセージと対応時間を設定し、保存します。学習ではEmail notificationsをオフのままにして、Inboxで引き継ぎを直接確認します。

実際に担当者がInboxを確認する時間を指定します。この架空のスケジュールは、即時の返信を約束するものではありません。

対応時間内にウェブサイトからCan I speak to a designer?と尋ねます。エージェントから引き継ぎの確認を求められたら応じてください。Inboxで会話を開き、未割り当ての場合はAssign to me、Take overが表示されている場合はそれを選択します。担当者として返信し、訪問者に届くことを確認します。AIに戻す場合はReassign to AIを使います。

エージェントが引き継ぎを提案したことだけでなく、担当の状態と人からの返信の到達を確認します。

設定した時間外にも、新しい会話で繰り返します。エージェントは対応時間を説明し、設定した後日の連絡方法を案内する必要があります。この確認のために一時的にスケジュールを変更した場合は、終了後に実際のスケジュールに戻してください。Human Handoffのドキュメントでは、設定とInboxでの流れを説明しています。

チャットボットの有人引き継ぎガイドでは、会話の担当状態、AIへの担当の差し戻し、対応時間外の失敗ケースを個別に確認します。

ステップ5：ウィジェットをウェブサイトに合わせる

Channels → Your Websiteで外観と固定テキストを設定します。ウェルカムメッセージは、訪問者が何を質問できるか分かる具体的な内容にしてください。

外観（Appearance）

1. Appearanceを開きます。KestrelではCustomテーマを選び、背景を白、ヘッダーとアクセントを濃い緑（#315448）、ヘッダーテキストを白にします。文字サイズと角丸の操作部品は既定のままにします。
2. Branding → AI Agent Avatarでアバターのアップロードアイコンをクリックし、キットのwebsite/kestrel-avatar.pngを選択して、切り抜きダイアログでUploadを選択します。
3. Widget window max widthを400px、Widget window max heightを520pxに設定します。ランチャーのサイズにSmallを選び、右側に配置し、ラベルをAsk about your kitchenにします。ラベルは小さいランチャーで利用できます。サイトのCookieバナーや他のフローティング操作部品と重ならないか、プレビューで位置を確認します。
4. Auto-open Widgetはオフのままにします。ページの読み込みごとにウィジェットが開くと、特にスマートフォンでは閲覧の妨げになります。

配色を選びながらプレビューを確認します。ランチャーはサイトの操作部品と同じ領域を使うため、実際のウェブサイトでのテストも必要です。

固定テキスト（Text Content）

Text Contentを開き、以下の値を設定します。

会話のきっかけは、役に立つ用件から始められるものにします。免責事項では、どの判断にデザイナーが必要かを伝えます。

エージェントは訪問者の言語で返信できます。固定のウェルカムメッセージとウィジェットのラベルの翻訳は、Other languagesにある別の設定で、有料プランで利用できます。多言語サイトでは、返信と固定のインターフェーステキストの両方をテストしてください。多言語チャットボットガイドで、その違いを説明しています。

外観の変更がキャッシュされた訪問者のセッションに反映されるまで、数分かかることがあります。保存が失敗したと判断する前に再読み込みしてください。Hide Quickchat AI BrandingにはProfessional以上が必要です。ホワイトラベル化の手順では、他に確認すべき表示箇所も扱っています。

ステップ6：ウェブサイトにチャットボットを設置する

サイト共通のレイアウトにWidgetを設置するか、対応するプラットフォーム連携を使います。フローティング型のWidgetは、訪問者が閲覧しているページ内で実行する必要があります。

1. Channels → Your Website → Installを開きます。
2. 公開ウィジェット用のWidget & Embed accessを有効にします。
3. ウェブサイトに合った設置方法を選び、このエージェント用に表示されたスニペットまたはScenario IDをコピーします。
4. 変更を公開し、公開サイトを開いて、Knowledge Baseに答えがあると分かっている質問をします。

このエージェントのInstall画面からコピーします。Scenario IDは公開ウィジェットの識別子であり、非公開のAPIキーではありません。

任意のウェブサイト：bodyの閉じタグの前にWidgetスニペットを貼り付ける

Install manually with codeを選択し、Widgetスニペットをコピーします。現在のローダーは次の形式です。

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("init", "YOUR_SCENARIO_ID");
</script>

YOUR_SCENARIO_IDをInstallに表示された値に置き換えます。共通レイアウトの</body>の直前に、スニペット全文を一度だけ貼り付けるか、ビルダーのサイト全体用フッター欄を使います。このローダーはページのbodyにスクリプトを挿入するため、bodyがまだ存在しない段階でhead内に配置すると、読み込みに失敗する場合があります。

配置場所が重要です。iframe形式のHTMLブロックは別のページであり、このフローティング型Widgetには適しません。

別の選択肢であるEmbedは、ページ内のコンテナーにチャットを配置します。インラインのチャット領域を設けたい場合は、そこで生成されるスニペットを使います。ページにコードを直接挿入するHTMLブロックなら、この形式に対応できます。コードをiframeに隔離するビルダーのブロックは別のケースです。Websiteチャネルのドキュメントを参照してください。

WordPress：公式プラグインをインストールする

1. WordPressでPlugins → Add Newを開き、Quickchat AI Agentを検索して、Install Now、Activateの順に選択します。
2. Settings → Quickchat AI Agentを開きます。
3. Quickchat AIのInstall画面からScenario IDを貼り付け、Save Changesを選択します。
4. 公開ページを開いてウィジェットを確認します。ローダーを二重に設置しないよう、プラグインか手動スニペットのどちらかを使ってください。

プラグインを利用できるWordPress環境とプランが必要です。WordPressチャットボットガイドでは、プラグインの画面とWordPress固有の確認事項を紹介しています。

Squarespace：フッターへのコード挿入を使う

1. サイトのCode Injectionパネルを開きます。アカウントによってナビゲーションが異なる場合は、ダッシュボードの設定検索を使います。
2. Widgetスニペット全文をFooterに貼り付けて保存します。
3. 公開ページを別のブラウザータブで開き、回答をテストします。

SquarespaceのCode InjectionはCore、Plus、Advanced、および一部の旧プランで利用できます。フッターへの挿入では、サイト全体の</body>の前にコードが置かれます。フローティング型ウィジェットにはこの設定を使ってください。ページ単位のiframeブロックは同じものではありません。このカスタムコードはSquarespaceのチェックアウトページには適用されません。

Wix：カスタムコードをBody - endに配置する

1. サイトのダッシュボードでSettings → Custom Codeを開き、+ Add Custom Codeを選択します。
2. Widgetスニペットを貼り付け、Quickchat AI widgetという名前を付けます。
3. All pagesに適用し、Body - endを選んでApplyを選択します。
4. 他のページへの移動も含めて、公開サイトをテストします。

Wixでカスタムコードを使うには、ドメインを接続した公開済みサイトが必要です。このフローティング型ウィジェットには、サイト全体のCustom Code設定を使います。

Webflow：フッターコードを設定して公開する

1. Site settings → Custom codeを開きます。
2. WidgetスニペットをFooter codeに貼り付け、Save changesを選択します。
3. 対象のドメインにPublishし、その公開URLでテストします。

Webflowのカスタムコード設定には、対象となる有料Workspaceまたは有効なSiteプランが必要です。設定を保存するだけでは公開されません。

Shopify：既存エージェントのスニペットかShopifyアプリを選ぶ

作成済みのKestrelエージェントを使う場合は、Online Store → Themes → Edit code → layout/theme.liquidの</body>の直前にWidgetスニペットを追加し、保存してストア画面を確認します。編集前にテーマのバックアップを取り、テーマ変更後は設置を再確認してください。この方法では選択したエージェントが表示されますが、商品や注文のActionsは設定されません。

ストア向けのエージェントを使う場合は、Quickchat AI Shopifyアプリの設定で専用のオンボーディングを通じてストアを接続します。接続後にEnable Widget in Shopify Theme Editorを使うか、Online Store → Themes → Edit theme → App embedsを開きます。Quickchat AI Widgetを有効にして保存します。Shopifyのアプリ埋め込みのドキュメントで、テーマ側の操作を説明しています。公開テーマを切り替えた場合は、アプリ埋め込みを再度有効にしてください。

上記の各ビルダーの手順は公式ドキュメントと照合しています。手順中のスクリーンショットはKestrelのサンプルサイトと実際のローカルウィジェットを示しており、各ビルダーにログインした画面ではありません。

エージェントの問題を調べる前にスニペットを確認する

以下の任意のチェックは、入力した値を対象に動作します。

• Widgetスニペットを確認する。貼り付けたコードを入力したScenario IDと照合します。ウェブサイトを取得する機能ではありません。
• 導入方法を比較する。申告したチャネル、ウェブサイトへのアクセス、必要な機能をQuickchat AIの設定方法と照合します。ウェブサイトやアカウントを調査する機能ではありません。

対応ブラウザーでは、これらのチェックをサイトツールとしても使えます。リンクからは通常のフォームが開きます。

ステップ7：訪問者に公開する前にチャットボットをテストする

回答、保存データ、返信の到達を個別にテストします。AI PreviewとSimulation Testingは振る舞いの評価に役立ちます。設置したウィジェットを訪問者が使えることは、公開ウェブサイトで確認します。

Simulation Testingで独立した質問を実行する

Testing → Create Datasetを開き、Kestrel Kitchens: website launch checksという名前を付けてPaste messagesを選択します。以下の所要期間、価格、ローンに関する質問を追加し、質問間に---だけの行を挟みます。改行だけでは、テキストが1つのテストメッセージにまとまります。Evaluation criteriaでは事実の正確さと返信の簡潔さを確認するよう設定し、Run → Start Runを選択します。キットには、使用したメッセージと評価基準がそのまま含まれています。

データセットの各行で別の会話が始まります。こうした独立した質問にはSimulationを使い、複数ターンの見積もり依頼と担当者への引き継ぎは、1つのAI Previewまたはウェブサイト上の会話で確認します。会話記録の評価だけでは外部への配信を検証できないため、Actionのログと受信先は別途確認してください。

完了した実行を開き、返信を確認します。この価格の回答には計画段階の価格帯が残っていますが、返信のスコアは別システムへの配信を証明するものではありません。

独立したケースごとに新しい会話を使います。ページを再読み込みしても既存の会話が再開されることがあるため、新規テストにはウィジェットの新しいチャットを始める操作を使ってください。

スマートフォンでウェブサイトを確認する

画面幅が768 CSSピクセル未満の場合、開いたウィジェットは全画面表示になります。開く操作、キーボードを表示した状態での入力、会話のスクロール、閉じてサイトに戻る操作を確認します。

最後に、実際に担当者がInboxから返信します。AIの回答が正しくても、有人サポートの経路が機能する証明にはなりません。情報源、プロンプト、Actions、サイトのテーマを変更した後は、これらから少数のチェックを選んで繰り返します。

ステップ8：必要事項がそろった問い合わせをCRMに送信する

オプションのAPI Actionでは、会話中に必須情報がすべてそろった後、保存済みフィールドをHTTPの受信先へ送信できます。この拡張がなくても、基本のウェブサイトチャットボットはすでに利用できます。

連絡先情報を取得した状態と問い合わせの必要事項がそろった状態を区別することが重要です。Quickchat AIは、氏名を含む標準の連絡先フィールドを新たに取得すると、lead_capturedを設定します。このフラグだけでは、メールアドレス、郵便番号、工事の種類がそろっているとは判断できません。

プラットフォームがすべての条件を確認します。モデルは情報を収集し、条件はリクエストを実行可能にするタイミングを決めます。

受信先を準備する

以下のJSON本文を受け付ける、自分で管理するCRMまたは自動化用のエンドポイントを使います。キットには、CRMを接続する前にリクエストを確認したい読者向けの、小さなローカルデモ用受信サーバーが含まれています。その設定手順では非公開トークンを作成し、一時的なHTTPSエンドポイントを公開する方法を説明しています。デモ用受信サーバーに送るのは架空のテストデータだけにしてください。

管理された連携を使う場合は、Google Sheetsレポート作成チュートリアルまたはカスタムCRM連携の手順に従ってください。同じ見込み顧客を作成するワークフローを2つ同時に有効にしないでください。

自動実行のAPI Actionを1つ設定する

1. Actions & MCPs → Custom Actions → Add Action → API Actionを開きます。説明文から作成するビルダーが開いた場合は、Create manuallyを選択します。
2. API Action NameをSend quote enquiryに設定します。
3. What to ask the user firstは空のままにします。このActionはSmart Data Gatheringが保存したフィールドを読み取るため、モデルに別のパラメーター一式を埋めるよう求めるものではありません。
4. API EndpointでPOSTを選択し、受信先のHTTPS /enquiries URLを入力します。
5. 以下のヘッダー、本文、条件を追加してから保存し、Actionを有効化します。

トークンはActionのヘッダー設定だけに入力します。プロンプト、ウェブサイトのスニペット、訪問者との会話には含めないでください。デモ用受信サーバーのREADMEには生成方法が記載されています。実際の連携では、CRMのドキュメントで指定された認証方法を使ってください。

BodyタブでJSONを選択し、以下を入力します。

{
  "conversation_id": "{{conversation_id}}",
  "name": "{{metadata_visitor_name}}",
  "email": "{{metadata_visitor_email}}",
  "postcode": "{{metadata_postcode}}",
  "project_type": "{{metadata_project_type}}"
}

Add AI Dataで、対応する組み込みの値とメタデータの値を挿入します。conversation_idは会話を識別します。それ以外の値は保存済みフィールドから取得します。英語の連絡先項目名はvisitor_nameとvisitor_emailに対応し、Project typeはproject_typeになります。変数のドキュメントで、この対応付けを説明しています。

When to runでWhen metadata matchesを選択します。Run whenに5行すべてを追加します。メタデータの条件はANDで結合されます。

これらのテキストフィールドでは、is trueは空の値と偽に相当するテキストの両方を拒否します。existsはキーの存在だけを確認するため、保存された空文字列でも条件を通過することがあります。以下のテストで、より厳しい条件が必要な理由を示します。これは利用可能なテキストが提供されたことを確認するものであり、訪問者の身元や物件情報を独立して検証するものではありません。

API Action Descriptionには以下を使います。

Send a quote enquiry to the design team when the visitor has provided their full name, email, postcode and project type. This records an enquiry only; it does not book a survey or confirm a price.

保存した5つの条件のうち最初の2つです。表のすべての行を追加してください。When metadata matchesは、エージェントがActionを選択しなくても、AIのターンの後に条件を確認します。

すべての条件が一致すると、Actionは会話ごとに1回実行を試みます。任意の希望時期が後から伝えられても再実行されず、送信したリクエストが失敗しても、その会話では自動再試行されません。希望時期はデザイナー向けにInboxへ残すか、CRMで後の変更も必要な場合は、作成と更新を明示的に行う連携を構築してください。

リクエストはAIのターンの後に実行され、そのレスポンスはチャットに挿入されません。そのためMain Promptでは、訪問者の情報を受け取ったと伝えつつ、CRMが受け付けたとは主張しないようにしています。配信はActionのログと受信先で確認します。自動実行Actionのドキュメントで、この実行時の振る舞いを説明しています。

一部のデータから必要事項がそろうまでをテストする

最初のバージョンでは、必須のテキストフィールドにexistsを使っていました。Samが氏名を伝え、次のメッセージでメールアドレスを伝えました。Smart Data Gatheringは郵便番号と工事の種類に空の値をすでに作成していたため、キーは存在しており、Actionが不完全なリクエストを送信しました。これで、その会話に1回だけの実行機会も使い切りました。

修正では4つのテキストフィールドの条件をis trueに変更し、それ以外の設定はそのままにしました。新しい会話でテストを繰り返し、2ターン目にはメールアドレスだけを伝えます。Actionは残りの工事情報がそろうまで待つ必要があります。

これは1つの会話で観測した結果であり、本番環境の成功率ではありません。新しい会話で再現し、各ターンの後に保存済みフィールドを確認して、自分のエンドポイントでリクエストを確認してください。

実際のAction呼び出しではHTTP 201が返りました。詳細を開いてリクエストを確認してください。以下の保存レコードは、受信先に保存された内容を示しています。

認証付きのデモ用受信サーバーに実際に保存された1件のレコードです。これは問い合わせであり、見積もりや予約の確定ではありません。

デモではローカルの受信サーバーを使い、実際のHTTP配信を記録しました。ホストされているQuickchat AIエージェントには、外部から到達可能なHTTPSエンドポイントが必要です。自分のコンピューター上のlocalhost URLには、サービス側からアクセスできません。

何も届かない場合は、ActionのView logsと会話に保存されたメタデータを確認します。値の不足、Actionの無効化、HTTPの失敗では、それぞれ対処が異なります。設定を修正し、新しい会話で自動トリガーを再テストしてください。同じチャットで再試行を頼んでも、会話ごとに1回の実行機会はリセットされません。

チャットボットが表示されない、または古い設定が表示される場合

プロンプトを変更する前に、公開ページ、設置場所、エージェントへのアクセスを確認します。ブラウザーでの読み込みの問題と、回答品質の問題は別です。

ブラウザーがリソースのブロックを報告した場合は、具体的なContent Security Policyまたはブロッカーのエラーを調べます。サイトの保護を一括で無効にすることは避けてください。公開ページをHTTPSでテストし、必要な設定はチャネルのドキュメントで確認します。

ウェブサイトのチャットボットにかかる費用

サブスクリプションと利用枠はAIサービスに対する費用です。ウェブサイトのプランと任意の連携には別途費用がかかります。

1 AIクレジットが1つの会話に相当するわけではありません。1つの会話に複数のAI返信が含まれることがあり、選ぶモデルによって消費クレジットが異なる場合もあります。テスト予算にはPreviewとSimulationも含めてください。現在の料金と利用枠とチャットボット費用ガイドを使って、利用量を見積もります。

ChatGPTやClaudeでチャットボットの設定を進める

Quickchat AIのアカウント管理用接続を使うと、対応するアシスタントがこれらのファイルを基に、対応範囲内のエージェント設定とテスト準備を行えます。

Manage with AIガイドに従い、ChatGPTのQuickchat AIまたはClaudeのQuickchat AIから自分のアカウントを接続します。対応ツールでは、ナレッジ、Main Prompt、会話のきっかけ、Human Handoff、HTTP Actions、テスト、設置用スニペットを扱えます。

Smart Data Gatheringとウィジェットの詳細なAppearance設定はダッシュボードで完了してください。外部アカウントの認証と、ウェブサイト設定へのスニペット設置も必要です。このアカウント接続はエージェントを管理するためのものであり、エージェントをMCPツールとして公開することとは別です。

Use the Kestrel Kitchens website-chatbot kit to prepare a separate learning Agent. Do not change existing Agents. Set its name to Kestrel Kitchens, add knowledge.txt and set main-prompt.txt as Main Prompt. Configure the supported greeting, conversation starters and Human Handoff settings from the kit. Prepare the launch-test dataset with the supplied messages and criteria. Read back the saved configuration and return this Agent's current Widget snippet.
List the remaining dashboard steps for Smart Data Gathering, Appearance and website installation. Do not invent support for those settings. Leave the optional Send quote enquiry Action inactive until I provide my receiver URL and configure its credential. Before running tests or external writes, tell me the expected credit use and effects and obtain any approval required by this client. Do not claim that a website, email or CRM delivery works until it has been tested.

よくある質問

ウェブサイトにAIチャットボットを追加するには？

Quickchat AIでエージェントを作成し、自社のナレッジを追加して、Main Prompt、Smart Data Gathering、Human Handoffを設定します。その後、プラグインまたは付属のスニペットでWidgetを設置します。公開サイトで、情報源に基づく回答、連絡先情報の保存、担当者の返信の到達をテストしてください。

カスタムChatGPTをウェブサイトに追加できますか？

自社のページを学習させたChatGPTのようなアシスタントを追加できます。このチュートリアルでは、Quickchat AIエージェントをウェブサイトのウィジェットで公開するため、訪問者はChatGPTにログインせずにサイト上で会話できます。ナレッジ、指示、連携はQuickchat AIで管理します。

ウェブサイトに無料でAIチャットボットを追加できますか？

Quickchat AIのFreeプランは個人の非商用学習向けで、毎月50 AIクレジットが含まれます。企業のウェブサイトや、顧客向けの営業・サポートに導入する場合は、商用利用を許可するプランが必要です。サイトビルダーのサブスクリプションは別途必要で、テストもAIクレジットを消費します。

コードの作成やAPIキーの提供は必要ですか？

基本の設定には、ダッシュボードの設定と、プラグイン、アプリ埋め込み、または付属のスクリプトを使います。ウェブサイト用スニペットに含まれるのは公開のScenario IDであり、非公開のAPIキーではありません。オプションのCRM Actionを接続するには、適切なエンドポイントと認証が必要です。その認証情報はActionの設定に保存してください。

ウェブサイトのチャットボットで見込み顧客情報や見積もり依頼を収集できますか？

はい。Smart Data Gatheringは会話中に指定した項目を尋ね、Inboxに保存します。Email new leadsは、メールアドレスまたは電話番号を取得した後にエージェントの管理者へ通知できます。API Actionでは、保存済みの必須フィールドを設定した受信先に送信できます。氏名を取得しただけでは、問い合わせの必要事項がそろったことにはなりません。

担当者がチャットを引き継げますか？

はい。Human Handoffで対応時間と時間外メッセージを設定します。Inboxで未割り当ての会話にはAssign to meを選択し、Take overが表示されている場合はそれを選んで、訪問者に返信します。Reassign to AIで会話をエージェントに戻せます。

WordPress、Shopify、Squarespace、Wix、Webflowで使えますか？

それぞれに設置方法があります。WordPressでは公式プラグイン、Shopifyではストア用エージェントを接続した後にアプリ埋め込みを使います。既存のエージェントには、サイト全体のフッターまたはbody末尾に置く適切なスニペットも使えます。プラグインの権限やカスタムコードを使えるプランの条件は、ビルダーによって異なります。

ウェブサイトにチャットボットが表示されないのはなぜですか？

公開ページ、正しいScenario ID、ページのbody末尾へのスニペット配置を確認してください。古い重複した設置を削除し、フローティング型Widgetにはiframe形式のブロックを使わないでください。開くものの回答できない場合は、Widget & Embed accessと利用可能なAIクレジットを確認します。

チャットボットでウェブサイトが遅くなりますか？

ウィジェットのローダーは非同期でダウンロードされますが、JavaScriptとネットワークリクエストは追加されます。代表的なページとスマートフォンで、設置前後の読み込みと操作の性能を比較してください。非同期読み込みだからといって、性能への影響がゼロになるわけではありません。

ウェブサイトのチャットボットはスマートフォンで使えますか？

開いたウィジェットは768 CSSピクセル未満で全画面表示になります。スマートフォンでランチャー、キーボード、スクロール、閉じる操作をテストしてください。自動的に開くと閲覧を妨げる場合は、Auto-open Widgetをオフのままにします。

チャットボットは訪問者の言語で回答できますか？

エージェントは訪問者の言語で返信できます。固定のウェルカムテキスト、会話のきっかけ、ウィジェットのラベルの翻訳は、有料プランの別設定です。対応予定の各言語で、回答の事実とインターフェースのテキストの両方をテストしてください。