首頁 > API中心 > IVR群呼 > 文檔指引

Brand

消息

語音

快速入门-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
參數 說明 是否必填 類型
token string 是 sdk token(接口生成)
noWorkMode Boolean 否 sdk是否開啟無工作台模式(true: 開啟，false：關閉，預設false) 
                        示例：
<!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>
 
監聽SDK - 坐席狀態
通過給sdk組件添加id，通過addEventListener監聽seatStatus回調，如：
                  示例：
document.getElementById('sdk').addEventListener('onSeatStatus', option => {
    console.log('option:', option)
});
回調參數
參數 類型 備註
detail array 坐席狀態： 1:離線， 2:空閒， 3:示忙， 4:話後整理， 5:小休， 
                  示例：
<!DOCTYPE html>
<html lang="">
  <head></head>
  <body>
    <!-- sdk 組件 -->
    <cc-sdk id="sdk"></cc-sdk>

    <script type="module">
      import { register } from 'sip-sdk.js'

      // 監聽坐席狀態
      const sdk = document.getElementById('sdk')
      sdk.addEventListener('onSeatStatus', (data) => {
        console.log('data:', data)
      })
    </script>
  </body>
</html>
 
監聽SDK - 呼叫狀態
通過給sdk組件添加id，通過addEventListener監聽onCall回調，如：
                  示例：
document.getElementById('sdk').addEventListener('onCall', option => {
    console.log('option:', option)
});
回調參數
參數 類型 備註
detail    
callStatus Object 呼叫狀態: 1-呼叫中, 2-響鈴中, 3-通話中, 4-通話結束, 5-拒接或掛斷(通話未建立)
calledNumber Number 被叫號碼 
                  示例：
<!DOCTYPE html>
<html lang="">
  <head></head>
  <body>
    <!-- sdk 組件 -->
    <cc-sdk id="sdk"></cc-sdk>

    <script type="module">
      import { register } from 'sip-sdk.js'

      // 監聽呼叫狀態
      const sdk = document.getElementById('sdk')
      sdk.addEventListener('onCall', (option) => {
        console.log('option:', option)

      })
    </script>
  </body>
</html>
 
監聽SDK - webrtc狀態
通過給sdk組件添加id，通過addEventListener監聽onWebrtcStatus回調，如：id.addEventListener('onWebrtcStatus', option => {})。此參數每五秒推送一次
參數 類型 說明
detail Number webrtc狀態：0-未連接，1-已連接 
                  示例：
<!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'

      http.post('url', res => {
        window.ccSdk.register({
          token: res.data,
        })
      })
      
      // 監聽webrtc狀態
      const sdk = document.getElementById('sdk')
      sdk.addEventListener('onWebrtcStatus', (option) => {
        console.log('option:', option)
      })

    </script>
  </body>
</html>
 
監聽SDK - http請求狀態
通過給sdk組件添加id，通過addEventListener監聽onHttp回調，如：id.addEventListener('onHttp', option => {})
參數 類型 字段 說明
detail Object code 100200：未登錄
message 接口返回信息 
                  示例：
<!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'

      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)
      })

    </script>
  </body>
</html>
 
Event事件
監聽sdk坐席狀態，通過給sdk組件添加id，通過addEventListener監聽seatStatus回檔，如：id.addEventListener('onSeatStatus', option => {})
參數 類型 備註
detail array 坐席狀態：1:離線，2:空閒，3:示忙，4:話後整理，5:小休 
                        示例：
<!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'

            http.post('url', res => {
                window.ccSdk.register({
                    token: res.data,
                })
            })

            // 監聽坐席狀態
            const sdk = document.getElementById('sdk')
            sdk.addEventListener('onSeatStatus', (data) => {
                console.log('data:', data)
            })
        </script>
    </body>
</html>
 
callPhone
調用sdk通話功能，給sdk組件添加id或者ref，調用callPhone（option）方法，如：id.callPhone(option)
參數 說明 是否必填 類型
phone string 是 需要撥打的號碼
info string 否 被叫資訊（最長1000字元，超出會被截取） 
                        示例：
<!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>
 
Event事件 - 重連webrtc
重新連接webrtc。給sdk組件添加id或者ref，調用callPhone()方法，如：id.reConnectWebrtc()。溫馨提醒：在 webrtc狀態 為未連接狀態，即onWebrtcStatus回調為0，再調用此方法，且建議設置限制重連次數
                  示例：
<!DOCTYPE html>
<html lang="">
  <head>
    <script src="https://cc-sdk.laaffic.com/sip-sdk.js"></script>
  </head>
  <body>
    <button id="reConnect">重新連接webrtc</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 reConnect = document.getElementById('reConnect')

      sdk.addEventListener('onWebrtcStatus', (option) => {
        const data = option.detail[0]
        if(data === 0) {
          sdk.reConnectWebrtc()
        }
      })
    </script>
  </body>
</html>
 
Event事件 - 掛斷通話 hangupCall

調用sdk掛斷當前通話功能。

給sdk組件添加id或者ref，調用hangupCall(callback)方法，如：id.hangupCall(callback)

callback：回調參數（此參數返回當前掛斷的狀態）

回調參數 類型 說明
callback code number 0：掛斷成功; 999901：掛斷失敗
message string 當前掛斷操作返回的信息 
                  示例：
<!DOCTYPE html>
<html lang="">
  <head>
    <script src="https://cc-sdk.laaffic.com/sip-sdk.js"></script>
  </head>
  <body>
    <button id="hangup">掛斷</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 hangup = document.getElementById('hangup')

      hangup.onclick = () => {
        sdk.hangupCall((data) => {
            // data中返回code、message
        })
      }

    </script>
  </body>
</html>
 
注意事項
  • 使用此SDK，系統必須為https功能變數名稱，且瀏覽器必須支持webrtc
  • webrtc檢測工具
 
用法示例
SDK 初始化:
 
撥號:
Telegram
WhatsApp
諮詢

點擊此處開啟人工服務