Help Center/ Cognitive Engagement Center/ Agent Integration-Agent Lightweight Connection Block Integration (JS)/ Integration Development/ Developing an Integration Page/ JavaScript Code Example
Updated on 2024-03-05 GMT+08:00
View PDF

JavaScript Code Example

Environment Requirement

--

Reference Library

jquery.js

Download Link

index.html

  • 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>