マーケティングコラム ホームページにチャットボットを設置する方法｜HTML・WordPress・Wix・STUDIO、無料でできる手順

ホームページの右下に出ている「ご質問はありますか？」というチャット。あれは、ほとんどの場合ツールが発行したタグを、サイトに数行貼っているだけです。

サイトを作り直す必要も、プログラムを書く必要もありません。ただ、貼る場所を間違えると表示されなかったり、一部のページにしか出なかったりします。

この記事では、ホームページにチャットボットを設置する手順を、HTMLのサイト・WordPress・Wix・STUDIO・Jimdoに分けて説明します。会話の中身の作り方は「チャットボットの作り方｜シナリオ型とAI型、無料で始める手順」で解説しています。

タグ1行で置けるチャットボットは、Web接客 by grip space で無料から使えます。クレジットカードの登録は不要です。 Web接客 by grip space を見る

設置の流れ（5ステップ）

どのツールを使っても、流れはほぼ同じです。

• 1ツールに登録する ── 無料プランのあるツールに登録し、チャットボットを出したいサイトの URL を登録します。
• 2タグをコピーする ── 管理画面で発行されたタグ（数行のコード）をコピーします。
• 3サイトにタグを貼る ── サイトのすべてのページの head に貼ります。貼り方はサイトの作り方で変わります（次の章）。
• 4チャットボットを作って公開する ── 会話の流れを作り、出すページとタイミングを決めて公開します。
• 5表示を確かめる ── パソコンとスマートフォンの実機で、表示と会話の動きを確かめます。

タグを貼る作業（ステップ3）は最初の1回だけです。あとからチャットボットの中身を変えても、貼り直す必要はありません。

タグを貼る場所

タグを貼る場所は、ツールの説明に従ってください。いちばん多いのは、head タグの中、</head> の直前です。

<head>
  <meta charset="utf-8">
  <title>会社名</title>
  …
  <!-- ここにチャットボットのタグを貼る -->
</head>

ポイントは2つです。

• すべてのページに貼る：チャットボットを出したいページだけに貼るより、全ページに貼っておき、どのページに出すかはツールの管理画面で決めるほうが、あとで変えやすくなります。
• タグは1つのページに1回だけ：同じタグを二重に貼ると、チャットボットが2つ出たり、表示回数を二重に数えたりすることがあります。

サイトの作り方別の貼り方

Wix・STUDIO・Jimdo の画面の名前と、コードを追加できるプランの条件は、各サービスの仕様変更で変わることがあります。設置の前に、各サービスの公式ヘルプで確認してください（2026年11月時点の情報です）。

HTMLのサイト

サイトのファイルをテキストエディタで開き、各ページの </head> の直前にタグを貼って、サーバーにアップロードし直します。ページ数が多い場合、共通のヘッダー部分を1つのファイルから読み込む作りになっていることがあります。その場合は、そのファイルに1回貼れば全ページに入ります。制作会社に作ってもらったサイトで仕組みが分からないときは、「全ページの head にこのタグを入れてほしい」と頼めば伝わります。

WordPress

WordPress では、テーマのファイル（header.php など）を直接書き換えるより、プラグインで入れる方法をおすすめします。テーマのファイルに書いたタグは、テーマを更新したときに消えることがあるためです。head にコードを入れるためのプラグインを使うか、チャットボットのツールが WordPress 用のプラグインを用意していれば、それを使います。

Wix

サイトの設定にある「カスタムコード」から、コードを追加して、置く場所に head を選びます。どのページに入れるか（全ページ・特定のページ）も選べます。コードの追加には、有料プランへのアップグレードなど条件があるので、Wix の公式ヘルプで確認してください。

STUDIO

プロジェクトの設定にある「カスタムコード」の head の欄に貼り、サイトを公開し直します。STUDIO もプランによってカスタムコードを使えないことがあるので、公式ヘルプで確認してください。

Jimdo

管理画面の基本設定にある「ヘッダー編集」に貼ります。こちらもプランによって使えない場合があります。

