どんなWebサイトにも5分でチャットボットを設置する方法

Convly ChatBuilder を使えば、HTML に数行のコードを追加するだけで、既存サイトにチャットボットを設置できます。WordPress でも、Astro や Next.js などの静的サイトでも、手順は同じです。この記事では「準備 → 設置 → 公開前チェック」の 3 ステップで、初めての設置を最短で終わらせる方法を紹介します。

この記事でわかること

設置前に整理しておくべき 3 つの準備項目
埋め込みコードの取得から配置までの手順
公開前に確認すべきチェックリスト
よくある設置トラブルと対処法

結論：チャットボット設置で重要な 3 つのポイント

最初の対応範囲は絞る — 問い合わせが多い上位 3〜5 件の質問だけカバーすれば十分です
設置ページは 1 ページから始める — 最もアクセスが多いページ、または問い合わせ導線のあるページから検証します
有人対応への切り替え導線は必ず残す — チャットだけで完結しない質問に備え、フォームや電話への導線を消さないようにします

この方法が向いているケース

問い合わせフォームの手前で離脱が多い
FAQ はあるが、読まれずに同じ質問が繰り返し来る
まずは 1 ページだけで小さく検証したい
開発を大きく入れずに、既存サイトへ導線を追加したい

ステップ 1：設置前の準備

チャットボットを設置する前に、次の 3 点を整理すると作業がスムーズになります。

1-1. 対象ページの URL を決める

設置するページを 1 つ選びます。おすすめは以下のいずれかです。

候補ページ	おすすめの理由
トップページ	アクセスが多く、効果測定しやすい
問い合わせページ	フォーム離脱をチャットで補完できる
料金ページ	比較検討中のユーザーが多く、質問が出やすい

最初から全ページに設置すると改善対象が広がりすぎるため、まずは 1 ページで検証してから展開するのが安全です。

1-2. 対応する質問を 3〜5 件に絞る

よくある質問をすべてカバーしようとすると初期構築に時間がかかります。まずは問い合わせ履歴やサポート対応の記録から、以下の条件に合う質問をピックアップします。

頻度が高い：同じ質問が月に 5 回以上来ている
回答が定型化できる：条件分岐が少なく、1〜2 文で答えられる
回答が変わりにくい：料金、対応時間、対象エリアなど

1-3. チャットで解決できない場合の導線を決める

チャットボットが回答できない質問が来たとき、ユーザーをどこに誘導するかを決めます。

問い合わせフォームへのリンク
電話番号の表示
メールアドレスの表示

この導線を先に決めておくと、チャットのシナリオ設計で「最後にどこへ誘導するか」を迷わずに済みます。

ステップ 2：ChatBuilder でシナリオを作成して埋め込む

準備が終わったら、Convly ChatBuilder の管理画面でシナリオを作成し、埋め込みコードを取得します。

2-1. シナリオを作成する

ChatBuilder の管理画面にログインし、新しいシナリオを作成します。ステップ 1 で整理した質問と回答を登録します。

ポイントは次の通りです。

挨拶メッセージ は短くする（「こんにちは。ご質問をお気軽にどうぞ。」程度）
選択肢型 と 自由入力型 を使い分ける。最初は選択肢型が安全です
回答の末尾 に「この回答で解決しましたか？」のような確認を入れると改善に使えます

2-2. 埋め込みコードを取得する

シナリオの作成が完了したら、管理画面から埋め込みコードを取得します。実際の URL や属性名は、管理画面で表示されたコードをそのまま使ってください。改行の有無や属性の順番は動作に影響しないため、1 行でも複数行でも問題ありません。記事では読みやすさのために複数行で示します。

ChatBuilder 管理画面の埋め込みコードコピー画面

<script
  src="https://app.convly.jp/embed.js"
  defer
  data-scenario-id="YOUR_SCENARIO_ID"
  data-supabase-url="YOUR_SUPABASE_URL"
></script>

管理画面で表示されたコードをそのまま使えば問題ありません。defer は必須ではありませんが、ページの初期描画を止めにくくするため、基本的には付けたまま使うことをおすすめします。

