Skip to main content

快速入门

安装

当前支持通过script标签和npm模块两种方式来加载Wincall sdk，{version}表示版本号

npm安装方式

npm install cti-js-sdk

脚本引入方式

latest始终指向使用最新版本，可以通过这种方式获取最新版本

<script type="text/javascript" src="//ctiplus-js.icsoc.net/wincall/v2/wincall-latest.js"></script>
提示

生产环境请勿通过以上方式直接引入，请把文件保存到本地，引用本地文件

如果你需要使用指点版本号的js，将 wincall-latest.js 修改为 wincall-{version}.js ，version为对应版本号。

注意

如果你需要使用webtrc软电话，需要你的应用支持https协议。

Google Chrome浏览器47版本后只有https协议可以使用浏览器的摄像头和麦克风资源。

浏览器支持

不需要使用网页电话

现代浏览器和 IE9 及以上（非webtrc场景）。

需要使用网页电话

现代浏览器Chrome、Firefox、Edge等

初始化

库加载后，会在全局注入一个对象window.CTIPlus，通过CTIPlus构造函数可以获得一个CTIPlus实例对象。

var cti = new CTIPlus(paramObj)

paramObj是一个参数对象，例如：{ws:false,webrtc:false,debug:false}

info

sdk中自带电话条的UI，可以直接使用，需要开启渲染的话，配置renderHtml属性即可

如果希望自己来实现电话条，则只需要不配置renderHtml即可

参数类型默认可选描述
tokenString-必填用户中心token
agentPhoneString_必填软电话号码
agNostring-必填坐席工号
webrtcBooleantrue可选是否使用webrtc
renderHtmlObject_可选是否带ui渲染
initWithLoginBooleanfalse可选初始化会自动签入，在没有renderHtml配置的情况下才生效，传true会在init的时候调用login方法签入
autoForceLoginBooleanfalse可选在其他地方登录时，直接签入不会提示已在别地儿签入
websocketBooleantrue可选是否使用websocket
debugBooleanfalse可选是否使用debug
busyBooleanfalse可选登录后默认闲忙
checkBooleanfalse可选是否带上监控检测功能
sipUriString_可选sip的uri地址（非单独部署项目不用关心）
sipWsServerString_可选sip服务的完整地址（带端口）（非单独部署项目不用关心）
autoQueueBooleanfalse可选外呼是否自动添加技能组
tokenCallBackFunction_可选token过期时的回调
tokenCallBackTimeNumber30*60*1000可选过期前提前多久回调，默认30分钟，单位为毫秒
wsReconnectTimeNumber3*60*60*1000可选坐席已经正常签入成功的状态下，ws断线尝试重连的最大时间（在该时间内ws会一直进行重连，超过该时间后则不进行重连），默认配置3小时，配置为0则不重连，即断线后SDK不会主动进行重连，单位为毫秒

renderHtml对象属性说明

属性类型默认值描述
domIdStringPHONE_BAR指定页面上渲染电话条的dom元素id值
themeColorString#485566指定电话条的颜色
prefixStringphone_bardom名称的前缀，电话条内部用来绑定事件的dom元素的id前缀。当电话条事件与页面其他事件产生冲突时，你需要设置该值
autoLoginBooleantrue自动签入,调用init方法初始化电话条时，是否需要同时自动签入电话,*如果设置了该参数，你可能需要在浏览器本地维护这个值，从而可以根据业务需求决定页面刷新再次初始化时是否需要电话签入。
callNumsArray[]指定主叫号码列表，指定后会在电话条上的主叫号码下拉框中显示，格式为 [{name:'01058545832',value:'01058545832'}]
default_callerString可选指定默认的主叫，值是主叫对象展示的name，即设置 callNums 号码中默认显示的项
autoCallBoolean可选是否开启预测式外呼，开启后将渲染预测式外呼任务的下拉选择框
raiseHandBoolean可选是否小休举手功能
diningRemindBoolean可选是否开启就餐提醒功能

npm模块模式示例

import { CTIPlus } from 'cti-js-sdk'
//todo 这里需要开发者根据自己实际情况来实现token等信息获取
const cti = new CTIPlus({
            token: user.token,
            agentPhone: user.phone,  //sip电话
            agNo: user.agNo,
            initWithLogin: true,
            autoForceLogin: true,
            renderHtml: {}
        })

cti.init(function () { console.log("这是一个初始化后的回调") });

脚本引入模式示例

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wincall Demo</title>
</head>
<body>
    <div id="PHONE_BAR"></div>
</body>
<script type="text/javascript" src="//ctiplus-js.icsoc.net/wincall-latest.js"></script>
<script>
    var CTIPlus = CTI.CTIPlus;
    //todo 这里需要开发者根据自己实际情况来实现token等信息获取
    cti = new CTIPlus({
        token: user.token,
        agentPhone: user.phone, 
        agNo: user.agNo,
        initWithLogin: true,
        autoForceLogin: true,
        renderHtml: {},
    });
    cti.init(function () { console.log("这是一个初始化后的回调") });
</script>
</html>

常见问题

一、界面没有正常展示出来

请确认是否传参正确，sdk 必要参数为token和agentPhone，ui渲染是可选需求，需要传递renderHtml属性，此属性可以为控对象{}

二、用户无法签入

请查看通过用户中心auth2.0授权获得的token,在使用时是否规范，默认情况通过授权获得的token不能直接使用，需要处理，大致是这样：res.token_type+" "+res.access_token。注意：中间的空串有空格。

三、电话无法外呼

（1）请查看xhr的response返回，看是否外呼成功，有无账号权限问题，若是权限问题请通过账号后台修改

（2）请确认是否是https环境，以及最新的浏览器版本，webrtc需要至少chrome60+.

（3）请确认你是否允许了浏览器使用你的输入/输出（话筒/听筒）设备.例如收到了NotAllowedError、PermissionDeniedError之类的错误

四、token过期处理

用户在进行token续期后，需要同时更新cti配置中的token信息

 cti.config.setState({ token: token })

五、如何签出

签出通常是和用户退出是一个原子操作，开发者应该在确认用户退出成功后调用

cti.Agent.logout();

另外直接关闭浏览器，服务端没有收到心跳，也会超时断开，时间通常为两分钟左右。

六、为什么电话条右侧是空白区域

这里是设计电话条时刻意这样排版的，初衷是把这一块区域留给发开者用来展示用户信息之类的模块使用。

七、CTIPlus对象不存在

使用script脚本加载的时候，有时候会遇到：CTIPlus is not defined之类的错误，这是由于执行CTIPlus时，脚本本身未加载完的原因。注意不要在header里执行该方法，需要在body后面执行。