Googleタグマネージャーを使っている場合

Googleタグマネージャーでタグを管理しているなら、カスタムHTMLのタグとして全ページに配信する方法もあります。ただし、タグマネージャー経由での設置に対応しているかはツールによって違うので、提供元の案内を確認してください。

表示されないときの確認点

タグを貼ったのにチャットボットが出ないときは、次の順で確かめてください。上のほうほど、よくある原因です。

1. チャットボットが公開状態になっているか：作っただけで、公開していないことがあります。
2. 出すページの条件に、今見ているページが入っているか：特定のページだけに出す設定にしていないか確かめます。
3. 出すタイミングの条件：「30秒たったら出す」などの条件があると、開いてすぐには出ません。
4. タグがそのページに入っているか：ブラウザでページのソースを表示し、タグの一部（ツールのドメイン名など）を検索します。
5. キャッシュ：WordPress のキャッシュ系プラグインやサーバーのキャッシュで、タグを貼る前のページが表示されていることがあります。キャッシュを消してから確かめます。
6. 登録したサイトの URL：ツールに登録した URL と、実際のサイトの URL（www の有無、https かどうか）が合っているか確かめます。

置いたあとに決めること

設置できたら、次の3つを決めると使われるチャットボットになります。

• 出すページ：料金ページやサービス紹介ページなど、質問が生まれやすいページに絞ります。問い合わせフォームのページには出さないでください。入力の邪魔になります。
• 出すタイミング：開いた瞬間に話しかけるより、少し読んでから挨拶を出すほうが押されやすくなります。
• スマートフォンでの見え方：チャットのボタンが「閉じる」ボタンや、ページ下部の固定ボタンと重なっていないか、実機で確かめます。

会話の中身（選択肢・答え・誘導先）の作り方は「チャットボットの作り方」、BtoBサイトでの使い方は「チャットボットの活用｜BtoBサイトで成果につなげる設計」をご覧ください。

無料で設置するときに確認すること

ツールの比較は「チャットボットツールおすすめ10選｜料金・機能で徹底比較」をご覧ください。

Web接客 by grip space で設置する手順

当社の Web接客 by grip space では、次の手順で設置します。

1. 無料で登録する：メールアドレスとパスワードだけで登録できます。クレジットカードは不要です。
2. 計測タグを発行する：メニューの「計測タグ」で、サイトの名前と URL を入れて「登録してタグを発行」を押します。
3. タグを貼る：「タグをコピー」で写し、サイトのすべてのページの </head> の直前に貼ります。タグは1行です。WordPress なら無料のプラグインでも設置でき、方法は画面の「タグの入れ方」に載っています。
4. チャットボットを作る：「チャットボット」画面の「チャットボットを追加」から、シナリオ設定 → ルール設定の順に進みます。「AIでシナリオ案を作成」を使うと、サイトの URL・目的・聞きたい項目を選ぶだけで、会話の案ができます。
5. 出し方を決めて公開する：表示位置（右下・左下・右上・左上）、テーマ色、挨拶の吹き出しを自動で出すかなどを決め、出すページとタイミングを選んで公開します。

チャットの中で受け取った名前やメールアドレスは、管理者宛てのメールで届きます。入力した人への自動返信メールも設定できます。登録した PDF の資料をもとに、自由な質問に AI が答える「AI Q&A」も使えます。使い方の詳細は Web接客 by grip space の使い方 をご覧ください。

料金

フリープランは0円で、チャットボットとポップアップバナーを各1つ、表示は月1,000回まで、AI の回答は月30回まで使えます。フリープランでは「Web接客 by grip space」の表記が入ります。

表示回数が上限を超えても、表示は止まらず、メールでお知らせします。ライトプランは、初めてのお申し込みなら14日間無料でお試しいただけます。料金や機能の詳細は Web接客 by grip space のページでご確認ください。

よくある質問

まとめ

Web接客 by grip space なら、タグ1行でチャットボットを設置して、無料から始められます。機能と料金はWeb接客 by grip spaceのページでご確認ください。