CCPaaS前端 UI SDKV2.1.0

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

一、基本用法

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

下载地址:

二、注意事项

浏览器兼容型

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

代码示例

步骤一、 引入需要的js、css文件

<!-- 引入APISDk的js文件 -->
<script src="https://ccps.s4.udesk.cn/ccpaas-phone-sdk/sdk/cti-phone/2.1.0/call-center-class.es6.js"></script>
<!-- 引入UISDK的css文件 -->
<link rel="stylesheet"  href="https://ccps.s4.udesk.cn/ccpaas-phone-sdk/sdk/cti-phone/2.1.0/udesk-phone-bar.css">
<!-- 引入UISDK的js文件 -->
<script src="https://ccps.s4.udesk.cn/ccpaas-phone-sdk/sdk/cti-phone/2.1.0/udesk-phone-bar.es6.js"><script>

步骤二、 初始化UISDK实例(分为横版和竖版,选择一项即可)

横版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();

成功嵌入如果所示

Image text

三、UISDK实例参数说明

名称 类型 是否必填 说明 默认值
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
NumberInputReadonly bool 号码输入框是否只读 false
PhoneDialVisible bool 是否显示拨号盘 true
CallLogsVisible bool 是否显示通话记录 true
ManualScreenPop func 手动弹屏事件 null
Log func 错误提醒 null
CallNumberInputPlaceholder string 拨号输入框placeholder "请输入"

Buttons示例代码(用户可以根据需要自定义按钮UI,不需要自定义按钮请忽略)

    //  自定义Buttons示例
      let 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;
            }
        }
      }
      // 自定义Buttons使用 
      let udeskCtiPhoneBarInstance = new UdeskCtiPhoneBar({
            udeskCCPaasApi: UdeskCCPaasApiClassInstance,
            Buttons: Buttons  
        });

buttons传值

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

现在支持的按钮

按钮名称 说明
Answer 接听按钮
Hangup 挂断按钮
WrapUpFinish 整理时间按钮
MakeCall 拨打按钮
DialMakeCall 拨号盘拨打按钮
ManualScreenPop 手动弹屏按钮
SendSms 发送按钮
AgentStatus 坐席状态切换按钮
PhoneDialSetting 拨号盘设置按钮
按钮的内部属性
属性名称 类型 说明
ClassNames string 按钮class名
Icon string 按钮icon 如果使用现有icon命名为 udesk-cti-iconfont icon-udesk-cti-ic-按钮命令转中划线小写 例如 Hangup ->icon-udesk-cti-ic-hang-up
Text string 按钮文案
Visible bool/func 按钮显示隐藏(支持布尔值和方法调用)
Disabled bool/func 按钮是否可用(支持布尔值和方法调用)
OnClicked func 按钮点击事件(若配置此属性,即跳过内部逻辑处理,全权交于传入的方法处理)

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

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

五、SDK renderTo返回值

示例代码

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

sdk renderTo返回一个对象,对象内支持call方式,内部提供以下API可供调用

名称 参数 说明
SetCallInputNumber number: 值
options: { }
修改拨号盘输入框的值,options内暂只支持enableHideSensitiveInfo属性,控制是否要对写入的值进行隐藏敏感信息处理