iframe

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

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

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 アドレスでデータが正常に取得されているかを確認します。データの保存が成功すれば、ユーザーデータの分析が可能になります。

上級者向けの使用方法

ユーザーIDの設定

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

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

2. オプション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"}', '*'))

                    

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

Webページにiframeを埋め込む際のアドレス形式は：iframe_url+?email=somebody@mail.com
// 説明：エージェント開発者がユーザーのメールアドレスを事前に設定できます。これにより、ユーザーが有人対応をリクエストする際にメールアドレスの入力を省略できます。設定しない場合、ユーザーは有人対応を依頼する際にメールアドレスの入力が必須となります。

カスタム変数の設定

開発者はカスタム変数の一時的な値を設定でき、該当セッション内でのみ有効となり、エージェントの動的なロジックや応答に活用できます。
Webページにiframeを埋め込む際のアドレス形式は：iframe_url?var_key1=value1&var_key2=value2

iframe パラメータによる画面制御

• show_messages：会話履歴を表示するかどうかを制御します
  iframe_url+?show_messages=true
• show_auto_call：通話を自動的に開始するかどうか
  iframe_url+?show_auto_call=true

iframe イベントリスニング方法

iframe の postMessage イベントをリッスンすることで、ユーザーの行動データを取得できます。開発者はビジネスのニーズに応じてデータの分析や処理を行えます。

                      
                      window.addEventListener('message', (e) => {
  let msg;
  try {
    msg = JSON.parse(e.data);
  } catch {
    return;
  }
  switch (msg.type) {
    case 'audio_conversation_id':
      console.log('audio_conversation_id', msg.data);
      // msg.data は今回の通話の conversation id です
      break;
    case 'audio_call_started':
      console.log('audio_call_started', msg.data);
      // msg.data === 'manual'（ユーザーが主導で開始）| 'auto'（自動開始）通話開始イベント, 
      break;
    case 'audio_call_ended':
      console.log('audio_call_ended', msg.data);
      // msg.data === 'manual'（ユーザーが切断）| 'auto'（タイムアウト・切断など自動終了）通話終了イベント
      break;
  }
});