Web制作コラム

Chatbot by gripspace の使い方|シナリオ型チャットボットの作成から表示・リード管理まで

やり方・手順

無料の WordPress プラグイン「Chatbot by gripspace」で、シナリオ型のチャットボットを作る手順をまとめました。テンプレートの選び方、分岐の作り方、表示する条件、問い合わせの受け取り方まで、画面の項目名に沿って説明します。

Chatbot by gripspace は、当社(ワプラボ/ibis studio株式会社)が開発し、WordPress.org で無料公開しているチャットボットのプラグインです。あらかじめ決めた順番で質問や選択肢を出す「シナリオ型」で、訪問者が選んだ内容に応じて会話を分岐させ、最後に問い合わせフォームで連絡先を受け取る、といった使い方を想定しています。

外部サービスのアカウントは不要で、プラグインだけで作成から表示まで完結します。受け取った問い合わせは WordPress の中に保存されます。この記事では、バージョン 1.0.20 の画面に沿って、設置から運用までを順に説明します。

画面の項目名は、WordPress の言語設定が日本語のときの表示です。日本語訳は WordPress.org の翻訳として配信されるため、管理画面の「更新」で翻訳が更新されていないと英語のまま表示されることがあります。

できること・できないこと

先に全体像です。できることは次のとおりです。

  • メッセージ・選択肢・テキスト入力・リードフォーム・リンクボタンを組み合わせた会話の作成
  • 選択肢ごとに次のステップを変える分岐
  • ページの URL、表示のタイミング、表示期間による出し分け
  • チャットアイコンの色・位置・アニメーションなどの見た目の調整
  • リードフォームで受け取った内容の保存と、管理者通知メール・自動返信メール
  • (任意)自分の Gemini API キーを使った、PDF をもとに答える AI Q&A と、シナリオの下書き生成

一方で、次のことはできません。

  • 担当者が画面の向こうでリアルタイムに返信する、いわゆる有人チャット
  • パソコン・スマートフォンといった端末の種類による出し分け
  • AI Q&A 以外のステップで、訪問者の自由な文章を理解して答えること

「よくある質問への案内」と「問い合わせ前の振り分け」を自動で行う道具と考えると、向き不向きが判断しやすいです。

1. インストールと有効化

  1. 管理画面の「プラグイン」→「新規プラグインを追加」を開く
  2. 検索欄に「Chatbot by gripspace」または「grip-chatbot」と入力する
  3. 表示されたプラグインを「今すぐインストール」し、「有効化」する

有効化すると、管理画面の左メニューに「Grip Chatbot」が追加されます。中のメニューは次の5つです。

メニュー使う場面
チャットボット作ったチャットボットの一覧。編集・公開・削除をここから行います
連携済みチャットボットgrip space に連携したチャットボットと、その表示数・開封数などを見る画面です
新規追加テンプレートを選んでチャットボットを作ります
リードリードフォームから届いた問い合わせの一覧です
設定grip space との接続と、AI 機能(Gemini)の設定です

※ 横にスクロールできます

要件は WordPress 5.8 以上、PHP 7.4 以上です。ウィジェットはテーマの wp_footer() の位置に出力されるので、一般的なテーマであればそのまま動きます。

2. テンプレートを選んで作成する

「新規追加」を開くと、テンプレートが並びます。使いたいものの「このテンプレートを使う」を押すと、そのテンプレートをもとにした下書きができ、編集画面に移ります。

テンプレート中身
空白挨拶メッセージ1つだけ。一から組み立てたいとき
挨拶 + リンク挨拶のあとに、指定したページへのリンクボタンを出す
問い合わせ振り分け「資料請求」「見積もりを取得」「その他」の選択肢で用件を聞き、連絡先フォームへ進む
リードフォーム挨拶して名前・メール・会社名を受け取り、お礼を伝える
FAQ (AI Q&A)アップロードした PDF をもとに AI が質問に答える。Gemini API キーが必要

※ 横にスクロールできます

迷ったら「問い合わせ振り分け」から始めるのがおすすめです。分岐とフォームの両方が最初から入っているので、文言を自社向けに直すだけで形になります。

3. 編集画面の見方

編集画面の上部には「1 シナリオ」「2 ルール」の切り替え、チャットボット名の入力欄、「公開」のスイッチ、「保存」ボタンが並びます。「1 シナリオ」では左側で内容と見た目を設定し、右側の「プレビュー」で会話の流れを確認できます。

