首页 > API中心 > 呼叫中心 > 快速入门
快速入门-CC SDK接入
呼叫中心
CC SDK對接流程
SDK 初始化流程
在head標籤中創建
獲取到token後,調用window.ccSdk.register傳入token完成初始化操作
生成SDK憑證介面說明
register方法
注册SDK
參數
說明
是否必填
類型
token
string
是
sdk token(接口生成)
noWorkMode
Boolean
否
sdk是否開啟無工作台模式(true: 開啟,false:關閉,預設false)
isRemark
Boolean
否
是否顯示備註(開啟:true,關閉:false,預設true)
isInformation
Boolean
否
是否展示被叫訊息(開啟:true,關閉:false,預設true)
lang
string
否
目前顯示語種(預設顯示英語) en:英語,es:西班牙語
closeInitiateCall
Boolean
否
是否關閉主動撥號功能(預設不關閉)。 false: 不關閉 ,true: 關閉
複製
示例:
import http from 'axios'
//1、為了保證鑒權資訊安全,需要由客戶系統後端服務實現SDK鑒權能力,並且將該介面暴露至客戶前端使用,客戶後端系統接入鑒權能力檔案可見( https://www.laaffic.com/zh/api/call/ccsdkAuthentication/ )
//2、' https://xxx.xx.cn/createAuth '路徑需要替換成客戶系統的後端介面
//3、整體請求路徑說明:[客戶系統前端]->[客戶後端介面]->[我方API介面]
//4、SDK注册僅需要一行程式碼window.ccSdk.register({token:xxx}),下方示例發送的post請求僅做參攷,目的是從後臺介面拿取到toekn,具體實現邏輯可自定義
http.post('url', res => {
window.ccSdk.register({
token: res.data,
noWorkMode: false,
isRemark: true,
isInformation: true,
})
})
監聽SDK - 坐席狀態
通過給sdk組件添加id,通過addEventListener監聽seatStatus回調,如:
copy
示例:
document.getElementById('sdk').addEventListener('onSeatStatus', option => {
console.log('option:', option)
});
回調參數
參數
類型
備註
detail
array
坐席狀態: 1:離線, 2:空閒, 3:示忙, 4:話後整理, 5:小休,
複製
示例:
import { register } from 'sip-sdk.js'
// 監聽坐席狀態
const sdk = document.getElementById('sdk')
sdk.addEventListener('onSeatStatus', (data) => {
console.log('data:', data)
})
監聽SDK - 呼叫狀態
通過給sdk組件添加id,通過addEventListener監聽onCall回調,如:
copy
示例:
document.getElementById('sdk').addEventListener('onCall', option => {
console.log('option:', option)
});
回調參數
參數
類型
備註
detail
callStatus
Object
呼叫狀態: 1-呼叫中, 2-響鈴中, 3-通話中, 4-通話結束, 5-拒接或掛斷(通話未建立)
calledNumber
Number
被叫號碼
calledInfo
Array
被叫資訊(溫馨提示:此欄位可能為空,請注意判斷)
複製
示例:
import { register } from 'sip-sdk.js'
// 監聽呼叫狀態
const sdk = document.getElementById('sdk')
sdk.addEventListener('onCall', (option) => {
console.log('option:', option)
})
監聽SDK - webrtc狀態
通過給sdk組件添加id,通過addEventListener監聽onWebrtcStatus回調,如:id.addEventListener('onWebrtcStatus', option => {})。此參數每五秒推送一次
參數
類型
說明
detail
Array
webrtc狀態:0-未連接,1-已連接
複製
示例:
import http from 'axios'
http.post('url', res => {
window.ccSdk.register({
token: res.data,
})
})
// 監聽webrtc狀態
const sdk = document.getElementById('sdk')
sdk.addEventListener('onWebrtcStatus', (option) => {
console.log('option:', option)
})
監聽SDK - http請求狀態
通過給sdk組件添加id,通過addEventListener監聽onHttp回調,如:id.addEventListener('onHttp', option => {})
參數
類型
字段
說明
detail
Object
code
100200:未登錄
message
接口返回信息
複製
示例:
import http from 'axios'
http.post('url', res => {
window.ccSdk.register({
token: res.data,
})
})
// 監聽http狀態
const sdk = document.getElementById('sdk')
sdk.addEventListener('onHttp', (option) => {
const res = option.detail[0]
console.log('res:', res)
})
Event事件
監聽sdk坐席狀態,通過給sdk組件添加id,通過addEventListener監聽seatStatus回檔,如:id.addEventListener('onSeatStatus', option => {})
參數
類型
備註
detail
array
坐席狀態:1:離線,2:空閒,3:示忙,4:話後整理,5:小休
複製
示例:
import http from 'axios'
http.post('url', res => {
window.ccSdk.register({
token: res.data,
})
})
// 監聽坐席狀態
const sdk = document.getElementById('sdk')
sdk.addEventListener('onSeatStatus', (data) => {
console.log('data:', data)
})
Event事件 - callPhone
調用sdk通話功能,給sdk組件添加id或者ref,調用callPhone(option)方法,如:id.callPhone(option)
注意:若當前通話處於話後整理狀態時調用此方法,則會直接提交結束通話並進入下一通通話;若處於響鈴中、呼叫中、通話中狀態,則禁止調用。
參數
說明
是否必填
類型
option
phone
string
是
需要撥打的號碼
info
string
否
被叫資訊(最長1000字元,超出會被截取)
callback
code
number
否
0:成功; 999901:無效號碼; 999905:僅示閑下可操作; 999906:提交失敗
message
string
否
當前接聽操作返回的資訊
複製
示例:
import http from 'axios'
http.post('url', res => {
window.ccSdk.register({
token: res.data,
})
})
const sdk = document.getElementById('sdk')
const call = document.getElementById('call')
call.onclick = () => {
const data = {
phone: '13212345678',
info: '張三 20歲 461385413131',
}
sdk.callPhone(data)
}
Event事件 - 重連webrtc
重新連接webrtc。給sdk組件添加id或者ref,調用callPhone()方法,如:id.reConnectWebrtc()。溫馨提醒:在 webrtc狀態 為未連接狀態,即onWebrtcStatus回調為0,再調用此方法,且建議設置限制重連次數
複製
示例:
import http from 'axios'
http.post('url', res => {
window.ccSdk.register({
token: res.data,
})
})
const sdk = document.getElementById('sdk')
const reConnect = document.getElementById('reConnect')
sdk.addEventListener('onWebrtcStatus', (option) => {
const data = option.detail[0]
if(data === 0) {
sdk.reConnectWebrtc()
}
})
Event事件 - 掛斷通話 hangupCall
調用sdk掛斷當前通話功能。
給sdk組件添加id或者ref,調用hangupCall(callback)方法,如:id.hangupCall(callback)
callback:回調參數(此參數返回當前掛斷的狀態)
回調參數
類型
說明
callback
code
number
0:掛斷成功; 999901:掛斷失敗
message
string
當前掛斷操作返回的信息
複製
示例:
import http from 'axios'
http.post('url', res => {
window.ccSdk.register({
token: res.data,
})
})
const sdk = document.getElementById('sdk')
const hangup = document.getElementById('hangup')
hangup.onclick = () => {
sdk.hangupCall((data) => {
// data中返回code、message
})
}
Event事件 - 切換坐席狀態
調用sdk切換坐席狀態功能
給sdk組件添加id或者ref,調用switchStatus(value)方法,注意此方法必須放在聲明async函數下,否則await會拋出錯誤,如:
copy
示例:
async function switchFn() {
const res = await id.switchStatus(value)
}
參數示例
參數
類型
備註
value
number
坐席的狀態,2:示閒,5:小休
回呼參數
參數
類型
備註
res
switchStatus的返回結果,code為0代表正常調用,否則異常
code
number
0:切換成功,999001:不允許切換的狀態
message
string
目前方法傳回的訊息
复制
示例:
import http from 'axios'
http.post('url', res => {
window.ccSdk.register({
token: res.data,
})
})
const sdk = document.getElementById('sdk')
const switchDom = document.getElementById('switchDom')
switchDom.onclick = () => {
const res = await sdk.switchStatus(2)
console.log('switchStatus:', res)
}
Event事件 - 接聽電話 (answerCall)
當來電振鈴時,呼叫sdk接聽目前通話功能
為sdk元件加入id或ref,呼叫answerCall(callback)方法,如:id.answerCall(callback)
callback:回呼參數(此參數傳回目前接聽的狀態)
參數
類型
說明
callback
code
number
0:接通成功,999902:WebRTC 未初始化,999903:目前沒有可接聽的來電,999904:接聽來電失敗
message
string
目前接聽操作回傳的資訊
複製
示例:
import http from 'axios'
http.post('url', res => {
window.ccSdk.register({
token: res.data,
})
})
const sdk = document.getElementById('sdk')
const answerCallDom = document.getElementById('answerCallDom')
answerCallDom.onclick = () => {
sdk.answerCall((data) => {
// Returns code and message in data
})
}
错误码列表
code
狀態說明
0
成功
999901
無效號碼
999902
WebRTC 未初始化
999903
當前沒有可接聽的來電
999904
接聽來電失敗
999905
僅示閑下可操作
999906
提交失敗
注意事項
使用此SDK,系統必須為https功能變數名稱,且瀏覽器必須支持webrtc
webrtc檢測工具
用法示例
SDK 初始化:
API key:
API secret:
Agent Account:
SDK 初始化
撥號:
Called Number:
Called Info:
撥號