Home > API Center > API interface guide

Brand
Get Started

Message

Voice

Quick Start - CC SDK Integration

 
Overview of the CC SDK Integration Process
 
SDK Initialization Process
<script src="https://cc-sdk.itniotech.com/sip-sdk.js"> </script> 
  • Create a <script> tag in the <head> tag to include the SDK:
  • After obtaining the token, call window.ccSdk.register with the token to complete the initialization process.
  • API for generating SDK credentials
 
register Method
To register the SDK:
Parameter Type Required Note
token string Yes SDK token (generated by the interface)
noWorkMode Boolean No Whether the SDK enables the workbench-free mode (true: enabled, false: disabled, default false)
isRemark Boolean No Display notes (On: true, Off: false, Default: true)
isInformation Boolean No Display callee information (On: true, Off: false, Default: true)
lang string No Current display language (default display English)en: English, es: Spanish
closeInitiateCall Boolean No Whether to disable proactive dialing (default is not disabled). false: not disabled, true: disabled 
                Example:
<!DOCTYPE html>
<html lang="">
<head>
  <script src="https://cc-sdk.itniotech.com/sip-sdk.js"></script>
</head>
<body>
  <!-- sdk Component -->
  <cc-sdk id="sdk"></cc-sdk>

  <script type="module">
    import http from 'axios'

    //1. In order to ensure the security of authentication information, the customer system backend service needs to implement SDK authentication capabilities and expose the interface to the customer frontend for use. The customer backend system access authentication capability document can be seen (https://www.itniotech.com/api/call/ccsdkAuthentication/)
    //2. The 'https://xxx.xx.cn/createAuth' path needs to be replaced with the customer system backend interface
    //3. Overall request path description: [Customer system frontend]->[Customer backend interface]->[Our API interface]
    //4. SDK registration only requires one line of code window.ccSdk.register({token:xxx}). The post request sent in the example below is only for reference. The purpose is to obtain token from the backend interface. The specific implementation logic can be customized
    http.post('url', res => {
      window.ccSdk.register({
        token: res.data,
        noWorkMode: false,
        isRemark: true,
        isInformation: true,
      })
    })
  </script>
</body>
</html>
 
Listening to SDK Agent Status.
To listen to the status of the SDK agent, add an ID to the SDK component and use addEventListener to listen for the onSeatStatus callback, e.g.,
                  Example:
document.getElementById('sdk').addEventListener('onSeatStatus', option => {
    // Handle seat status changes
});
Callback Parameters
Parameter Type Note
detail array Agent status: 1:Offline, 2:Idle, 3:Busy, 4:Post-call, 5:Short Break 
                Example:
<!DOCTYPE html>
<html lang="">
<head></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,
        })
      })
      
      // Listening to SDK Agent status
      const sdk = document.getElementById('sdk')
      sdk.addEventListener('onSeatStatus', (option) => {
        console.log('option:', option)
      })
  </script>
</body>
</html>
 
Listening to SDK call status.
Add an id to the sdk component and listen to the onCall callback through addEventListener, such as:
                  Example:
document.getElementById('sdk').addEventListener('onCall', option => {
    // Handle status changes
});
Callback Parameters
Parameter Type Note
detail    
callStatus Object Call status: 1-calling, 2-ringing, 3-talking, 4-call ended, 5-rejected or hung up (call not established)
calledNumber Number Called number
calledInfo Array Called Information (Note: This field may be empty, please check carefully) 
                Example:
<!DOCTYPE html>
<html lang="">
<head></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,
        })
      })
      
      // Listening to SDK call status
      const sdk = document.getElementById('sdk')
      sdk.addEventListener('onCall', (option) => {
        console.log('option:', option)
      })
  </script>
</body>
</html>
 
WebRTC Status Monitoring SDK
  • By adding an ID to the SDK component, you can listen for the onWebrtcStatus callback via addEventListener, for example:
                  Example:
id.addEventListener('onWebrtcStatus', option => {})
  • This parameter is pushed every five seconds.
Callback Parameters
Parameter Type Note
detail Array WebRTC Status: 0-Disconnected, 1-Connected 
                Example:
<!DOCTYPE html>
<html lang="">
<head>
  <script src="https://cc-sdk.itniotech.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,
        })
      })
      
      const sdk = document.getElementById('sdk')
      sdk.addEventListener('onWebrtcStatus', (option) => {
        console.log('option:', option)
      })

  </script>
</body>
</html>
 
Listen to SDK - HTTP Request Status
Add an id to the SDK component and listen for the onHttp callback via addEventListener, e.g., id.addEventListener('onHttp', option => {})
Parameter Type Field Description
detail Object code 100200: Not logged in
message API return message 
                  Example:
<!DOCTYPE html>
<html lang="">
  <head>
    <script src="https://cc-sdk.itniotech.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,
        })
      })
      
      // Listen to http status
      const sdk = document.getElementById('sdk')
      sdk.addEventListener('onHttp', (option) => {
        const res = option.detail[0]
        console.log('res:', res)
      })

    </script>
  </body>
</html>
 
Event - Making Calls with the SDK
  • Calling the SDK's Call Function. Add an ID or ref to the SDK component and call the callPhone(option) method, e.g.,
                  Example:
