特性
解決方案
文檔
部落格
公司
GPTBots 檔案 > 使用教程 > 集成 > 部件气泡
GPTBots 檔案 > 使用教程 > 集成 > 部件气泡
部件气泡
最新更新：2024-06-01

部件气泡

将 Bot 以气泡组件的方式嵌入到业务网站中，用户点击气泡组件即可呼出对话窗口，从而提供在线客服、售前咨询和客户线索搜集等服务。

如何集成到网站

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

自定义 UI

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

  • 部件昵称：允许自定义名称
  • 部件简介：允许自定义简介信息
  • 主题设置：允许自定义部件的主题色、气泡图标和 Bot的形象
  • 气泡自定义：支持根据业务需求，自定义设定气泡展示的位置和气泡尺寸
  • 对话框自定义：支持根据业务需求，自定义设定对话窗口的宽度和高度（为兼容小尺寸屏幕，不建议数值过大）
  • 自定义LOGO：Growth 计划用户支持自定义 LOGO 或者不展示 LOGO 信息，Business 计划用户支持自定义域名地址

主动消息

主动消息可以在用户未点击部件气泡时，主动展示卡片或提示消息，以吸引用户的注意力，引导用户咨询对话和线索留资。主动消息支持两种样式，分别为：「提示消息」和「卡片消息」

如何创建提示消息

alt text

  • 消息内容：最多支持设置 3 条内容，生效后在页面自下而上动态展示
  • 显示规则：最多支持设置 3 条提示触发条件，当用户环境服务条件时展示主动消息
    • 触发条件：允许通过判断用户的浏览器/浏览语言/时区/国家地区/操作系统/UTM 等信息
    • 表达式：针对number/string 等不同类型的值提供=/≠/区间/包含/不包含/有值/无值等计算表达式
    • 且 & 或：允许设置所有条件必须全部满足或任意满足即触发主动消息
    • 事件：支持立即或延迟 N 秒再触发主动消息
  • 消息展示频控：为了防止过于频繁的主动消息对用户造成打扰，支持按照「每个网站/每个页面」按照「每天/每周/每月」最多展示「N」次进行频控管理

如何创建卡片消息

alt text 配置卡片消息内容后，其他配置功能项与上文相同

  • 图片上传：支持用户自定义上传图片，建议控制图片的大小，避免加载图片耗时过长
  • 标题/内容：用户自定义输入即可

如何启用主动消息

alt text

  1. 在主动消息列表，选择目标消息并点击启用按钮
  2. 访问网站页面查看主动消息
  3. 点击主动消息，唤醒对话窗口

安全频控

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

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

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

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

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

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

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

事件回调

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

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

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

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

高级用法

设置用户信息接口

  1. 设置用户ID
window.ChatBot.setUserId("your_user_id") // 说明：支持 Bot 开发者设置用户身份ID
          window.ChatBot.setUserId("your_user_id")
// 说明：支持 Bot 开发者设置用户身份ID
此代碼塊在浮窗中顯示
  1. 设置用户邮箱
window.ChatBot.setEmail("somebody@mail.com") // 说明：支持 Bot 开发者设置用户邮箱，在用户呼叫人工服务时可免去填写邮箱的步骤，若不设置则用户发起人工服务请求时必须填写邮箱地址方可呼叫人工服务
          window.ChatBot.setEmail("somebody@mail.com")
// 说明：支持 Bot 开发者设置用户邮箱，在用户呼叫人工服务时可免去填写邮箱的步骤，若不设置则用户发起人工服务请求时必须填写邮箱地址方可呼叫人工服务
此代碼塊在浮窗中顯示

事件回调数据格式

通过 Webhook 或 GA4 所传递的部件气泡的事件及事件属性采用以下数据格式，请自行解析后存储落库。

{ "clien_id": "", //优先取使用 GA4 的 gtag 方法去获取 client id，无法获取则由 GPTBots 自行生成 "user_id": "", //开发者设置的 UserId,未设置则为 null "event_name": "Show widget bubble", //事件名称 "event_params": { "key1": "abc", //事件属性名称:属性值(string) "key2": 123 //事件属性名称:属性值(number) } }
          {
  "clien_id": "",  //优先取使用 GA4 的 gtag 方法去获取 client id，无法获取则由 GPTBots 自行生成
  "user_id": "",  //开发者设置的 UserId,未设置则为 null
  "event_name": "Show widget bubble",     //事件名称
  "event_params": {  
      "key1": "abc",  //事件属性名称:属性值(string)
      "key2": 123     //事件属性名称:属性值(number)
    }
}
此代碼塊在浮窗中顯示

将气泡小部件嵌入至 Shopify

  1. 复制气泡小部件的嵌入代码。 image-20240523180748897

  2. 进入 Shopify Store 管理后台，找到正在使用的模板，并进入「编辑代码」。 1

  3. 找到「theme.liquid」文件，并在<head>内将嵌入代码粘贴至此，并保存。 2

  4. 气泡小部件即会出现在您 Store 网站的右下角，供访客咨询用。 image-20240523180959768