logo
Development
概要ユーザーガイドAPI Referenceベストプラクティス更新履歴
検索
日本語
ユーザーガイド / エージェント / インテグレーション / バブルウィジェット
バブルウィジェット
最終更新日：15日前

バブルウィジェット

エージェントをバブルウィジェットとして会社のウェブサイトに組み込むことができます。ユーザーはバブルをクリックしてチャット画面を開き、オンラインサポートや購入前相談、見込み客獲得などのサービスを利用できます。

ウェブサイトに組み込む手順

  1. エージェント→連携→Widget Bubble にアクセスし、「連携コード」をコピーしてください。
    alt text
  2. コピーしたコードをウェブサイトのHTMLページのタグ内に貼り付けます。
  3. ウェブサイトを公開すると、AIエージェントの組み込みが完了し、会話を開始できます。
  4. UIやロゴを変更したり、ユーザーのメッセージ頻度を制限したり、アクティブなメッセージでユーザーとの交流を促進したい場合は、詳細設定を行ってください。

UIのカスタマイズ

ウィジェットバブルのサイズ、位置、色、アイコン、ロゴ、名前を自由に設定できます。
alt text

  • ウィジェット名：表示名を変更できます。
  • ウィジェットの説明：説明文を変更できます。
  • テーマ設定：ウィジェットの色、バブルアイコン、エージェントの見た目を変更できます。
  • バブルの設定：バブルの表示位置とサイズを業務に合わせて調整できます。
  • チャット画面の設定：チャット画面の幅と高さを業務に合わせて調整できます（スマートフォンでの表示を考慮し、大きくしすぎないことをお勧めします）。
  • エージェントのロゴ：
    • プラットフォームロゴ：GPTBotsのロゴが表示されます。
    • 組織のロゴ: アップロードした企業独自のロゴが表示されます。here. 組織内のすべてのエージェントで同じロゴが使用されます。
    • カスタムロゴ：アップロードした独自のロゴが表示されます。エージェントごとに異なるロゴを使用できます。この機能は有料オプションです。営業担当にお問い合わせください。
    • ロゴなし：チャット画面にロゴを表示しません。

積極的なメッセージ

ユーザーがバブルをクリックする前に、カードやメッセージを表示してユーザーの注意を引き、会話や問い合わせにつなげることができます。「プロンプトメッセージ」と「カードメッセージ」の2種類があります。

プロンプトメッセージの作成

alt text

  • メッセージ内容：最大3つのメッセージを設定でき、有効にするとページ上で下から順番に表示されます。
  • 表示条件：最大3つの条件を設定でき、ユーザーの環境が条件を満たしたときにメッセージを表示します。
    • トリガー条件：ユーザーのブラウザ、言語、タイムゾーン、国、OS、UTMパラメータなどで判定できます。
    • 演算子：数値や文字列に対して、等しい/等しくない/範囲/含む/含まない/値あり/値なしなどの条件を設定できます。
    • AND & OR: すべての条件を満たす必要があるか、いずれかの条件で表示するかを選択できます。
    • イベント：すぐに表示するか、指定した秒数後に表示するかを設定できます。
  • 表示頻度の制御：頻繁なメッセージでユーザーを困らせないよう、「ウェブサイト/ページ」ごとに「日/週/月」あたりの最大表示回数を設定できます。

カードメッセージの作成

alt text
カードメッセージの内容を設定した後、その他の設定は上記と同じです。

  • 画像のアップロード：独自の画像をアップロードできます。読み込み時間を短縮するため、画像サイズにご注意ください。
  • タイトル・内容：自由にテキストを入力できます。

積極的なメッセージを有効にする

alt text

  1. メッセージ一覧で対象のメッセージを選択し、有効化ボタンをクリックします。
  2. ウェブサイトにアクセスして積極的なメッセージが表示されることを確認します。
  3. メッセージをクリックするとチャット画面が開きます。

セキュリティと利用制限

  • ドメインホワイトリスト：「ウィジェットバブルの統合コード」を組み込める場所を制限します。無効にすると制限なしになります。
    Domain Whitelist

  • クレジット消費制限：「ウィジェットバブル」のクレジット消費量を制限します。無効にすると制限なしになります。
    Widget Credit Total Limit

    • 最大3つのルールを設定できます。
      -「日次/週次/月次」でウィジェットバブルの総クレジット消費量を制限できます。

  • ユーザー別消費制限: 各ユーザーのクレジット消費量を制限します。無効にすると制限なしになります。
    User Credit Consumption Limit

    • 最大3つのルールを設定できます。
    • 「日次/週次/月次」で各ユーザーのクレジット消費量を制限できます。

  • User Rate Limit: Defines the message sending frequency limit for each user. If disabled, it is considered unrestricted.
    User Message Frequency Limit

    • 最大3つのルールを設定できます。
    • 各ユーザーが特定の時間内に送信できるメッセージの最大数を設定できます。
    • 上限を超えた場合、エージェントはそれ以上レスポンスせず、あらかじめ設定されたメッセージで自動的に返信します。

