AIチャットボットをホームページに埋め込む方法は、大きく分けて2つです。1つはノーコードツールで自分で設置する方法、もう1つは自社データを学習させたオーダーメイド開発です。ツールの管理画面で発行されたコードをサイトに貼り付けるだけなら、アカウント登録から表示まで最短1時間ほどで完了します。ただし、「自社の料金や営業時間に正確に答える」「専門的な問い合わせをさばく」といった実用レベルを目指すなら、自社データを学習させる仕組みが欠かせません。この記事では、設置手順・FAQ自動応答の作り方・費用相場・失敗しないポイントまで、導入の判断ができるように解説します。
AIチャットボットをホームページに埋め込む方法は2つ（ノーコード vs オーダーメイド）
まず全体像です。AIチャットボットの埋め込みは、「ノーコードツールで設置する」か「自社データを学習させたオーダーメイド（RAG型）を開発する」かの2択で考えると整理しやすくなります。RAG（Retrieval-Augmented Generation＝検索拡張生成）とは、回答を作る前に自社のFAQや資料を検索し、その内容に基づいて答えさせる仕組みのことです。これにより、AIが事実に基づかない回答（ハルシネーション）をするリスクを抑えられます。
どちらが正解ということはなく、目的・予算・求める回答精度によって最適解は変わります。下の比較表で違いを確認してください。
比較項目 | ノーコードツール | オーダーメイド開発（RAG型） |
|---|---|---|
設置の手軽さ | 管理画面でコード発行→貼り付けのみ。最短1時間程度 | 要件定義・データ整備・開発が必要（数週間〜） |
回答の精度・専門性 | 登録できるデータ量に制限。汎用的な応答が中心 | 自社データを深く学習。専門的な質問にも対応しやすい |
カスタマイズ性 | デザイン・機能はツールの範囲内 | UI・連携・回答方針まで自由に設計可能 |
外部システム連携 | 限定的（予約・CRM連携などは制約あり） | 予約システム・社内DB・LINE等と柔軟に連携 |
初期費用 | 無料〜数万円（プラン次第） | 約50万〜500万円以上（規模による） |
向いているケース | まず試したい／一般的な案内で十分 | 正確な接客・売上貢献を本気で狙いたい |
結論として、「とりあえず試す」ならノーコード、「自社に正確に答えさせて成果を出す」ならオーダーメイドという棲み分けになります。小規模事業者がまず効果を体感する流れについては、小規模事業者向け24時間接客AIの効果と始め方もあわせて参考にしてください。
ホームページへの設置手順（スクリプトタグ方式・iframe方式）
埋め込みの実装方式は主に2種類あります。スクリプトタグ方式（ウィジェット型）とiframe方式（埋め込み枠型）です。それぞれ貼り付け場所と見え方が異なるため、目的に合わせて選びます。多くのツールでは、アカウント登録からコード発行までが10分程度、サイトへの貼り付けまで含めても1時間以内に表示できます。
スクリプトタグ方式（画面右下に浮かぶウィジェット型）
スクリプトタグ方式は、JavaScriptのコードを読み込ませることで、画面の右下などにチャットの吹き出しボタンを常時表示する方式です。サイトのどのページからでも話しかけられるため、問い合わせ窓口として最も一般的です。設置は、ツールが発行する<script>タグを、HTMLの</body>の直前に貼り付けるだけです。
たとえばノーコードツールのChatbase（チャットベース）では、管理画面の「Embed on site（サイトに埋め込む）」から、ウィジェット用のscriptスニペットを発行できます。bodyの末尾に貼ると表示パフォーマンスへの影響を抑えられるため、原則としてページ下部への配置が推奨されます。
iframe方式（ページ内の指定位置に埋め込む）
iframe（インラインフレーム＝Webページ内に別ページを表示する枠）方式は、ページ内の好きな場所にチャット画面そのものを埋め込む方式です。「お問い合わせページ全体をチャット画面にしたい」「FAQページの中にチャット枠を置きたい」といった用途に向いています。発行された<iframe>タグを、表示したい位置のHTMLに貼り付けます。
ChatbaseやDify（ディファイ）などのツールでは、scriptとiframeの両方のスニペットを選んで発行できます。浮かぶボタンが欲しいならscript、ページ内に固定で見せたいならiframeと覚えておくと選びやすくなります。
WordPressへの埋め込み
WordPress（ワードプレス）の場合、テーマのHTMLを直接触らずにコードを挿入できる「WPCode」などのプラグインが安全です。WPCodeは「Insert Headers and Footers」機能でヘッダー・フッターにコードを差し込めるため、テーマを更新してもコードが消えません。チャットボットのscriptタグは、フッター（body末尾）に貼り付けるのが基本です。
プラグインを使わない場合は、子テーマのfunctions.phpにフック（WordPressの拡張ポイント）を使って挿入する方法や、header.phpを直接編集する方法もあります。ただし直接編集はテーマ更新で上書きされるリスクがあるため、初心者にはプラグイン方式をおすすめします。
Next.jsへの埋め込み
Next.js（ネクストジェイエス＝Reactベースのフレームワーク）では、通常の<script>を直書きするのではなく、専用のnext/scriptコンポーネントを使うのが定石です。全ページに表示したい場合は、共通レイアウト（app/layout.tsxなど）の中に<Script>を置き、ページ全体で1度だけ読み込まれるようにします。
読み込みタイミングはstrategyで指定でき、ページの表示を妨げにくい設定を選ぶのが一般的です。実装の細部はツールやバージョンで変わるため、各ツールの公式ドキュメントを確認しながら進めてください。なお自社サイトをこれから作るなら、Next.jsとWordPressのどちらを選ぶかでチャットボットの組み込み方も変わります。
FAQ・問い合わせ自動応答の作り方
チャットボットを設置しただけでは、「自社のこと」には答えられません。FAQや問い合わせの自動応答を実用レベルにするには、自社の情報をAIに渡して回答の根拠にする必要があります。手順の大枠は次のとおりです。
- 想定質問を洗い出す：実際に多い問い合わせ（料金・営業時間・予約方法・キャンセル規定など）をリスト化する。
- 回答用データを整える：FAQ文書・サービス資料・サイトのページなどを、AIが読みやすい形に整理する。
- AIに学習・参照させる：ツールにデータを取り込むか、RAGで検索対象として登録する。
- テストと修正：実際に質問して誤りを確認し、データや指示文（プロンプト）を調整する。
誤回答を放置すると顧客の信頼を損なうため、公開後も定期的なテストと改善が前提になります。
自社データを学習させるには（RAG）
「自社に正確に答える」ための鍵がRAGです。RAGは、ユーザーの質問に対してまず自社データの中から関連情報を検索し、その内容に基づいて回答を生成します。AIに架空の情報を作らせず、根拠のある回答に近づけられるのが最大の利点です。
ノーコードツールでも、DifyのようにRAG機能を標準搭載し、FAQや社内文書を取り込んでチャットボットを作れるものがあります。一方、データ量が多い・社内システムと連携したい・回答方針を細かく制御したいといった場合は、オーダーメイドでのRAG構築が向いています。士業や専門サービスのように回答の正確さが重視される業種での活用例は、士業・専門サービスサイトのAIチャット導入で詳しく解説しています。