publink-cti-js-sdk

v3.7.16

Published

2 years ago

--- id: cti-js-sdk-start title: 快速入门 ---

Downloads

0High
0Medium
0Low

huangbaocheng

id: cti-js-sdk-start title: 快速入门

环境安装

node 版本使用 8.17.0 使用yarn安装

快速入门

使用

安装

当前支持通过<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场景）。
现代浏览器和 IE Edge（webrtc场景）。

初始化

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

var cti = new CTIPlus(paramObj)

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

参数 | 类型 | 默认 | 可选 | 描述 ---|--- |--- |--- |--- token | String | - | 必填 | 用户中心token agentPhone |String| _ |必填| 软电话号码 agNo | string | - | 必填 | 坐席工号 webrtc |Boolean| true |可选| 是否使用webrtc renderHtml |Object| _ |可选| 是否带ui渲染 initWithLogin | Boolean | false | 可选 | 初始化会自动签入，在没有renderHtml配置的情况下才生效，传true会在init的时候调用login方法签入 autoForceLogin | Boolean | false | 可选 | 在其他地方登录时，直接签入不会提示已在别地儿签入 websocket |Boolean| true |可选| 是否使用websocket debug |Boolean| false |可选| 是否使用debug busy |Boolean| false |可选| 登录后默认闲忙 check |Boolean| false |可选| 是否带上监控检测功能 loginType |String |'1'| 可选 | 1为动态 2为静态不传则默认1( 静态坐席浏览器关闭 ws 连接不会断开) sipUri | String | _ |可选| sip的uri地址（非单独部署项目不用关心） sipWsServer | String | _ |可选| sip服务的完整地址（带端口）（非单独部署项目不用关心） autoQueue | Boolean | false | 可选 | 外呼是否自动添加技能组 tokenCallBack | Function | _ |可选| token过期时的回调 tokenCallBackTime | Number | 30*60*1000 | 可选 | 过期前提前多久回调，默认30分钟，单位为毫秒 wsReconnectTime | Number | 3*60*60*1000 | 可选 | 坐席已经正常签入成功的状态下，ws断线尝试重连的最大时间（在该时间内ws会一直进行重连，超过该时间后则不进行重连），默认配置3小时，配置为0则不重连，即断线后SDK不会主动进行重连，单位为毫秒 hiddenPartNumber | Boolean | false | 可选 | 是否脱敏，默认为false

renderHtml对象属性说明

domId

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

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

themeColor

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

指定电话条的颜色

prefix

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

dom前缀

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

autoLogin

| Boolean类型 | 默认值：true

自动签入

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

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

callNums

| Array类型 | 可选

指定主叫列表

选取的对象必须是在默认主叫列表中本身就存在的对象。例：

callNums:[{name:'01058545832',value:'01058545832'}]

default_caller

| String类型 | 可选

指定默认的主叫

值是主叫对象展示的name。

autoCall

| Boolean类型 | 可选

自动外呼功能

特定场景使用，会先呼入后台导入的指定号码，呼叫成功后再给坐席来电。

popUp

| Boolean 类型 | 默认值true

是否显示来电的接听弹窗

diningRemind

| Boolean 类型 | 默认值false

showQueSum

| Boolean 类型 | 默认值false

是否显示就餐提醒的推送消息

sdk文档

http://dev.icsoc.net/docs/develop/cti-js-sdk/cti-js-sdk-start/

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("这是一个初始化后的回调") });

cti.Event.add("all", result => {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后面执行。