通话组件

下载地址

dist目录下是已经编译压缩以后的代码,可以直接放到你的项目里使用。 如果修改了我的代码,则需要先编译,编译方法在这里

!!!注意:通话组件和udesk系统只允许有一处存在,其中一处登录,会把另一处挤下线

!!!注意:通话组件2.0版本新加入了单独的API文件使用方法基本与组件一致,说明在文档的最下方

图例

直接使用

1、将dist目录下的内容引入你自己的项目,fonts目录拷贝到你的项目静态资源目录下。

<!--  引入css-->
<link rel="stylesheet" type="text/css" href="./css/callcenter-component.css">
<!--  引入js-->
<script src='./callcenter-component.js'></script>

2、初始化组件

请先获取agent_api_token,获取方式

<script>
var callComponent = new UdeskCallcenterComponent({
    container: document.body,    //组件的容器
    token: 'xxxxxxxx',           //通过登录接口获取的客服token
    subDomain: 'demo',          //在udesk注册的二级域名,例如登录地址是demo.udesk.cn,这里填demo
    showManualScreenPop:true,    //是否开启‘手动弹屏’功能
    onScreenPop: function(conversation){},  //弹屏事件触发的方法
    onHangup: function(conversation){}
});
</script>

Options

属性名 类型 是否必须 默认 说明
container Document 通话组件的容器
token String 客服token, 获取方式
subDomain String 在udesk注册的子域名,例如登录地址是demo.udesk.cn,则subDomain是demo
showManualScreenPop String false 是否启用手动弹屏功能
onScreenPop(conversation) function 弹屏事件
onRinging(conversation) function 振铃事件,当话机振铃时触发
onTalking(conversation) function 通话事件,当接通时触发
onHangup(conversation) function 挂断事件,但挂断时触发
onWorkStatusChange(status) function 当客服状态发生变化时触发
onWorkWayChange(way) function 当客服在线方式发生变化时触发
onDropCall(result) function 点击通话组件挂断按钮后的回调函数

方法

makeCall(number)

number String 电话号码
拨号方法,传入一个有效的电话号。

destroy()

销毁通话组件

setWorkStatus(status)

status String 客服状态,只能是后面这几个值idle,busy,resting,offline
设置客服在线状态,空闲,忙碌,整理,离线,小休等.

setWorkingWay(workingWay)

workingWay String 客服在线状态,只能是后面这几个值fixed_voip_online,phone_online,voip_online
设置客服在线状态,IP话机,手机,网页电话

setupDefaultNumber(number_id,success_callback,failure_callback)

number_id number 中继号id
success_callback function 请求成功时的回调
failure_callback function 请求失败时的回调
设置新的中继号

hangup(success_callback, failure_callback)

success_callback function 请求成功时的回调
failure_callback function 请求失败时的回调
挂断当前通话,参数是成功与失败的回调,success_callback仅表示请求发送成功,具体挂机是否成功以onDropCall事件为准。

getCallNumbers()

返回的是中继号列表:[]{id: 1, number: "057126200670", name: "李戈", memo: ""},...]

属性名称 描述
id 中继号id
number 电话号码
name 名称
memo 备注

getAutomaticCallNumGroup()

返回的是自动外呼任务客户的电话组,只有振铃并且是自动外呼的时候才会获得该客户的数据,如:{ ad_task_id:1,customer_id:2,numbers:["18812345678", "18712345678"]} 注: 只有振铃并且是自动外呼任务时才会储存数据,其他情况下这个字段是空 具体如下:

属性名称 描述
ad_task_id 任务id
customer_id 客户id
numbers ["18812345678", "18712345678"] # 号码/号码组}

conversation对象

弹屏事件里会传入conversation对象,该对象包含以下这些参数

属性名称 描述
call_id call_id
conversation_id 通话记录ID
call_type 通话类型,只能是下列几个值之一,呼入、呼出、呼入(转接)、呼入(三方),呼入(咨询),呼入(强插),呼入(监听),呼入(强拆)
customer_phone_number 客户号码
queue_name 来源队列
customer_phone_location 归属地
agent_id 客服ID
agent_name 客服姓名
ring_time 振铃开始时间,例子:2017-03-09T14:34:24+08:00

通话API

1、将dist目录下的call-api.js导入项目

<!--  引入js-->
<script src="./js/call-api.js"></script>

2、使用前需要初始化token

请先获取agent_api_token,获取方式

<script>
window.callAPI.tokenInit(
        '88354be49e4aa632bdbfb8a60bcae04ec157fad4b4fa554daebae3de1d7bc8de9cc80e9f3c39174cb45d3c3ab52fdcfdaf1216ff2dedc11aa13a1b14e89819065a547cf2',
        'linapp',
        function(callback) {
            setTimeout(function() {
                callback('f3ebff04e6cf899cac39da98bcb1ccdd77e9c8ccd94fa70419668c4bb6510b5fe277cb786662b4c6173706fa2915e9184619f42b766f76226f043693cca1dbdf5a2e1d49');
            }, 1000);
        }
    )
</script>

tokenInit初始化参数

方法

tokenInit(token,subDomain,onTokenExpired)

为API初始化token和subDomain 注:在调用API之前必须初始化token

参数说明

属性名 类型 是否必须 说明
token String 客服token, 获取方式
subDomain String 在udesk注册的子域名,例如登录地址是demo.udesk.cn,则subDomain是demo
onTokenExpired(result) function 当token失效时的回调函数

setMonitorWorkStatus(agent_no,workStatus,successCallback,failureCallback)

为其他客服切换坐席在线状态 如空闲 忙碌 离线 小休等 自定义小休请参照另外一个方法

setMonitorWorkRestingStatus(agent_no,cc_custom_state_id,successCallback,failureCallback)

为其他客服切换自定义小休的状态,如果需要切换 空闲 忙碌 离线 小休等请参照另外一个方法

setMonitorAgentWorkWay(agent_no, agent_work_way,successCallback,failureCallback)

为其他客服切换设备,如IP话机 手机 网页电话

monitorAgentListeing(agent_no,successCallback,failureCallback)

对其他客服进行监听操作

monitorAgentInterpose(agent_no,successCallback,failureCallback)

对其他客服进行强插操作

monitorAgentSubstitute(agent_no,successCallback,failureCallback)

对其他客服进行拦截操作

参数说明

属性名 类型 是否必须 说明
agent_no number 客服ID
workStatus String 客服状态,只能是后面这几个值idle,busy,resting,offline
cc_custom_state_id number 自定义小休状态的id
agent_work_way string 设备状态,只能是fixed_voip_online,phone_online,voip_online
successCallback function 请求成功的回调函数
failureCallback function 请求失败的回调函数

浏览器适用情况

IE firefox chrome safari opera
10 11 16 6 12.10

如何编译

1、安装nodejs

下载后安装

2、安装webpack

项目用webpack打包,需要先安装webpack

npm install -g webpack

3、下载依赖

进入项目目录,运行下面的命令

npm install

4、编译,打包,压缩

webpack