API Center/CC SDK Integration

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) 
                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,
      })
    })
  </script>
</body>
</html>
 
Event Handling
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 
                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>
 
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);
Parameter Type Required Note
phone string Yes The number to dial
info string No Called information (up to 1000 characters, truncated if exceeded) 
                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>
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
--

Feedback

Was this page helpful?