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(即agent_api_token)
subDomain: 'demo', //在udesk注册的二级域名，例如登录地址是demo.udesk.cn，这里填demo
showManualScreenPop:true, //是否开启‘手动弹屏’功能
onScreenPop: function(conversation){}, //弹屏事件触发的方法
onHangup: function(conversation){}
});
</script>
Options
| 属性名 | 类型 | 是否必须 | 默认 | 说明 |
|---|---|---|---|---|
| container | Document | 是 | 通话组件的容器 | |
| token | String | 是 | 客服token(即agent_api_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 | 否 | 点击通话组件挂断按钮后的回调函数 | |
| onInitSuccess() | function | 否 | 拉取初始化数据成功时触发 | |
| onInitFailure() | function | 否 | 拉取初始化数据失败时触发 | |
| onTokenExpired(callback:(newToken:string)=>void) | function | 否 | 当token失效时触发，参数是一个回调方法，调用这个回调方法刷新token | |
| onIvrCallResult(result:{code:number}) | function | 否 | IVR转出结果,code为1000时成功 | |
| onResumeAgentResult(result:{code:number}) | function | 否 | IVR转回结果，code为1000时成功 |
方法
makeCall(number, options)
拨打电话
number string -（必填）电话号码
options object
该参数是一个object，可以传以下参数options.biz_id string
该字段由您指定，可以是任意字符串，通话事件推送时会带上这个id
answer()
当振铃时，调用此接口接听电话，
仅在线状态为网页电话时有效。
destroy()
销毁通话组件
setWorkStatus(status)
设置客服在线状态,空闲,忙碌,整理,离线,小休等.
status String - 客服状态，只能是idle，busy，resting，offline
setWorkingWay(workingWay)
设置客服在线方式,IP话机,手机,网页电话
workingWay String - 客服在线状态，只能是后面这几个值fixed_voip_online，phone_online，voip_online
setupDefaultNumber(number_id,success_callback,failure_callback)
设置新的中继号
number_id number 中继号id
success_callback function 请求成功时的回调
failure_callback function 请求失败时的回调
hangup(success_callback, failure_callback)
挂断当前通话，参数是成功与失败的回调，success_callback仅表示请求发送成功，具体挂机是否成功以onDropCall事件为准。
success_callback function 请求成功时的回调
failure_callback function 请求失败时的回调
getCallNumbers()
返回的是中继号列表，{id: number, number: string, name: string, memo: string}[]
| 属性名称 | 描述 |
|---|---|
| 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"] # 号码/号码组} |
startIvrCalling(ivrNode:{transfer_mode:"agent_hold"|"agent_hangup",id:string})
转IVR，参数为ivrId
holdCallSelect(successCallback:()=>void, failureCallback:()=>void)
保持通话
recoveryCallSelect(successCallback:()=>void, failureCallback:()=>void)
取回通话
transferToGroup(groupId:number|string, successCallback:(res)=>void, failureCallback:(res)=>void)
转接到客服组
successCallback仅表示该请求成功，真正是否转接成功需要在onTransferResult里获取
transferToExternalPhone(phoneNumber:string, successCallback:(res)=>void,failureCallback:(res)=>void)
转接外线
successCallback仅表示该请求成功，真正是否转接成功需要在onTransferResult里获取
startConsultingToExternalPhone(phoneNumber:string, successCallback:(res)=>void,failureCallback:(res)=>void)
咨询外线
successCallback仅表示该请求成功，真正是否咨询成功需要在onConsultResult里获取
startThreeWayCallingToExternalPhone(phoneNumber: string, successCallback:(res)=>void, failureCallback:(res)=>void)
三方外线
successCallback仅表示该请求成功，真正是否三方成功需要在onThreeWayCallingResult里获取
transferAfterConsult(agentId: string)
咨询后转接
agentId: 客服id
threeWayCallingAfterConsult(agentId: string)
咨询后三方
agentId: 客服id
transferAfterThreeWayCalling(agentId: string)
三方后转接
agentId: 客服id
setupDefaultNumber(phoneNumberId: string|number, successCallback:(res)=>void, failureCallback:(res)=>void)
设置外呼时的主叫号码，第一个参数为中继号ID
getCallNumbers():Object[]
获取可选的中继号
conversation对象
弹屏事件里会传入conversation对象，该对象包含以下这些参数
| 属性名称 | 描述 |
|---|---|
| call_id | call_id |
| conversation_id | 通话记录ID |
| call_type | 通话类型,只能是下列几个值之一，呼入、呼出、呼入（转接）、呼入（三方），呼入（咨询），呼入（强插），呼入（监听），呼入（强拆） |
| customer_phone_number | 客户号码 |
| customer_phone_location | 归属地 |
| queue_name | 来源队列 |
| queue_overflow | 溢出队列 |
| queue_status | 排队状态 |
| queue_time | 排队时长（秒） |
| agent_id | 客服ID |
| agent_name | 客服名称 |
| agent_email | 客服邮箱 |
| ring_time | 振铃开始时间，例子：2017-03-09T14:34:24+08:00 |
| ivr_variables | 智能路由里保存的变量，格式变量名1:[变量值1][,变量名2:[变量值2]...]，例子："x:1,y:2,aa:1,bb:2,cc:,变量2:2" |
| display_name | 中继号 |
| device_info | 客服在线方式 |
| category | 通话类型，consult(咨询)，consult_outline(咨询外线)，three_party(三方)，three_party_outline(三方外线)，listening(监听)，barge_in(强插)，whisper(密语)，transfer(转接)，transfer_outline(转接外线)，substitute(拦截)，transfer_after_consult(咨询后转接)，three_party_after_consult(咨询后三方)，transfer_after_three_party(三方后转接)，requeue(重新入队) |
| dtmf | dtmf |
| multi_ring_count | 顺振次数 |
| relevant_agent | 相关客服 |
通话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