「公開」をオンにしただけでは反映されません。必ず「保存」を押してください。また、後で説明する「表示するページ (URL)」が空のままだと、公開してもサイトには表示されません。

4. シナリオを組み立てる

左側の「シナリオを編集」ボタンを押すと、「シナリオフローエディター」が開きます。会話の流れがステップの並びとして表示され、ステップをクリックすると中身を編集できます。+ ボタンから次のステップを追加し、フローを分岐させられます。

使えるステップは6種類

ステップ内容主な設定
メッセージボットが文章を出すメッセージ
選択肢質問とボタンを出し、押されたボタンごとに次へ進む先を変える質問、選択肢(追加・削除)
テキスト入力訪問者に1項目だけ入力してもらう質問、プレースホルダー、入力タイプ(テキスト/メールアドレス/電話番号/URL)、別名で保存 (エイリアス)
リードフォーム複数の項目をまとめて送ってもらう導入テキスト、送信ボタンのラベル、項目(追加・削除・必須)
リンクボタンメッセージとボタンを出し、指定ページへ移動させるボタンのテキスト、ボタンの URL、ボタンの色、新しいウィンドウで開く
AI Q&APDF をもとに AI が自由な質問に答える参照 PDF、トーン、フォールバックボタンなど(後述)

※ 横にスクロールできます

リードフォームの項目の種類は、氏名 (姓 / 名)、テキスト、メールアドレス、電話番号、URL、ラジオボタン、チェックボックスの7つです。ラジオボタンとチェックボックスは選択肢を追加できます。

分岐と合流

分岐を作れるのは「選択肢」ステップです。選択肢ごとに次のステップを持つので、「資料請求」を押した人には資料の案内、「見積もりを取得」を押した人にはフォーム、といった出し分けができます。

それ以外のステップには「次へ (既存のステップに接続)」という設定があり、すでにあるステップにつなげられます。別々の分岐を同じフォームに戻したいときはこれを使います。合流しているステップには「(統合)」の印が付き、点線でつながって表示されます。「終了」を選ぶと、そこで会話が終わります。

「別名で保存 (エイリアス)」は付けておく

テキスト入力やフォームの各項目には「別名で保存 (エイリアス)」があります。受け取った値の保存名です。メールアドレスの項目には contact_email のように分かりやすい名前を付けておくと、後で一覧やメールを見たときに迷いません。テンプレートの「問い合わせ振り分け」では、名前・メール・会社名にそれぞれ contact_name、contact_email、company_name が入っています。

5. 見た目を整える

「1 シナリオ」の左側に、見た目の設定がまとまっています。変更はすぐ右のプレビューに反映されます。

区分設定できること
チャットアイコンテーマカラー(アイコンとチャット画面の見出しの色)、挨拶メッセージ、タイトル
デザイン表示位置(右下/左下/右上/左上)、角の丸み(0〜24px)、影の有無
表示 / アニメーションパルスアニメーション、通知バッジ、登場(なし/バウンス/スライド/フェード)、挨拶バブルを自動表示
アバターなし、またはアップロードした画像

※ 横にスクロールできます

アニメーションは既定ではすべてオフです。目立たせたい場合も、パルスかバッジのどちらか1つにとどめるほうが、ページの邪魔になりにくいです。

「挨拶バブルを自動表示」では、表示までの秒数、自動的に隠すまでの時間、再表示の間隔を秒で指定します。挨拶メッセージが空のときは動きません。0 を入れると無効になります。

6. 表示する条件(ルール)を決める

上部の「2 ルール」に切り替えると、いつ・どのページに出すかを設定できます。

トリガー

トリガー動き
すぐに表示ページを開いたときに表示
スクロール後に表示指定したスクロール率 (%) に達したら表示(既定 50%)
滞在後に表示指定した秒数ページにいたら表示(既定 5秒)
離脱時に表示マウスが画面の上端から外へ出たときに表示

※ 横にスクロールできます

「離脱時に表示」はマウスの動きで判定します。マウスを使わないスマートフォンでは、この条件では表示されないと考えてください。スマートフォンの訪問が多いサイトでは、スクロールか滞在時間を選ぶほうが確実です。

表示期間

