首頁 > 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)
isRemark Boolean 否 是否顯示備註(開啟：true，關閉：false，預設true)
isInformation Boolean 否 是否展示被叫訊息(開啟：true，關閉：false，預設true)
lang string 否 目前顯示語種(預設顯示英語) en：英語，es：西班牙語
closeInitiateCall Boolean 否 是否關閉主動撥號功能(預設不關閉)。 false: 不關閉 ，true: 關閉 
                        示例：
<!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,
                    noWorkMode: false,
                    isRemark: true,
                    isInformation: true,
                })
            })

        </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 被叫號碼
calledInfo Array 被叫資訊(溫馨提示：此欄位可能為空，請注意判斷) 
                  示例：
<!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 Array 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>
 
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 否 當前接聽操作返回的資訊 
                        示例：
<!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>
 
Event事件 - 切換坐席狀態
  • 調用sdk切換坐席狀態功能
  • 給sdk組件添加id或者ref，調用switchStatus（value）方法，注意此方法必須放在聲明async函數下，否則await會拋出錯誤，如：
                  示例：
async function switchFn() {
    const res = await id.switchStatus(value)
}
參數示例
參數 類型 備註
value number 坐席的狀態，2：示閒，5：小休
回呼參數
參數 類型 備註
res   switchStatus的返回結果，code為0代表正常調用，否則異常
code number 0：切換成功，999001：不允許切換的狀態
message string 目前方法傳回的訊息 
                  示例：
<!DOCTYPE html>
<html lang="">
  <head>
    <script src="https://cc-sdk.itniotech.com/sip-sdk.js"></script>
  </head>
  <body>
    <button id="switchDom">切換坐席狀態</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 switchDom = document.getElementById('switchDom')
      switchDom.onclick = () => {
        const res = await sdk.switchStatus(2)
        console.log('switchStatus:', res)
      }
      
    </script>
  </body>
</html>
 
Event事件 - 接聽電話 (answerCall)
  • 當來電振鈴時，呼叫sdk接聽目前通話功能
  • 為sdk元件加入id或ref，呼叫answerCall(callback)方法，如：id.answerCall(callback)
  • callback：回呼參數（此參數傳回目前接聽的狀態）
參數 類型 說明
callback code number 0：接通成功，999902：WebRTC 未初始化，999903：目前沒有可接聽的來電，999904：接聽來電失敗
message string 目前接聽操作回傳的資訊 
                  示例：
<!DOCTYPE html>
<html lang="">
  <head>
    <script src="https://cc-sdk.laaffic.com/sip-sdk.js"></script>
  </head>
  <body>
    <button id="answerCallDom">接聽電話</button>
    <!-- sdk component -->
    <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 answerCallDom = document.getElementById('answerCallDom')

      answerCallDom.onclick = () => {
        sdk.answerCall((data) => {
            // Returns code and message in data
        })
      }

    </script>
  </body>
</html>
 
错误码列表
code 狀態說明
0 成功
999901 無效號碼
999902 WebRTC 未初始化
999903 當前沒有可接聽的來電
999904 接聽來電失敗
999905 僅示閑下可操作
999906 提交失敗
 
注意事項
  • 使用此SDK，系統必須為https功能變數名稱，且瀏覽器必須支持webrtc
  • webrtc檢測工具
 
用法示例
SDK 初始化:
 
撥號:

此頁面的內容有幫助嗎？

對接有疑問？聯絡我們的技術支援

LAAFFIC API 專屬 TG 技術對接頻道，即時回應您的需求

前往Telegram聯繫
Telegram
WhatsApp
諮詢

點擊此處開啟人工服務