# iframe 接入

客服工作台、呼叫中心及客户中心对接业务系统

# 方案概述

企业可将自主研发的业务操作页面以 iframe 的方式嵌入智齿客服工作台右侧、客户中心客户详情页或呼叫中心通话详情页,作为单独的菜单栏。常见的业务操作页面例如:提交工单页、用户个人资料页、用户历史订单页、用户历史工单页。

图片

<集成完毕后客服工作台的实际效果>

图片

<集成完毕后客户中心的实际效果>

图片

<集成完毕后呼叫中心的实际效果>

客服在请求此页面时,将通过在业务操作页面的 URL 后追加用户对接 ID、客服邮箱、安全校验码等信息以便企业进行安全验证、根据用户身份展示该用户相关的业务信息。

当您传输敏感信息时,可以使用安全密钥功能。安全密钥功能为您提供更高的安全防护等级,该功能对应的 sign 如下表所示

客服工作台请求此页面时,传入字段包括:

字段 名称
partnerId 对接 ID,咨询者在第三方系统的 ID,需要企业在集成聊天页时传给智齿
email 当前客服的登陆邮箱
sign 企业标识和客服 email 的 md5 校验码,sign=md5(sysNum+email)
(开启安全密钥后)sign=MD5(sysNum+密钥+ createChatTime +partnerId)若 partnerId 为空,则不用加到 sign 中
createChatTime 时间戳(长整型,毫秒级时间戳)
uid 咨询用户在智齿系统的用户 ID
cid 本次咨询对应会话的会话 ID
params 自定义资料字段

注: 当您切换工作台左侧用户列表时,我们会更新 iframe 的 src 属性,但 iframe 的 src 属性更新不会自动刷新嵌入的对接页面,这时我们会抛出一个 postMessage,您在对接页面监听一下即可,postMessage 监听 name:selected

呼叫中心-通话记录-通话详情页请求此页面时,传入字段包括:

字段 名称
callid 当前通话的唯一标识
email 当前客服的登陆邮箱
sign 企业标识和客服 email 的 md5 校验码,sign=md5(sysNum+email)
(开启安全密钥后)sign=MD5(sysNum+密钥+ timestamp + uphone+uemail)若 uphone 或 uemail 为空,则不用加到 sign 中
timestamp 时间戳(长整型,毫秒级时间戳)
uid 若此电话号码属于已知用户,则为该用户在智齿系统的用户 ID
uphone 本次通话的电话号码
uemail 若此电话号码属于已知用户,则为该用户在智齿系统中的第一个邮箱
ivrPath ivr 轨迹 为一个 json 字符串 navKey 为 ivr 按键,navName 为 ivr 按键对应的名称;
province 号码归属地省份 为 string 字符串
city 号码归属地城市 为 string 字符串

呼叫中心-我的任务-任务详情页请求此页面时,传入字段包括:

字段 名称
email 当前客服的登陆邮箱
sign 企业标识和客服 email 的 md5 校验码,sign=md5(sysNum+email)
(开启安全密钥后)sign=MD5(sysNum+密钥+ timestamp + uphone+uemail)若 uphone 或 uemail 为空,则不用加到 sign 中
timestamp 时间戳(长整型,毫秒级时间戳)
uid 若此电话号码属于已知用户,则为该用户在智齿系统的用户 ID
uphone 本次通话的电话号码
uemail 若此电话号码属于已知用户,则为该用户在智齿系统中的第一个邮箱

工单中心-工单详情页请求此页面时,传入字段包括:

字段 名称
email 当前客服的登陆邮箱
sign 企业标识和客服 email 的 md5 校验码,sign=md5(sysNum+email)
(开启安全密钥后)sign=MD5(sysNum+密钥+ timestamp + uphone+uemail)若 uphone 或 uemail 为空,则不用加到 sign 中
timestamp 时间戳(长整型,毫秒级时间戳)
uid 若此电话号码属于已知用户,则为该用户在智齿系统的用户 ID
uphone 客户的电话号码
uemail 客户在智齿系统中的第一个邮箱
ticketId 工单 ID

客户中心-客户详情页请求此页面时,传入字段包括:

