CC SDK Integration

Overview of the CC SDK Integration Process

SDK Initialization Process

Create a <script> tag in the <head> tag to include the SDK:

                  
<script src="https://cc-sdk.laaffic.com/sip-sdk.js"> </script>

After obtaining the token, call window.ccSdk.register with the token to complete the initialization process.
API for generating SDK credentials

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.laaffic.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.laaffic.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
});

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

            const sdk = document.getElementById('sdk')
            sdk.addEventListener('onSeatStatus', (data) => {
                console.log('data:', data)
            })
        </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.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,
                })
            })

            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