iframe

将 Audio Agent 以 iframe 的方式嵌入到业务网站中，用户访问目标网页时即可加载 Agent 对话窗口，从而提供在线客服、售前咨询和客户线索搜集等服务。

如何集成到网站

1. 进入智能体-集成-iframe，复制「集成代码」
   
2. 将代码复制到网站 HTML 页面的自定位置
3. 发布网站即可完成 AI Agent的嵌入和进行对话
4. 若你需要自定义UI和logo 、控制用户消息频率、展示主动消息以提升交互率，可继续进行高级设置。

自定义 UI

此功能支持自定义配置部件气泡的尺寸、位置、颜色、图标、 LOGO和名称等信息

• 部件昵称：允许自定义名称
• 部件简介：允许自定义简介信息
• 主题设置：允许自定义部件的主题色、气泡图标和 Agent的形象
• 气泡自定义：支持根据业务需求，自定义设定气泡展示的位置和气泡尺寸
• 对话框自定义：支持根据业务需求，自定义设定对话窗口的宽度和高度（为兼容小尺寸屏幕，不建议数值过大）
• Agent LOGO：
• 平台 LOGO：显示 GPTBots 的 Logo
• 组织 LOGO：显示企业上传自定义的 Logo，组织下所有 Agent 均使用同个组织 Logo。
• 自定义 LOGO：显示上传自定义的 Logo，每个 Agent 均可使用不同的 Logo，此功能为高级权益，需联系销售开通。
• 不显示 LOGO：聊天对话窗口组件不显示任何 Logo 信息。

安全频控

• 域名白名单：定义「部件气泡集成代码」可嵌入的域名范围。若关闭，则视为不限制；
  

• 积分消耗限制：定义在「部件气泡」积分消耗限制。若关闭，则视为不限制；
  

  • 最多设置 3 条
  • 支持按照「每日/每周/每月」设定部件气泡的总积分消耗上限

• 用户消耗限制：定义每个用户的积分消耗限制。若关闭，则视为不限制；
  

  • 最多设置 3 条
  • 支持按照「每日/每周/每月」设定每个用户积分消耗上限

• 用户速率限制：定义每个用户的消息发送频率限制。若关闭，则视为不限制；
  

  • 最多设置 3 条
  • 支持按照「消息发送数量/时间段」设定每个用户消息发送梳理上限
  • 超限时不再调用 Agent 回复，直接自动回复预置的消息内容

事件回调

如何将部件气泡的用户行为事件传递到 GA4 或三方系统

1. 创建 GA4 回调事件，从 GA4 目标项目中获取 Measurement Protocol API Secret 和 Measurement ID信息并填入。

2. 创建 Webhook 回调事件，按照页面提示选择所需的回调事件、填写 URL 和鉴权信息即可
   

3. 在事件回调列表中「启用」该回调，在 GA4 或 Webhook 地址中检查数据是否正常，数据正常入库后即可用户数据分析

高级用法

设置用户ID

1. 方案一：网页嵌入 iframe 地址规则为：iframe_url+?user_id=your_user_id

   说明：支持 Agent 开发者设置用户身份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"}', '*'))

                    

设置用户邮箱

网页嵌入 iframe 地址规则为：iframe_url+?email=somebody@mail.com
// 说明：支持 Agent 开发者设置用户邮箱，在用户呼叫人工服务时可免去填写邮箱的步骤，若不设置则用户发起人工服务请求时必须填写邮箱地址方可呼叫人工服务

设置自定义变量

支持开发者设置自定义变量的临时变量值，在本次对话中生效以实现 Agent 的动态逻辑和响应。
网页嵌入 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;
  }
});