字段 名称
partnerId 对接 ID,咨询者在第三方系统的 ID,需要企业在集成聊天页时传给智齿
email 当前客服的登陆邮箱
sign 企业标识和客服 email 的 md5 校验码,sign=md5(sysNum+email)
(开启安全密钥后)sign=MD5(sysNum+密钥+ timestamp + uphone+uemail)若 uphone 或 uemail 为空,则不用加到 sign 中
timestamp 时间戳(长整型,毫秒级时间戳)
uid 用户在智齿系统的用户 ID
uphone 用户在智齿系统中的第一个电话号码
uemail 用户在智齿系统中的第一个邮箱

质检-质检详情页请求此页面时,传入字段包括:

字段 名称
partnerId 对接 ID,咨询者在第三方系统的 ID,需要企业在集成聊天页时传给智齿
email 当前客服的登陆邮箱
sign 企业标识和客服 email 的 md5 校验码,sign=md5(sysNum+email)
(开启安全密钥后)sign=MD5(sysNum+密钥+ timestamp + uphone+uemail)若 uphone 或 uemail 为空,则不用加到 sign 中
timestamp 时间戳(长整型,毫秒级时间戳)
uid 咨询用户在智齿系统的用户 ID
cid 本次咨询对应会话的会话 ID
uphone 用户在智齿系统中的第一个电话号码
uemail 用户在智齿系统中的第一个邮箱

会话监控页请求此页面时,传入字段包括:

字段 名称
partnerId 对接 ID,咨询者在第三方系统的 ID,需要企业在集成聊天页时传给智齿
email 当前客服的登陆邮箱
sign 企业标识和客服 email 的 md5 校验码,sign=md5(sysNum+email)
(开启安全密钥后)sign=MD5(sysNum+密钥+ timestamp + uphone+uemail)若 uphone 或 uemail 为空,则不用加到 sign 中
timestamp 时间戳(长整型,毫秒级时间戳)
uid 咨询用户在智齿系统的用户 ID
cid 本次咨询对应会话的会话 ID
uphone 用户在智齿系统中的第一个电话号码
uemail 用户在智齿系统中的第一个邮箱

# 集成步骤

第一步,集成客服聊天页时传入用户对接 ID(partnerId) 如果企业开发的业务操作页面需要和用户身份关联,则此步为必选,否则非必选

第二步,企业根据自己的需要确定业务操作页面的功能和交互效果,基于智齿的开发要求完成业务操作页面开发。

当屏幕宽度为 1280 像素时,页面规格建议:

  • 人工客服工作台:建议对接页面宽度<=300 像素
  • 客户中心:建议对接页面宽度<=730 像素,高度<=500 像素
  • 呼叫中心:建议对接页面宽度<=790 像素,高度<=500 像素
  • 建议企业提供 https 地址,否则如果客服通过 https 访问智齿客服工作台时,将无法正常打开对接页面

第三步,企业管理员可在智齿客服管理后台手动配置对接菜单名称和对接页面(建议配置 https 地址)配置完毕后客服重新登录工作台后即可使用

图片

<管理后台-设置-对接页面:添加对接页面>

# 接入工单

# 对接系统内对接页面

# 首先添加自定字段或者直接使用默认字段

pastedGraphic.png

pastedGraphic_1.png

# 配置对接到工单中心

pastedGraphic_2.png

# 在工单中心点击对接页面发送 postMessage 通信创建工单

注意

对接页面参数需要开发人员根据配置好的自定义字段严格传递,如下图所示

{
    "card*title":"云客服*智齿客服",
    "card_url":"http://www.sobot.com",
    "card_desc":"云客服,在线客服系统,云呼叫中心,机器人客服,工单客服,智能客服",
    "card_note":"1500 元",
    "card_picture":"https://img.sobot.com/console/common/face/admin.png"
}

传递的数据格式必须符合 JSON 格式

发送方式采用 postMessage,例如

window.parent.postMessage({
    type:”createOrder”,
    params:{
        "card_title":"云客服_智齿客服",
        "card_url":"http://www.sobot.com",
        "card_desc":"云客服,在线客服系统,云呼叫中心,机器人客服,工单客服,智能客服",
        "card_note":"1500元",
        "card_picture":"https://img.sobot.com/console/common/face/admin.png"
    }
},"*")

type:”createOrder”,固定格式必须传递

params JSON 格式对象,对象中就是自定义字段配置的参数 id

pastedGraphic_3.png

实现效果:

pastedGraphic_4.png

pastedGraphic_5.png