JavaScript Code Example

Updated on 2024-03-05 GMT+08:00

View PDF

Environment Requirement	--
Reference Library	jquery.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>
<!--
   Tutorial.
   Check available devices.
-->
<html>

<head>
    <title>Tutorial. Check devices</title>
    <meta charset="UTF-8" />
    <!--link rel="stylesheet" href="phone.css"-->
    <!--link rel="icon" href="favicon.png"-->
</head>

<body>
    <!-- Check that browser is not IE -->
    <script>
        var ua = window.navigator.userAgent;
        if (ua.indexOf('MSIE ') > 0 || ua.indexOf('Trident/') > 0) {
            alert("Internet Explorer is not supported. Please use Chrome or Firefox");
        }
    </script>

    <!-- Phone script -->
	<script src="js/jquery-1.8.0.js"></script>
	<script>
			// The current demo needs to introduce jQuery.
		// Create the <script> tag and run the script.
		var importScript = (function (oHead) {

			function loadError(oError) {
				throw new URIError("The script " + oError.target.src + " is not accessible.");
			}

			return function (sSrc, fOnload) {
				var oScript = document.createElement("script");
				oScript.type = "text\/javascript";
				oScript.onerror = loadError;
				if (fOnload) { oScript.onload = fOnload; }
				oHead.appendChild(oScript);
				oScript.innerHTML = sSrc;
			}

		})(document.head || document.getElementsByTagName("body")[0]);
		
		// Set request parameters. access_token indicates the authentication information, tenantSpaceId indicates the tenant space ID, and userAccount indicates the sign-in account. For details, see Table 1.
		var param = {
			"access_token": "XXXXXXXXXXX",
			"tenantSpaceId": "XXXXXXXXXX",
			"userAccount": "XXXXXXXXXX"
		}

		// Define the $aicc_ContextPath variable. The variable name must be $aicc_ContextPath, and the value is https://IP address:Port number/service-cloud/ or https://Domain name/service-cloud/.
		const $aicc_ContextPath = "https://ip:port/service-cloud/";
		// Request the CEC and pass the data content (access_token, tenantSpaceId, and userAccount).
		$.ajax({
			type: "post",
			data: JSON.stringify(param),
			url: $aicc_ContextPath+"ccdesktop/pages/cc-bar/js/ccbarclient.js?t=" + Math.random(),
			crossDomain: true,
			xhrFields: {
				withCredentials: true
			},
			error: function (XMLHttpRequest, textStatus, errorThrown) {

			},
			success: function (data) {
				// After the request is successful, the JavaScript is executed. The CEC returns the JavaScript and dynamically generates a connection bar. The style and position of the connection bar cannot be modified.
				importScript(data)
				
				// Transfer an event (agent status) using the postMessage.
				var param = new Array;
				param.push("AgentState_Busy");
				param.push("AgentState_Work");
				param.push("AgentState_Ready");
		
				param.push("AgentEvent_TransOutResult");
				var json = { name: "eventpost", param: param }
			    setTimeout(function(){ window.frames["ccbarclient"].postMessage(JSON.stringify(json), $aicc_ContextPath); }, 1000)
				// Check the latest agent status in the CEC every second.
                               // If the value of window.frames["ccbarclient"] is incorrect, set the check period (1000) to a larger value, for example, 2000 or 3000.
			// frames: The value is ccbarclient, which is dynamically generated based on the data content returned by importScript.
				window.listeners["eventpost"] = callback;
		
			}
		});
	
	</script>

    <!--  HTML components of simple GUI -->
    <div id="status_line">
    </div>
</body>

</html>

Parent topic: Developing an Integration Page

Previous topic: Core Code Analysis

Next topic: Making Outbound Calls in One-Click Mode

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