iframe

ビジネスウェブサイトにiframeを使用してエージェントを埋め込む方法をご紹介します。ユーザーが対象のウェブページを訪れると、エージェントのチャットウィンドウが読み込まれ、オンラインでのお客様対応、販売前相談、リード収集などのサービスを提供します。

ウェブサイトへのインテグレーション方法

1. Agent-Integration-iframeに移動し、「Integration Code」をコピーします。
2. コードをウェブサイトのHTMLページの任意の場所に貼り付けます。
3. ウェブサイトを公開し、AIエージェントの埋め込みを完了し、会話を開始します。
4. UIやロゴをカスタマイズしたり、ユーザーのメッセージ送信頻度を調整したり、能動的なメッセージを表示して対話率を高めたい場合は、「高度な設定」から対応できます。

カスタムUI

この機能では、ウィジェットバブルのサイズ、位置、色、アイコン、ロゴ、名前のカスタム設定ができます。

• ウィジェットの名前：お好みの名前を設定できます。
• ウィジェットの説明：自由に説明文を設定できます。
• テーマ設定：ウィジェットのテーマ色、バブルアイコン、エージェントの見た目をカスタマイズできます。
• バブルカスタマイズ：ビジネスのニーズに応じてバブルの表示位置とサイズを設定できます。
• ダイアログボックスのカスタマイズ：ビジネスのニーズに応じてチャットウィンドウの幅と高さを設定できます（小さな画面との互換性を考慮し、大きな値は推奨されません）。
• エージェントのロゴ->
  • プラットフォームのロゴ: GPTBotsのロゴが表示されます。
  • 組織のロゴ：企業がhereでアップロードしたカスタムロゴが表示されます。全てのエージェントは同じ組織のロゴを使用します。
  • カスタムロゴ：アップロードしたカスタムロゴが表示されます。各エージェントは異なるロゴを使用できます。この機能は高度なオプションであり、有効にするためには営業チームへの連絡が必要です。
  • ロゴなし：チャットウィンドウのコンポーネントには任意のロゴ情報が表示されません。

セキュリティとレート制限

• ドメインホワイトリスト：ウィジェットバブルの埋め込みコードを使用できるドメインの範囲を定義します。無効にした場合は、すべてのドメインで制限なく使用できます。
  

• ポイント消費制限：ウィジェットバブルで消費できるポイントの上限を定義します。無効にした場合は、上限なしで利用可能です。
  

  • 最大3つの設定が可能です
  • ウィジェットバブルの合計ポイントの消費制限を「日/週/月」ベースで設定可能です。

• ユーザーごとのポイント消費上限：各ユーザーが消費できるポイントの上限を定義します。無効にした場合は、制限なしとなります。
  

  • 最大3つの設定が可能です
  • 各ユーザーのポイントの消費制限を「日/週/月」ベースで設定可能です。

• ユーザーごとの送信頻度制限：各ユーザーがメッセージを送信できる頻度の上限を定義します。無効にした場合は、制限なしとなります。
  

  • 最大3件まで設定可能
  • 「メッセージ数／時間帯」に基づいて、各ユーザーのメッセージ送信上限を設定できます
  • 上限を超えた場合、エージェントは返信を停止し、あらかじめ設定されたメッセージを自動で送信します。

イベントコールバック

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

1. GA4のコールバックイベントを作り、対象のGA4プロジェクトからMeasurement Protocol API SecretとMeasurement IDを取得し、入力します。
2. Webhook のコールバックイベントを作成し、画面の指示に従って必要なイベントを選択したうえで、URL と認証情報を入力してください。
   
3. イベントコールバック一覧で「有効化」し、GA4 または Webhook アドレスでデータが正常に取得されているかを確認します。データの保存が成功すれば、ユーザーデータの分析が可能になります。

上級者向けの使用方法

ユーザー情報設定インターフェース

1. ユーザーIDの設定

• オプション1：Webページにiframeを埋め込む際のアドレス形式は：iframe_url+?user_id=your_user_id です。

  注：この方法は、エージェント開発者がユーザーIDを設定するのに対応しています。

• オプション2：JavaScriptコードを使って動的にユーザーIDを設定します。

                      
                      Array.from(document.getElementsByTagName('iframe')).filter(iframe => iframe.src.includes('gptbots')).forEach(iframe => iframe.contentWindow.postMessage('{"type":"UserId","data":"your_user_id"}', '*'))

                    

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

WebhookまたはGA4を介し送信されるウィジェットバブルのイベントと属性には以下のデータ形式が使用されます。これに基づき解析し保存してください。

                      
                      {
  "client_id": "",  //GA4のgtagメソッドを使用してclient idを取得します。もしそれが使えない場合、GPTBotsが生成します。
  "user_id": "",  //開発者が設定したUserIdです。設定されていない場合、nullとなります。
  "event_name": "Show widget bubble",     //イベント名
  "event_params": {  
      "key1": "abc",  //イベントの属性の名前：その値（文字列）
      "key2": 123     //イベントの属性の名前：その値（数値）
    }
}