Development Example

Updated on 2023-10-12 GMT+08:00

View PDF

Environment Requirement	-
Reference Library	AICCSupport.js
Download Link	index.html

NOTICE:

The demo described in this document may involve the use of personal data. You are advised to comply with relevant laws and regulations and take sufficient measures to ensure that personal data is fully protected.
The demo described in this document is for demonstration only. Commercial use of the demo is prohibited.
Information in this document is for reference only and does not constitute any offer or commitment.

index.html

<!DOCTYPE html>
<html>
<head>
<title>AICC Support Demo Page</title>
<meta charset="UTF-8">
<script type="text/javascript" src="AICCSupport.js"></script>
</head>
<body>
<h1>AICC Support Demo Page</h1>
<br/>
<div>
    <button id="initBtn">Remove an initialization event.</button>
    <button id="ringingBtn">Remove an inbound call event.</button>
    <button id="talkingBtn">Remove an answering event.</button>
    <button id="releaseBtn">Remove a release event.</button>
    <button id="switchBtn">Switch a multimedia user.</button>
    <button id="verifyBtn">Register an identity authentication result return event.</button>
</div>
<br/>
<div>
    <input id="outboundNum" type="text" value="88880085" />
    <input id="outboundType" type="text" value="audio" />
    <button id="audioBtn">Audio</button>
    <button id="videoBtn">Video</button>
    <button id="emailBtn">Email</button>
    <button id="whatsappBtn">WhatsApp</button>
    <button id="oneKeyOutbound">One-click outbound call</button>
</div>
<br/>
<div>
    <button id="clearMessage">Clear messages.</button>