イベントコールバック

ウィジェットバブルのユーザー行動イベントを GA4 または外部システムに送信する方法

  1. GA4 のコールバックイベントを作成し、対象プロジェクトからMeasurement Protocol API Secret と Measurement IDを取得して入力します

  2. Webhook のコールバックイベントを作成し、画面上の案内に従って必要なコールバックイベントを選択し、URL と認証情報を入力します。
    alt text

  3. イベントコールバック一覧で該当のコールバックを有効化し、GA4 または Webhook の送信先でデータが正しく受信されているか確認します。データの保存が正常に完了すれば、ユーザー行動データの分析が可能になります。

応用的な使い方

ユーザーIDの設定

エージェント開発者によるユーザー識別IDの設定をサポートします。

window.ChatBot.setUserId("your_user_id") 
                      
                      window.ChatBot.setUserId("your_user_id")
このコードブロックをポップアップで表示

ユーザーのメールアドレス設定

エージェント開発者がユーザーのメールアドレスを設定できるようになりました。これにより、ユーザーが有人対応をリクエストする際、メールアドレスの入力を省略できます。メールアドレスが設定されていない場合は、ユーザーが有人対応を呼び出す際にメールアドレスの入力が必須となります。

window.ChatBot.setEmail("somebody@mail.com") 
                      
                      window.ChatBot.setEmail("somebody@mail.com")
このコードブロックをポップアップで表示

チャットウィンドウの自動表示設定

エージェント開発者がチャットウィンドウの自動表示を設定できるようになりました。ユーザーがバブルコンポーネントをクリックしていない場合、チャットウィンドウが自動的に表示されます。ユーザーがバブルコンポーネントをクリックすると、チャットウィンドウは閉じます。

<script src="https://www.gptbots.ai/widget/xxxxxxxxxxxxxx/chat.js" onload="ChatBot.show()"></script>
                      
                      <script src="https://www.gptbots.ai/widget/xxxxxxxxxxxxxx/chat.js" onload="ChatBot.show()"></script>
このコードブロックをポップアップで表示

デフォルト状態のスキップ設定

エージェント開発者は、チャットウィンドウのデフォルト状態をスキップし、ウェルカムメッセージや事前設定された質問を優先的に表示できるようになりました。

<script src="https://www.gptbots.ai/widget/xxxxxxxxxxxxxx/chat.js?skipWelcome=1"></script> 
                      
                      <script src="https://www.gptbots.ai/widget/xxxxxxxxxxxxxx/chat.js?skipWelcome=1"></script>
このコードブロックをポップアップで表示

イベントコールバックのデータ形式

Webhook または GA4 を通じて送信される、ウィジェットバブルのイベントおよびその属性は、以下のフォーマットに従います。受信システムではこの形式に従って解析・保存を行ってください。

{ "client_id": "", // GA4 の gtag メソッドで取得することが推奨されます。未取得の場合は GPTBots が自動生成します。 "user_id": "", // 開発者が設定した UserId。未設定の場合は null になります。 "event_name": "Show widget bubble", // イベント名 "event_params": { "key1": "abc", // イベント属性名：属性値（文字列） "key2": 123 // イベント属性名：属性値（数値） } }
                      
                      {
  "client_id": "",  // GA4 の gtag メソッドで取得することが推奨されます。未取得の場合は GPTBots が自動生成します。
  "user_id": "",  // 開発者が設定した UserId。未設定の場合は null になります。
  "event_name": "Show widget bubble",     // イベント名
  "event_params": {  
      "key1": "abc",  // イベント属性名：属性値（文字列）
      "key2": 123     // イベント属性名：属性値（数値）
    }
}
このコードブロックをポップアップで表示

Shopify へのバブルウィジェットの埋め込み方法

  1. ウィジェットバブルの埋め込みコードをコピーします。
    image-20240523180748897

  2. Shopify ストアの管理画面にアクセスし、現在使用しているテーマの「コードを編集」を選択します。
    1

  3. theme.liquid ファイルを開き、<head> タグ内に先ほどのコードを貼り付けて保存します。
    2

  4. ストアのWebサイト右下にウィジェットバブルが表示され、訪問者はそこから相談を開始できます。
    image-20240523180959768