呼叫能力 (UI电话条)
# 呼叫能力 (UI电话条)
# 注意事项:
- 建议优先使用 Chrome 浏览器,此版本只针对 PC 浏览器做了全面测试,在移动端 H5 页面中使用可能会有未知的兼容问题,不建议在移动端 H5 页面中对接使用。
- 由于软电话需要依赖浏览器提供的 WebRTC 能力,因此使用软电话时,建议使用对 WebRTC 支持较好的浏览器,例如:Chrome 或者 Firefox 浏览器。
- 集成 SDK 需要使用 HTTPS 协议。
- Chrome 浏览器需开启麦克风、声音权限,Firefox 浏览器需开启麦克风、扬声器权限。
- 在 iFrame 中使用需要给 iframe 添加 allow 属性,iframe.allow = "midi;encrypted-media;microphone *;camera *;"这样才能在 iframe 中使用 WebRTC 的相关能力。
# ui-sdk插件引用地址
注意:使用SDK,请按照下面的方式添加sysnum参数,sysnum对应的是Sobot的企业ID(可在Sobot管理后台=》管理中心=》账户管理=》企业账户=》企业信息中查看),切勿将SDK代码下载到本地,放到自己服务器上使用,避免后续获取不到SDK的更新,造成SDK不可用。
<script type="text/javascript" src="https://www.soboten.com/call-bar/6.3.2/tel-bar-sdk.js?sysnum=您的企业ID"></script>
1
# 初始化
# ● 电话条初始化
//如果只引入了UI电话条SDK,SDK内部会先加载JS-SDK,加载完成后,才会挂载 window.sobotAgent对象,使用window.sobotAgent.initTelBar的时候,请先判断方法是否存在;
//如果在引入UI电话条SDK之前,引入了JS-SDK,window.sobotAgent的挂载是同步的,可以在后续代码中直接使用
window.sobotAgent.initTelBar(
{
id: 'root',
token: "xxxxxxxxx",
companyId: "xxxxxxxxx",
agent: "1000", //座席ID
agentType: "0",
themeColor:{
showLeftLine: true,
showRightLine: true,
light: "#ffffff",
dark: "#515A7C",
darkContent: "#434A66",
},
appConfig:{
placement: 'right' //辅助功能位置
showQueueInfo: true, //技能组排队信息
showNetDelayInfo: true, // 网络延迟信息
},
actionConfig:{
transfer: true, //转移
consult: true, //咨询
keepContinue: true, //保持(包含取消保持)
stillVoice: true, //静音(包含取消静音)
sendSatisfaction: true, //发送满意度
extendBtn: true, //是否显示延长按钮
internal: true, // 是否显示内部通话按钮
extendFinishTime: 60, //延长整理时长,默认60
},
settingConfig:{
readOnlyExt: false,
showUnbind: true,
}
},
function (msg) {
// 会将电话条收到的事件通过该函数推送出来
// 如果您对接了UI-SDK并且需要进行自己的来电弹屏信息展示,可以在此处监听通话事件进行处理, 如下:
switch(msg.messageID) {
case 'EventRinging' :
// 座席来电振铃
// do something ...
break
case 'EventDialing' :
// 外呼振铃
// do something ...
break
case 'EventTokenInvalid' :
// 坐席Token失效
// 调用您代码中获取Token的方法,重新获取Token,获取成功后调用handleRefreshToken更新SDK的Token
// window.sobotAgent.handleRefreshToken(newToken)
// 注意:
// 1. Token过期后,如果不调用刷新Token的方法,仍然可以接打电话,但是http接口无法调用
// 2. EventTokenInvalid事件触发以后,会等待10s获取新Token,在这期间发出的http请求会进行缓存,
// 在写入新Token之后会将缓存的请求重新发出
// 3. 如果不需要使用handleRefreshToken自动更新Token,建议在EventTokenInvalid添加提示逻辑,
// 提示坐席当前Token已过期,刷新页面或者进行其他能够重新获取Token的操作
break
default:
// do something ...
}
}
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
# 请求参数params说明
属性 | 名称 | 类型 | 可空 | 说明 |
---|---|---|---|---|
token | 登录鉴权 | string | 否 | 座席登录鉴权(对接token方式请参照智齿接口认证文档)需对接座席级授权接口(座席级token) |
companyId | 公司编码 | string | 否 | 公司编码 |
agent | 座席 | string | 否 | 座席工号 或 座席id。 |
agentType | 接口座席参数类别 | string | 否 | 0:座席工号;1:座席id;为空时默认为座席工号。 |
id | 电话条位置 | string | 否 | 电话条在页面中的位置。例如:'root',则电话条会展示在id为root的元素内。 |
themeColor | 电话条样式配置 | object | 是 | 自定义电话条的样式(例如背景颜色、分割线等)。 为空时,使用系统推荐的默认配置。见下表1 |
appConfig | 辅助功能配置 | object | 是 | 电话条是否需要显示辅助功能(网络延时、排队人数等),以及自定义辅助功能。 为空时,默认不显示。见下表2 |
actionConfig | 电话功能配置 | object | 是 | 自定义电话功能。 为空时,使用系统推荐的默认配置。见下表3 |
settingConfig | 设置功能配置 | object | 是 | 自定义设置功能。 为空时,使用系统推荐的默认配置。见下表4 |
表1 themeColor参数说明
属性 | 名称 | 类型 | 可空 | 说明 |
---|---|---|---|---|
showLeftLine | 左侧分割线 | boolean | 是 | 电话条(含辅助功能区域)最左侧是否需要显示分割线。 false:隐藏;true:显示。 默认隐藏。 |
showRightLine | 右侧分割线 | boolean | 是 | 电话条(含辅助功能区域)最右侧是否需要显示分割线。 false:隐藏;true:显示。 默认隐藏。 |
light | 未通话时UI背景色 | string | 是 | 未通话时UI背景颜色(RGB颜色)。 为空时,默认#FFFFFF。 |
dark | 通话中主区域背景色 | string | 是 | 通话中电话条主区域的背景颜色(RGB颜色)。 为空时,默认#515A7C。 |
darkContent | 通话中扩展区背景色 | string | 是 | 通话中电话条扩展区域的背景颜色(RGB颜色)。 为空时,默认#434A66。 |
表2 appConfig参数说明
属性 | 名称 | 类型 | 可空 | 说明 |
---|---|---|---|---|
placement | 显示位置 | string | 是 | 辅助功能显示在电话条的左侧还是右侧。 left:电话条左侧;right:电话条右侧。 |
showQueueInfo | 查看排队人数 | boolean | 是 | 是否显示该功能图标。 false:隐藏;true:显示。 默认显示。 |
showNetDelayInfo | 查看网络延时 | boolean | 是 | 是否显示该功能图标,改图标仅限接听方式为网页电话时可见。 false:隐藏;true:显示。 默认显示。 |
表3 actionConfig参数说明
属性 | 名称 | 类型 | 可空 | 说明 |
---|---|---|---|---|
transfer | 转移 | boolean | 是 | 是否显示操作按钮。 false:隐藏;true:显示。 为空时,默认显示。 |
consult | 咨询 | boolean | 是 | 是否显示操作按钮。 false:隐藏;true:显示。 为空时,默认显示。 |
keepContinue | 保持(包含取消保持) | boolean | 是 | 是否显示操作按钮。 false:隐藏;true:显示。 为空时,默认显示。 |
stillVoice | 静音(包含取消静音) | boolean | 是 | 是否显示操作按钮。 false:隐藏;true:显示。 为空时,默认显示。 |
sendSatisfaction | 发送满意度 | boolean | 是 | 是否显示操作按钮。 false:隐藏;true:显示。 为空时,默认显示。 |
extendBtn | 延长整理时长 | boolean | 是 | 是否显示操作按钮。 false:隐藏;true:显示。 为空时,默认显示。 |
extendFinishTime | 延长时间 | number | 是 | 配置后每次按此时间延长整理。 30-900秒。 为空时,默认60秒。 |
internal | 内部通话 | boolean | 是 | 是否显示操作按钮。 false:隐藏;true:显示。 为空时,默认显示。 |
acwToBusy | 结束整理并置忙 | boolean | 是 | 是否显示操作按钮。 false:隐藏;true:显示。 为空时,默认显示。 |
dialingPad | 拨号盘 | boolean | 是 | 是否能够使用拨号盘。 false: 隐藏;true:显示 为空时,默认显示 |
soundRecording | 通话录音(包含取消通话录音) | boolean | 是 | 是否显示操作按钮。 false:隐藏;true:显示。 为空时,默认隐藏。 |
表4 settingConfig参数说明
属性 | 名称 | 类型 | 可空 | 说明 |
---|---|---|---|---|
readOnlyExt | 修改分机号 | boolean | 是 | 修改座席绑定的分机号。 false:可改;true:只读。 为空时,默认可改。 |
showUnbind | 离线后自动解绑 | boolean | 是 | UI是否显示该功能。 false:隐藏;true:显示。 为空时,默认显示。 |
chooseEdgeLocation | 语音接入点 | boolean | 是 | 通过选择最近的语音接入站点,能够利用附近的服务器进行实时语音通讯,从而减少通信延迟,有效提升系统的响应速度和带宽使用效率。 |
# 呼叫操作
# ● 外呼
//需要在电话条初始化后才能执行
window.sobotAgent.makeCall({
otherDN: "133****3333",
privacyNumber: "XFHAOWHFEFLASJLKWJLD",
userData: {}
})
1
2
3
4
5
6
2
3
4
5
6
# 请求参数
属性 | 名称 | 类型 | 可空 | 说明 |
---|---|---|---|---|
otherDN | 客户号码 | string | 否 | UI显示的客户号码。 |
privacyNumber | 客户号码加密 | string | 是 | 支持加密号码外呼;例如:XFHAOWHFEFLASJLKWJLD; |
userData | 自定义数据 | object | 是 | 在电话事件中会返回该值。 在通话记录中会存储该值。 需要encodeURIComponent编码 |
上次更新: 2025/4/15 23:29:22