CCPaaS前端SDK UI V2.1.0

此文档提供外呼UI SDK基本用法、注意事项、实例代码等。

基本用法

  1. 根据下载地址下载SDK js和css文件,引入到需要嵌入的页面;
  2. 复制示例代码,修改配置参数信息,调用相应方法使用SDK;

链接:https://ccps.s4.udesk.cn/ccpaas-phone-sdk/sdk/cti-phone/2.1.0/udesk-phone-bar.es6.js

注意事项

浏览器兼容型
  1. SDK目前支持IE9+(含)的IE浏览器与基于它内核(360/qq/…)、其他主流浏览器(chrome/firefox/…)。
  2. 如果有可能,建议您升级到IE10或更高版本,以获得最佳的用户体验。

参数说明

名称 类型 是否必填 说明 默认值
LanguageCode string 语言 "ZH-CN"
UdeskCCPaasApi object CC PaaS外呼API SDK的实例 Null
MonitorCallCenterEventSource string 监听API事件的命名空间 "udesk-call-center-phone"
Buttons object 配置按钮,以下有详细配置介绍 {}
EnableHideSensitiveInfo bool 是否开启敏感信息隐藏 false
IsClearNumberInputByCallSuccess bool 是否在外呼成功之后清空拨号输入框 true
EnableCallInTimeoutMonitor bool 是否开启呼入超时提醒 false
CallInTimeoutSecond bool 呼入超时秒数 60
ManualScreenPop func 手动弹屏事件 null
Log func 错误提醒 null
RingingStatusIcon string 振铃中的展示icon "udesk-cti-iconfont icon-udesk-cti-ic-ring-in"
TalkingingStatusIcon string 通话中的展示icon "udesk-cti-iconfont icon-udesk-cti-ic-talking"
PhoneDialButtonClearIcon string 拨号盘中的清空icon "udesk-cti-iconfont icon-udesk-cti-ic-delete-shanchu"
PhoneDialButtonDeleteIcon string 拨号盘中的删除icon ""
CallNumberInputPlaceholder string 拨号输入框placeholder "请输入"

buttons传值

用于重写部分按钮默认属性

现在支持的按钮

按钮名称 说明
Answer 接听按钮
Hangup 挂断按钮
WrapUpFinish 整理时间按钮
MakeCall 拨打按钮
DialMakeCall 拨号盘拨打按钮
ManualScreenPop 手动弹屏按钮
SendSms 发送按钮
AgentStatus 坐席状态切换按钮
PhoneDialSetting 拨号盘设置按钮
内部属性
属性名称 类型 说明
ClassNames string 按钮class名
Icon string 按钮icon
Text string 按钮文案
Visible bool/func 按钮显示隐藏(支持布尔值和方法调用)
Disabled bool/func 按钮是否可用(支持布尔值和方法调用)
OnClicked func 按钮点击事件(若配置此属性,即跳过内部逻辑处理,全权交于传入的方法处理)
示例代码
let Buttons = {
    Buttons: {
        Hangup: {
            ClassNames: '',
            Icon: "udesk-cti-iconfont icon-udesk-cti-ic-hang-up",
            Text: "挂断",
            Visible: true,
            Disabled: false,
            OnClicked: () => { }
        },
        Answer: {
            ClassNames: '',
            Icon: "udesk-cti-iconfont icon-udesk-cti-ic-phone-answer",
            Text: "接听",
            Visible: ({ connectState, agentState, agentSubState, urrentAgentStartTime, phoneMode, phoneState, callStatus, callInputNumber }) => {
                return true;
            },
            Disabled: ({ connectState, agentState, agentSubState, urrentAgentStartTime, phoneMode, phoneState, callStatus, callInputNumber }) => {
                return true;
            }
        }
    }
}

当visible和disabled传入的是方法时,可以拿到的上下文属性

名称 类型 说明
connectState string 当前外呼组建连接状态
agentState string 当前坐席状态
agentSubState string 当前坐席子状态
currentAgentStartTime string 切换到当前坐席状态开始的时间
phoneMode string 当前话机模式
phoneState string 当前话机状态
callStatus object 外呼通话中的上下文
callInputNumber string 当前拨号盘输入框输入的值

实例代码

横版SDK(UdeskCtiPhoneBar)

let udeskCtiPhoneBarInstance = new UdeskCtiPhoneBar({
        udeskCCPaasApi: UdeskCCPaasApiInstance,
});
const uiInstance =  udeskCtiPhoneBarInstance.RenderTo(document.getElementById("root"));
udeskCtiPhoneBarInstance.Destroy();

竖版SDK(UdeskVerticalPhone)

let udeskVerticalPhoneInstance = new UdeskVerticalPhone({
        udeskCCPaasApi: UdeskCCPaasApiInstance,
});
const uiInstance =udeskVerticalPhoneInstance.RenderTo(document.getElementById("root"));
udeskVerticalPhoneInstance.Destroy();

SDK renderTo返回值

sdk renderTo返回一个对象,对象内支持call方式,内部提供以下API可供调用
名称 参数 说明
SetCallInputNumber number: 值
options: { }
修改拨号盘输入框的值,options内暂只支持enableHideSensitiveInfo属性,控制是否要对写入的值进行隐藏敏感信息处理

示例代码

uiInstance.call("SetCallInputNumber", "12345678", {
  EnableHideSensitiveInfo: true
})