开发者平台

快速入门

使用

安装

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

npm安装方式

npm install cti-js-sdk

脚本引入方式

<script type="text/javascript" src="//ctiplus-js.icsoc.net/wincall/v2/wincall-{version}.js"></script>

如果你希望始终使用最新版本，则可以直接引入最新版本

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

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

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

支持环境

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

初始化

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

var CTI = new CTIPlus(paramObj)

paramObj是一个参数对象，例如：{ws:false,webrtc:false,debug:false} ==使用ui版本需要设置renderHtml属性==

参数类型默认可选描述
tokenString-必填用户中心token
agentPhoneString_必填软电话号码
agNostring-必填坐席工号
webrtcBooleantrue可选是否使用webrtc
==renderHtml==Object_可选是否带ui渲染
websocketBooleantrue可选是否使用websocket
debugBooleanfalse可选是否使用debug
busyBooleanfalse可选登录后默认闲忙
checkBooleanfalse可选是否带上监控检测功能
sipUriString_可选sip的uri地址（非单独部署项目不用关心）
sipWsServerString_可选sip服务的完整地址（带端口）（非单独部署项目不用关心）

renderHtml对象说明

该对象包含4个属性：

  • domId

| String类型 | 默认值："PHONE_BAR"

指定页面上渲染电话条的dom元素id值

  • themeColor

| String类型 | 默认值："#485566"

指定电话条的颜色

  • prefix

| String类型 | 默认值："phone_bar"

电话条内部用来绑定事件的dom元素的id前缀。当电话条事件与页面其他事件产生冲突时，你需要设置该值。

  • autoLogin

| Boolean类型 | 默认值：true

调用init方法初始化电话条时，是否需要同时自动签入电话。

*如果设置了该参数，你可能需要在浏览器本地维护这个值，从而可以根据业务需求决定页面刷新再次初始化时是否需要电话签入。

npm模块模式示例

import { CTIPlus } from 'cti-js-sdk'
//todo 这里需要开发者根据自己实际情况来实现token等信息获取
const cti = new CTIPlus({
            token: user.token,
            agentPhone: user.phone,  //sip电话
            agNo: user.agNo
            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,
        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后面执行。

← 如何认证CTIPlus实例对象 →