</div>
<br/>
<div id="recMessage" style="font-size:8px;height:400px;overflow-y:auto">
</div>
</body>
<script>
    // Execute the method of opening the page.
    window.onload = function() {
        // Obtain and display the elements of calldata.
        var messageEle = document.getElementById('recMessage');

        // Open the page and directly register the Init event.
        AICCSupport.addHandler('Init',
            (eventData)=>{
                // Callback method
                // Output event data to the console.
                console.log('AICC Support Demo Page Init',data);
                // Display event data (div whose ID is recMessage) on the page.
                let oldMessage = document.getElementById('recMessage').innerHTML
                messageEle.innerHTML = oldMessage +'<br/>'+new Date()+' Initialization event '+ JSON.stringify(eventData);
            }
        );

        // Open the page and directly register the Ringing event.
        AICCSupport.addHandler('Ringing',
            (eventData)=>{
                // Callback method
                // Output event data to the console.
                console.log('AICC Support Demo Page Ringing',data);
                // Display event data (div whose ID is recMessage) on the page.
                let oldMessage = document.getElementById('recMessage').innerHTML
                messageEle.innerHTML = oldMessage +'<br/>'+new Date()+' Inbound call event '+ JSON.stringify(eventData);
            }
        );

        // Open the page and directly register the Talking event.
        AICCSupport.addHandler('Talking',
            (eventData)=>{
                // Callback method
                // Output event data to the console.
                console.log('AICC Support Demo Page Talking',data);
                // Display event data (div whose ID is recMessage) on the page.
                let oldMessage = document.getElementById('recMessage').innerHTML
                messageEle.innerHTML = oldMessage +'<br/>'+new Date()+' Answering event '+ JSON.stringify(eventData);
            }
        );

        // Open the page and directly register the Release event.
        AICCSupport.addHandler('Release',
            (eventData)=>{
                // Callback method
                // Output event data to the console.
                console.log('AICC Support Demo Page Release',data);
                // Display event data (div whose ID is recMessage) on the page.
                let oldMessage = document.getElementById('recMessage').innerHTML
                messageEle.innerHTML = oldMessage +'<br/>'+new Date()+' Release event '+ JSON.stringify(eventData);
            }
        );

        // Obtain the outbound number.
        var outboundNum = document.getElementById('outboundNum')
        // Obtain the outbound call type.
        var outboundType = document.getElementById('outboundType');
        // Listen for the audio button click event.
        var audioAndVideoBtn = document.getElementById('audioBtn');
        audioAndVideoBtn.addEventListener('click', function (e) {
            // Change the outbound call type to audio.
            outboundType.value = 'audio'
        });
        // Listen for the video button click event.
        var audioAndVideoBtn = document.getElementById('videoBtn');
        audioAndVideoBtn.addEventListener('click', function (e) {
            // Change the outbound call type to video.
            outboundType.value = 'video'
        });
        // Listen for the email button click event.
        var audioAndVideoBtn = document.getElementById('emailBtn');
        audioAndVideoBtn.addEventListener('click', function (e) {
            // Change the outbound call type to email.
            outboundType.value = 'email'
        });
        // Listen for the WhatsApp button click event.
        var audioAndVideoBtn = document.getElementById('whatsappBtn');
        audioAndVideoBtn.addEventListener('click', function (e) {
            // Change the outbound call type to whatsapp.
            outboundType.value = 'whatsapp'
        });

        // Listen for the click event of the one-click outbound call button.
        var oneKeyOutbound = document.getElementById('oneKeyOutbound');
        oneKeyOutbound.addEventListener('click', function (e) {
            var num = outboundNum.value;
            var type = outboundType.value;
            // Execute a one-click outbound call.
            AICCSupport.clickToOutbound({mediaType: type,calledNum: num})
        });

        // Listen for the click event of the button for registering or removing initialization events.
        var initBtn = document.getElementById('initBtn');
        initBtn.addEventListener('click', function (e) {
            var val = initBtn.innerHTML;
            // Remove an event.
            if(val === 'Remove an initialization event.'){
                initBtn.innerHTML = 'Register an initialization event.';
                AICCSupport.removeHandler('Init');
            }
            // Register an event.
            if(val === 'Register an initialization event.'){
                initBtn.innerHTML = 'Remove an initialization event.';
                AICCSupport.addHandler('Init',
                    (eventData)=>{
                // Callback method
                // Output event data to the console.
                        console.log('AICC Support Demo Page Init',data);
                // Display event data (div whose ID is recMessage) on the page.
                        let oldMessage = document.getElementById('recMessage').innerHTML
                messageEle.innerHTML = oldMessage +'<br/>'+new Date()+' Initialization event '+ JSON.stringify(eventData);
                    }
                );
            }
        });

        // Listen for the click event of the button for registering or removing an inbound call event.
        var ringingBtn = document.getElementById('ringingBtn');
        ringingBtn.addEventListener('click', function (e) {
            var val = ringingBtn.innerHTML;
            // Remove an event.
            if(val === 'Remove an inbound call event.'){
                ringingBtn.innerHTML = 'Register an inbound call event.';
                AICCSupport.removeHandler('Ringing');
            }
            // Register an event.
            if(val === 'Register an inbound call event.'){
                ringingBtn.innerHTML = 'Remove an inbound call event.';
                AICCSupport.addHandler('Ringing',
                    (eventData)=>{
                // Callback method
                // Output event data to the console.
                        console.log('AICC Support Demo Page Ringing',data);
                // Display event data (div whose ID is recMessage) on the page.
                        let oldMessage = document.getElementById('recMessage').innerHTML
                messageEle.innerHTML = oldMessage +'<br/>'+new Date()+' Inbound call event '+ JSON.stringify(eventData);
                    }
                );
            }
        });

        // Listen for the click event of the button for registering or removing an answering event.
        var talkingBtn = document.getElementById('talkingBtn');
        talkingBtn.addEventListener('click', function (e) {
            var val = talkingBtn.innerHTML;
            // Remove an event.
            if(val === 'Remove an answering event.'){
                talkingBtn.innerHTML = 'Register an answering event.';
                AICCSupport.removeHandler('Talking');
            }
            // Register an event.
            if(val === 'Register an answering event.'){
                talkingBtn.innerHTML = 'Remove an answering event.';
                AICCSupport.addHandler('Talking',
                    (eventData)=>{
                // Callback method
                // Output event data to the console.
                        console.log('AICC Support Demo Page Talking',data);
                // Display event data (div whose ID is recMessage) on the page.
                        let oldMessage = document.getElementById('recMessage').innerHTML
                messageEle.innerHTML = oldMessage +'<br/>'+new Date()+' Answering event '+ JSON.stringify(eventData);
                    }
                );
            }
        });

        // Listen for the click event of the button for registering or removing a release event.
        var releaseBtn = document.getElementById('releaseBtn');
        releaseBtn.addEventListener('click', function (e) {
            var val = releaseBtn.innerHTML;
            // Remove an event.
            if(val === 'Remove a release event.'){
                releaseBtn.innerHTML = 'Register a release event.';
                AICCSupport.removeHandler('Release');
            }
            // Register an event.
            if(val === 'Register a release event.'){
                releaseBtn.innerHTML = 'Remove a release event.';
                AICCSupport.addHandler('Release',
                    (eventData)=>{
                // Callback method
                // Output event data to the console.
                        console.log('AICC Support Demo Page Release',data);
                // Display event data (div whose ID is recMessage) on the page.
                        let oldMessage = document.getElementById('recMessage').innerHTML
                messageEle.innerHTML = oldMessage +'<br/>'+new Date()+' Release event '+ JSON.stringify(eventData);
                    }
                );
            }
        });

        // Listen for the click event of the button for registering or removing a multimedia user switch event.
        var switchBtn = document.getElementById('switchBtn');
        switchBtn.addEventListener('click', function (e) {
            var val = switchBtn.innerHTML;
            // Remove an event.
            if(val === 'Remove a multimedia user switch event.'){
                switchBtn.innerHTML = 'Register a multimedia user switch event.';
                AICCSupport.removeHandler('Switch');
            }
            // Register an event.
            if(val === 'Register a multimedia user switch event.'){
                switchBtn.innerHTML = 'Remove a multimedia user switch event.';
                AICCSupport.addHandler('Switch',
                    (eventData)=>{
                        console.log('AICC Support Demo Page Switch',data);
                        // Display event data (div whose ID is recMessage) on the page.
                        let oldMessage = document.getElementById('recMessage').innerHTML
                        messageEle.innerHTML = oldMessage +'<br/>'+new Date()+' Multimedia user switch event '+ JSON.stringify(eventData);
                    }
                );
            }
        });

        // Listen for the click event of the button for registering or removing an identity authentication result return event.
        var verifyBtn = document.getElementById('verifyBtn');
        verifyBtn.addEventListener('click', function (e) {
            var val = verifyBtn.innerHTML;
            if(val === 'Remove an identity authentication result return event.'){
                verifyBtn.innerHTML = 'Register an identity authentication result return event.';
                AICCSupport.removeHandler('IvrReturn');
            }
            if(val === 'Register an identity authentication result return event.'){
                verifyBtn.innerHTML = 'Remove an identity authentication result return event.';
                AICCSupport.addHandler('IvrReturn',
                    (data)=>{
                        console.log('AICC Support Demo Page IvrReturn',data);
                        let oldMessage = document.getElementById('recMessage').innerHTML
                        messageEle.innerHTML = oldMessage +'<br/>'+new Date()+' Identity authentication result return event '+ JSON.stringify(data).replace(/\\/g, '');
                    }
                );
            }
        });

        // Listen for the click event of the message clearing button.
        var clearMessage = document.getElementById('clearMessage');
        clearMessage.addEventListener('click', function (e) {
            // Clear the display content (div whose ID is recMessage).
            document.getElementById('recMessage').innerHTML = '';
        });
    }
    </script>
</html>

Parent topic: Integration Development

Previous topic: Developing the Function of Obtaining the Identity Authentication Result

Next topic: Post-development Configuration

Feedback

Was this page helpful?

Helpful Not helpful

Provide feedback

Thank you very much for your feedback. We will continue working to improve the documentation.See the reply and handling status in My Cloud VOC.

The system is busy. Please try again later.

Which of the following issues have you encountered?

Content is inconsistent with the product UI

Unclear descriptions

Lack of examples or code

Incorrect steps

Can't find what I need

Lack of best practices

Feedback (optional)

0/500

Select at least one type of issue, and enter your comments or suggestions.

Enter a maximum of 500 characters.

Submit Cancel

For any further questions, feel free to contact us through the chatbot.

Chatbot