首页 > 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/api/call/ccsdkAuthentication/）
      //2、'https://xxx.xx.cn/createAuth'路径需要替换成客户系统的后端接口
      //3、整体请求路径说明：[客户系统前端]->[客户后端接口]->[我方API接口]
      //4、SDK注册仅需要一行代码window.ccSdk.register({token:xxx})，下方示例发送的post请求仅做参考，目的是从后台接口拿取到toekn，具体实现逻辑可自定义
      http.post('https://xxx.xx.com/createAuth', 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 - 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 component -->
    <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>
 
监听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>
 
Event事件 - 调用通话 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事件 - 挂断通话
  • 调用sdk挂断当前通话功能
  • 给sdk组件添加id或者ref，调用hangupCall(callback)方法，如：id.hangupCall(callback)
  • callback：回调参数（此参数返回当前挂断的状态）
参数 类型 字段 备注
callback Object code 0:挂断成功；999901:挂断失败
message 当前挂断操作返回的信息 
                  示例：
<!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 初始化:
 
拨号:

此页面的内容有帮助吗？

对接有疑问？联络我们的技术支援

LAAFFIC API 专属 TG 技术对接频道，即时回应您的需求

前往Telegram联系
Telegram
WhatsApp
咨询

点击此处开启人工服务