「表示期間を設定」をオンにすると、開始と終了の日時を指定できます。キャンペーン期間だけ出したいときに使います。

表示するページ (URL)

「URL を追加」で表示するページを登録します。複数登録でき、どれか1つに当てはまれば表示されます。URL は「/contact/」のようなパスでも、「https://」から始まる完全な URL でもかまいません。「前方一致」にチェックを入れると、その文字列で始まるページすべてが対象になります。

URL が1件も登録されていないチャットボットは、どのページにも表示されません。サイト全体に出したい場合は「/」を登録して「前方一致」にチェックを入れてください。

その下の「対象の都道府県」は、grip space に連携したうえでスタンダードプラン以上のときに使える項目です。プラグイン単体では設定できません。

7. 問い合わせ(リード)を受け取る

リードフォームから送られた内容は、WordPress の中に保存されます。メニューの「リード」を開くと、チャットボットごとに問い合わせ件数と最終送信の日時が並びます。チャットボット名を押すとそのチャットボットの問い合わせ一覧に、「詳細」を押すと1件ずつの中身に移ります。

詳細では、送信された値に加えて、フォームに至るまでの会話と、送信されたページの URL も確認できます。どの選択肢を選んでから問い合わせたかが分かるので、営業の初回連絡に役立ちます。不要なものは詳細画面から削除できます。

保存されるのは、1つのチャットボットにつき新しい順に1,000件までです。それを超えると古いものから消えます。長く残したい場合は、メール通知と併用してください。

メール通知と自動返信

「1 シナリオ」の左側にある「メール設定」で、2種類のメールをオンにできます。スイッチをオンにして「設定」を押すと、宛先や件名、本文を入力する画面が開きます。

メール送り先補足
管理者通知メール「送信先」に入れたアドレス。空欄ならサイト管理者のメールアドレスカンマ区切りで複数指定可。CC・BCC も設定可。返信先は訪問者のアドレスになる
自動返信メール会話の中で受け取った訪問者のメールアドレスメールアドレスを聞いていないシナリオでは送られない

※ 横にスクロールできます

本文には {values}(送信された値)、{conversation}(チャット履歴)、{page}(ページの URL)を差し込めます。件名と本文を空欄にすると、既定のテンプレートで送られます。

メールの送信には WordPress 標準の送信機能を使います。サーバーの設定によっては届かないことがあるので、公開前に自分のアドレスで実際に送って、管理者通知と自動返信の両方を確認してください。

8. AI 機能を使う場合(任意)

AI 機能は任意です。使う場合は、Google AI Studio で発行した自分の Gemini API キーを「設定」画面の「AI 機能 (Gemini)」に貼り付けて、「AI 設定を保存」を押します。キーはサーバー側に保存され、サイトの表側には出ません。モデルは Gemini 3.5 Flash-Lite(既定)と Gemini 3.6 Flash から選べます。Gemini API の利用料金は、Google との契約に従って発生します。

キーを設定すると、次の2つが使えるようになります。

  • AI Q&A ステップ … 「参照 PDF」に資料を登録すると、訪問者の自由な質問に、その PDF の内容だけをもとに AI が答えます。トーンはフォーマル/カジュアル/フレンドリーから選べます
  • AI でシナリオを生成 … シナリオフローエディターの「AI で生成」から、目的、収集する情報、会社名、ウェブサイトの URL、CTA などを入力すると、ステップの流れの下書きを作ります。「現在のステップを置き換え」か「現在のステップに追加」を選べます

AI Q&A には「最大回答数」があり、その回数を答えると、入力欄の代わりに CTA(メッセージとボタン)を出します。テンプレートの初期値は3回です。キーや PDF が未設定のときは、AI の代わりに「フォールバックボタン」が表示されます。

悪用を防ぐため、AI Q&A の質問は同じ IP アドレスから1分に8回・1日に100回まで、1回の質問は1,000文字までに制限されています。AI Q&A を使うと、訪問者の質問と登録した PDF の内容が Google の Gemini API に送られます。サイトのプライバシーポリシーへの記載をおすすめします。

9. grip space との連携(任意)