2-3. 対象ページに貼り付ける

取得した <script> タグを、設置したいページの </body> 直前に貼り付けます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サイトのタイトル</title>
</head>
<body>
  <!-- ページのコンテンツ -->

  <!-- ChatBuilder の埋め込みコード -->
  <script
    src="https://app.convly.jp/embed.js"
    defer
    data-scenario-id="YOUR_SCENARIO_ID"
    data-supabase-url="YOUR_SUPABASE_URL"
  ></script>
</body>
</html>

WordPress の場合は、テーマの footer.php に追加するか、コード挿入系のプラグインを使って </body> 直前に配置します。なお、Convly ChatBuilder の WordPress 専用プラグインは現在申請中のため、現時点ではこの埋め込みコード方式を正式な設置方法として案内します。

ステップ 3：公開前チェックリスト

コードを配置したら、公開前に以下の項目を確認します。

動作確認

チャットウィジェットが表示されるか
質問を送信して、想定通りの回答が返ってくるか
回答できない質問に対して、フォームや電話への導線が表示されるか

モバイル表示

スマートフォンでウィジェットが画面を覆いすぎていないか
チャットの開閉操作がスムーズにできるか
入力時にキーボードでチャット画面が隠れないか

パフォーマンス

ページの読み込み速度が大きく遅くなっていないか
defer 属性を付けているか（ページの描画を妨げないようにする）

既存導線との整合

問い合わせフォームや電話番号への導線は残っているか
チャットとフォームで案内内容が矛盾していないか

よくある設置トラブルと対処法

チャットウィジェットが表示されない

原因 1：埋め込みコードの ID や属性が誤っている → 管理画面で発行されたコードを貼り直す
原因 2：CSP（Content Security Policy）で埋め込み先がブロックされている → サーバーの CSP 設定で必要な script-src と connect-src を確認する
原因 3：JavaScript がページ内のエラーで止まっている → ブラウザの開発者ツールでコンソールエラーを確認する

モバイルでウィジェットが大きすぎる

モバイルでの見え方は、埋め込み先ページの CSS やレイアウトの影響も受けます。表示が大きすぎる、または重なり方に違和感がある場合は、ウィジェット周辺の z-index やポジション指定を確認してください。

回答が返ってこない

シナリオや公開設定が反映されているか、管理画面側で確認してください。コード自体は表示されても、公開設定や接続先の不整合で応答しないことがあります。

FAQ

Q. WordPress 以外のサイトでも設置できますか？

はい。ChatBuilder は HTML の <script> タグで動作するため、HTML を編集できる環境であれば WordPress、Shopify、Wix、Astro、Next.js など、どのプラットフォームでも設置できます。

Q. 設置にかかる費用はありますか？

ChatBuilder の料金体系は、Convly ChatBuilder のページをご確認ください。埋め込み自体は大きな追加開発を伴いにくい一方で、シナリオ設計や改善には別途運用工数がかかります。

Q. 複数ページに設置する場合、ページごとにシナリオを分ける必要がありますか？

必須ではありませんが、ページの目的が異なる場合はシナリオを分けるのが効果的です。たとえば、料金ページには料金に関する FAQ を、サポートページには使い方に関する FAQ を設定すると、回答精度が上がります。

Q. 設置後の効果はどこで確認できますか？

まずは ChatBuilder の公開状態やシナリオ設定を確認したうえで、Google Analytics などの計測基盤で「チャット開始」「問い合わせ遷移」「完了率」を追うと判断しやすくなります。必要に応じて、管理画面で確認できる利用状況もあわせて見てください。

次のステップ

チャットボットを設置したら、次は対応範囲を広げる前に、まず効果を測定しましょう。

関連記事: FAQページを改善して問い合わせを減らす方法 — チャットボットと FAQを組み合わせて自己解決率を上げる方法を解説しています
関連記事: Convly ChatBuilderで問い合わせフォームをチャットに置き換える手順 — フォームからチャットへの段階移行を検討している方向けのガイドです
ChatBuilder を試す: Convly ChatBuilder — 管理画面からシナリオを作成して、今すぐ設置を始められます