CCPaaS前端 UI SDKV2.1.0

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

一、基本用法

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

下载地址：

• js下载链接: https://ccps.s4.udesk.cn/ccpaas-phone-sdk/sdk/cti-phone/2.2.0/udesk-phone-bar/index.js
• css下载链接:https://ccps.s4.udesk.cn/ccpaas-phone-sdk/sdk/cti-phone/2.2.0/udesk-phone-bar/index.css

二、注意事项

浏览器兼容型

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

成功嵌入如果所示

三、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属性，控制是否要对写入的值进行隐藏敏感信息处理