CC SDK接入
CC SDK對接流程
SDK 初始化流程
- 在head標籤中創建<script src="https://cc-sdk.laaffic.com/sip-sdk.js"></script>
- 獲取到token後，調用window.ccSdk.register傳入token完成初始化操作
- 生成SDK憑證介面說明
register方法
注册SDK
示例：
<!DOCTYPE html>
<html lang="">
<head>
<script src="https://cc-sdk.laaffic.com/sip-sdk.js"></script>
</head>
<body>
<!-- sdk 組件 -->
<cc-sdk id="sdk"></cc-sdk>
<script type="module">
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,
})
})
</script>
</body>
</html>
Event事件
監聽sdk坐席狀態:
通過給sdk組件添加id，通過addEventListener監聽seatStatus回檔，如：
範例：
document.getElementById('sdk').addEventListener('onSeatStatus', option => {
console.log('option:', option)
});
回呼參數
範例：
<!DOCTYPE html>
<html lang="">
<head></head>
<body>
<!-- sdk 組件 -->
<cc-sdk id="sdk"></cc-sdk>
<script type="module">
import http from 'axios'
http.post('url', res => {
window.ccSdk.register({
token: res.data,
})
})
// 監聽坐席狀態
const sdk = document.getElementById('sdk')
sdk.addEventListener('onSeatStatus', (option) => {
console.log('option:', option)
})
</script>
</body>
</html>
監聽sdk呼叫狀態:
透過為sdk元件加入id，透過addEventListener監聽onCall回調，如：id.addEventListener('onCall', option => {})
範例：
document.getElementById('sdk').addEventListener('onCall', option => {
console.log('option:', option)
});
回呼參數
範例：
<!DOCTYPE html>
<html lang="">
<head></head>
<body>
<!-- sdk 組件 -->
<cc-sdk id="sdk"></cc-sdk>
<script type="module">
import http from 'axios'
http.post('url', res => {
window.ccSdk.register({
token: res.data,
})
})
// 監聽呼叫狀態
const sdk = document.getElementById('sdk')
sdk.addEventListener('onCall', (option) => {
console.log('option:', option)
})
</script>
</body>
</html>
callPhone
調用sdk通話功能，給sdk組件添加id或者ref，調用callPhone（option）方法，如：id.callPhone(option)
示例：
<!DOCTYPE html>
<html lang="">
<head>
<script src="https://cc-sdk.laaffic.com/sip-sdk.js"></script>
</head>
<body>
<button id="call">撥號</button>
<!-- sdk 組件 -->
<cc-sdk id="sdk"></cc-sdk>
<script type="module">
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)
}
</script>
</body>
</html>