document.getElementById('sdk').callPhone(option);
  • Note: Calling this method while the current call is still in the post-call processing state will immediately submit and end the call, starting the next call. Calling this method is not allowed when the call is ringing, calling, or in a call.
Callback Parameters
Parameter Type Required Note
option phone string Yes The number to dial
info string No Called information (up to 1000 characters, truncated if exceeded)
callback code number No 0: Success, 999901: Invalid number, 999905: Only available for operation, 999906: Submission failed.
message string No Information returned by the current call answering operation 
                Example:
<!DOCTYPE html>
<html lang="">
<head>
  <script src="https://cc-sdk.itniotech.com/sip-sdk.js"></script>
</head>
<body>
  <button id="call">Dial</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 callButton = document.getElementById('call')
    callButton.onclick = () => {
        const data = {
            phone: '13212345678', // Number to call
            info: 'John Doe 20 years old 461385413131', // Called information
        };
        sdk.callPhone(data);
    };

  </script>
</body>
</html>
 
Event - Reconnect WebRTC
  • Reconnect WebRTC. Add an ID or ref to the SDK component and call the callPhone() method, for example:
                  Example:
id.reConnectWebrtc()
  • Friendly reminder: Call this method only when the WebRTC status is "not connected", i.e., when the onWebrtcStatus callback returns 0. It is also recommended to set a limit on the number of reconnection attempts.
                Example:
<!DOCTYPE html>
<html lang="">
<head>
  <script src="https://cc-sdk.itniotech.com/sip-sdk.js"></script>
</head>
<body>
  <button id="reConnect">ReConnect Webrtc</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 reConnect = document.getElementById('reConnect')

      sdk.addEventListener('onWebrtcStatus', (option) => {
        const data = option.detail[0]
        if(data === 0) {
          sdk.reConnectWebrtc()
        }
      })

  </script>
</body>
</html>
 
Event - Hang Up Call (hangupCall)
  • Call the SDK function to hang up the current call.
  • Add an id or ref to the SDK component and call the hangupCall(callback) method, e.g., id.hangupCall(callback)
  • callback: Callback parameter (returns the current hang-up status)
Callback Parameter Type Description
callback code number 0: Hang up successful; 999901: Hang up failed
message string Information returned by the current hang-up operation 
                  Example:
<!DOCTYPE html>
<html lang="">
  <head>
    <script src="https://cc-sdk.itniotech.com/sip-sdk.js"></script>
  </head>
  <body>
    <button id="hangup">Hang Up</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 hangup = document.getElementById('hangup')

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

    </script>
  </body>
</html>
 
Event - Switch Seat Status
  • Call the SDK's function to switch agent status
  • Add an ID or ref to the SDK component and call the `switchStatus(value)` method. Note that this method must be placed below the declaration of an async function; otherwise, `await` will throw an error. For example:
                  example:
async function switchFn() {
    const res = await id.switchStatus(value)
}
Parameter Examples
Parameter Type Description
value number Seated state: 2: Showing leisure; 5: Taking a short break.
Callback Parameters
Parameter Type Description
res   The return value of switchStatus is either 0 (indicating a successful call) or 0 (indicating an exception).
code number 0: Switching successful; 999001: Switching is not allowed.
message string Information returned by the current method 
                  example:
<!DOCTYPE html>
<html lang="">
  <head>
    <script src="https://cc-sdk.itniotech.com/sip-sdk.js"></script>
  </head>
  <body>
    <button id="switchDom">Switch Seat Status</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 switchDom = document.getElementById('switchDom')
      switchDom.onclick = () => {
        const res = await sdk.switchStatus(2)
        console.log('switchStatus:', res)
      }
      
    </script>
  </body>
</html>
 
EventEvent - Answering a Call (answerCall)
  • When a call rings, call the SDK's function to answer the current call.
  • Add an id or ref to the SDK component and call the `answerCall(callback)` method, such as: `id.answerCall(callback)`.
  • callback: Callback parameter (this parameter returns the current answering status)
Callback Parameter Type Description
callback code number 0: Successfully connected, 999902: WebRTC not initialized, 999903: No available calls to answer, 999904: Call answering failed.
message string Information returned by the current answering operation. 
                  Example:
<!DOCTYPE html>
<html lang="">
  <head>
    <script src="https://cc-sdk.itniotech.com/sip-sdk.js"></script>
  </head>
  <body>
    <button id="answerCallDom">Answering a Call</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>
 
Error Code List
Code Status Description
0 Success
999901 Invalid Number
999902 WebRTC Not Initialized
999903 No Available Calls
999904 Failed to Answer Call
999905 Only available in idle conditions
999906 Submission failed
 
Notes
  • To use this SDK, the system must be on an HTTPS domain, and the browser must support WebRTC.
  • WebRTC detection tool
 
Usage Example
SDK Initialization:
 
Call:
Generating SDK Credentials
Agent Ringing Event: Active Push

Was this page helpful?

Questions about integration? Contact our technical support

ITNIO TECH API dedicated TG technical support channel, real-time response to your needs

Contact via Telegram