grip space は、同じく当社が提供しているマーケティングツールです。連携しなくてもチャットボットは使えます。連携すると、チャットボットの配信と計測を grip space 側で行い、表示数・開封数・回答・CV を「連携済みチャットボット」の画面で過去7日間・過去30日間などの期間で確認できるようになります。

  1. 「設定」画面で、grip space で発行した連携キーを貼り付けて「キーで接続」する(アカウントが無い場合は、同じ画面から grip space フリープランに登録できます)
  2. 「チャットボット」一覧で、連携したいチャットボットの「grip に連携」を押す

チャットボットを連携できるのは、grip space のスタータープラン以上です。フリープランでは接続まではできますが、チャットボットの連携はできません。プランごとに連携できる数にも上限があります。都道府県による出し分けはスタンダードプラン以上です。

連携すると、そのチャットボットのシナリオと表示ルールが grip space に送られ、アクセス計測が自動でオンになります。計測タグが訪問者のアクセス情報を grip space に送るため、プライバシーポリシーへの記載が必要です。また、連携したチャットボットのフォーム送信は grip space 側で扱われ、プラグインの「リード」には入りません。

10. うまく表示されないとき

  • 「表示するページ (URL)」が空になっていないか。空だと表示されません
  • 「公開」がオンになっていて、そのあと「保存」を押したか
  • 「表示期間を設定」がオンで、期間の外になっていないか
  • トリガーが「離脱時に表示」になっていて、スマートフォンで確認していないか
  • キャッシュ系のプラグインを使っている場合、キャッシュを削除したか
  • テーマが wp_footer() を呼んでいるか(独自テーマの場合)

プラグインを削除するとき

プラグインを削除しても、作ったチャットボット・受け取ったリード・接続設定は残ります。消えるのは一時的なキャッシュだけです。grip space に接続している場合は、削除の前に「設定」画面で「接続解除」しておくと、連携のための鍵も無効になります。

まとめ

  • テンプレートから作り、シナリオフローエディターで文言と分岐を直すのが早い
  • 分岐は「選択肢」ステップで作り、「次へ」で既存のステップに合流させる
  • 表示する URL は必ず1件以上登録する。サイト全体なら「/」を前方一致で
  • 問い合わせは「リード」に保存される。メール通知と自動返信は送信テストまで行う
  • AI 機能と grip space 連携はどちらも任意。使う場合はプライバシーポリシーも見直す

当社はこのプラグインの開発元なので、設置や設定で分からないことがあれば直接お問い合わせいただけます。シナリオの設計や、既存サイトへの組み込みのご相談も承ります。

「やり方・手順」のコラム

この記事と同じカテゴリの記事です。

一覧に戻る

SERVICES

WordPressとECサイトの制作、
まとめてご相談いただけます

WordPress

WordPress制作・構築代行

デザインデータやコーディング済みHTMLを、オリジナルテーマとして構築します。プラグイン開発も対応。

構築基本費用 50,000円

詳しく見る
コーディング

コーディング代行

デザインデータをHTML/CSSに起こします。WordPress化まで通しでも、コーディングだけでも承ります。

1ページ 15,000円〜

詳しく見る
React

Reactコーディング代行

デザインデータをReactのコンポーネントとして実装します。既存アプリへの画面追加・UI改修だけでも承ります。

1ページ 18,000円〜

詳しく見る
Next.js

Next.js制作・コーディング代行

検索エンジンに読まれるHTMLを返せるNext.jsで構築します。静的書き出しでレンタルサーバーでも公開できます。

1ページ 18,000円〜

詳しく見る
EC / WordPress

WelcartでのECサイト構築

WordPress専用のネットショップ構築プラグイン。機能面まで踏み込んだカスタマイズができます。

デザイン制作+構築 一式 120万円〜

詳しく見る
EC / EC-CUBE

EC-CUBEでのECサイト構築

国産オープンソースのECパッケージ。決済・受注・在庫まわりを業務に合わせて作り込めます。

デザイン制作+構築 一式 120万円〜

詳しく見る
EC / ASPカート

ECサイト制作代行

Shopify・MakeShop・カラーミーなどのカートに、オリジナルデザインを組み込みます。

構築基本費用 100,000円

詳しく見る

制作のご相談も承っています

デザインデータと画面数をお知らせいただければ、お見積りと納期をご提示します。

直近2週間の受付状況制作のリソース

10/12(月)〜10/16(金)残りわずか
10/19(月)〜10/23(金)余裕があります
Chatworkで相談する