vendors:cisco:uc:ece:custom-buttons [orourke.tv]

This is an old revision of the document!

If you are using a custom button - how do you know if the chat has been minimized? i.e. perhaps you are using a custom floating button similar to the out of the box one? Or perhaps you want to check business hours or availability and only show the button then, but NOT if the chat has just been minimized.

The below sample proof of concept code allows you to:

show / hide button when chat form is minimized / maximized
play an audio alert when a new message arrives if chat form is minimized
show number of unread messages if chat form is minimized.

<script language=javascript>
window.addEventListener("message", function (event) {
    try {
        const data = JSON.parse(event.data);
 
		// This shows all ECE events to console (so disable / comment out this console output in production)
		console.log("MESSAGE RECEIVED:", event.data);
 
        // Detect minimize
        if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "EG_MINIMIZE") {
            alert("The chat was minimized");
        }
 
        // Detect minimize
        if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "EG_MAXIMIZE") {
            alert("The chat was Maximized");
        }
 
        // Detect badge count update (where greater than 0)
        if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "egBadgeCount") {
            if (data.Value>0){
			var sound = new Audio("https://ece-webserver.example.com/templates/chat/core/common/media/21.0.0/notify.wav"); sound.play();
			alert("Badge count is now: " + data.Value);
			}
        }
 
    } catch (e) {
        // Ignore non JSON messages
    }
});
</script>

Chat is only be initiated from the 'main' page - but if a chat is active - it now also available on Page1 with a custom button and this custom button (on both main and page1) can disappear and re-appear when the chat window is maximized or minimized as well as inform user of unread messages (if chat form is minimized) - and send an audio alert.

To do: Add additional HTML - for a screen reader - so when minimized you are informed of a chat message arriving and how many messages you have to read.

index.html

<html>
<head>
<title>simple chat website - Main page</title>
</head>
<body>
<p>Hello. This is a simple website. This is the MAIN page - where Chat is enabled / configured.
<p><button id="chatBtn" onclick="egainDockChat.openHelp();">Click to start Chat</button>
<p><a href="./page1.html">Click here to go to Page 1</a>
 
<!-- Configuration for a specific Chat Entrypoint, which sets the EntryPointId, Local, template and if custom button is used -->
<script language=javascript>
/*eGain Chat server */
var egainDockChat = egainDockChat  || {};
egainDockChat.serverURL = "https://webchat-test.example.com/system";
/*eGain Chat Entry Point*/
egainDockChat.EntryPointId  = "1002";
/*eGain Chat Locale*/
egainDockChat.Locale  = "en-US";
/*eGain template name*/
egainDockChat.Template = "aria-nccc-standard";
egainDockChat.refererName =  "";
/*Set to true to enable posting attributes to templates*/
egainDockChat.PostChatAttributes = false;
egainDockChat.IntegratedEntryPoint  = "true";
/*eGain video chat parameters */
egainDockChat.VChatParams = '';
/*Set to true if custom button is used to launch docked chat */
egainDockChat.UseCustomButton=true;
/*Method to set customer Parameters. To be called by client website. All the parameters specified in application-chat-defaults must be set here.*/
egainDockChat.SetCustomerParameters = function (egainAttributeName, attributeValue) {
if(!egainDockChat.SetParameter){
egainDockChat.CallQueue = egainDockChat.CallQueue || [];
egainDockChat.CallQueue.push({name:'SetParameter', args:[egainAttributeName,attributeValue]});
}else{
egainDockChat.SetParameter(egainAttributeName,attributeValue);
}
};
/* Method to be called on click of custom button to launch chat in docked mode */
egainDockChat.openHelp = function(){
egainDockChat.IsChatLaunched = true;
startChat();
}
if(!egainDockChat.UseCustomButton){
startChat();
}
function startChat(){
if(!egainDockChat.launchChat){
egainDockChat.CallQueue = egainDockChat.CallQueue || [];
egainDockChat.CallQueue.push({name:'launchChat', args:[]});
}else{
egainDockChat.launchChat();
}
}
</script>
 
 
<!-- 
Custom JS code - so you can catch the events for when teh Chat has been minimized or maximized as well as number of messages when minimized.
Using these events - you can decide to display or hide the button and also give audio alerts - even if minimized. 
The number of un read messages could be  displayed on Chat Roundel / Button AND using WCAG guidelines - you should also be inform the user when using screen reader, e.g."You have recieved a chat message, 3 unread messages"
-->
<script language=javascript>
function showChatButton() {
  document.getElementById("chatBtn").style.display = "inline-block";
}
 
function hideChatButton() {
  document.getElementById("chatBtn").style.display = "none";
}
 
 
window.addEventListener("message", function (event) {
    try {
        const data = JSON.parse(event.data);
 
		// This shows all ECE events to console (so disable / comment out this console output in production)
		console.log("MESSAGE RECEIVED:", event.data);
 
        // Detect minimize
        if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "EG_MINIMIZE") {
            showChatButton();
        }
 
        // Detect maximize
        if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "EG_MAXIMIZE") {
			hideChatButton();
        }
 
        // Detect badge count update (where greater than 0)
        if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "egBadgeCount") {
 		    document.getElementById("chatBtn").innerText = "Resume Chat - Unread Messages:" + data.Value;
                    // Note - download this audio file and host on your own webserver - in case the URL changes following a ECE update
		    var sound = new Audio("https://webchat-test.example.com/templates/chat/core/common/media/21.0.0/notify.wav"); sound.play();
        }
 
    } catch (e) {
        // Ignore non JSON messages
    }
});
</script>
 
<!-- Cisco Provided ECE JavaScript - required for docked chat -->
<script type="text/javascript" src="https://webchat-test.example.com/system/templates/chat/egain-chat.js"></script>
 
</body>
</html>

page1.html

<html>
<head>
<title>simple chat website - page 1</title>
</head>
<body>
<p>Hello. This is a simple website. This is the Pag 1- where Chat is NOT enabled by default unless a chat is already active.
<p><button id="chatBtn" style="display:none;" onclick="egainDockChat.openHelp();">Resume Chat</button>
<p><a href="./index.html">Click here to the main page</a>
 
<!-- Basic Configuration for a Chat Entrypoint - when chat is NOT initiated on this page -->
<script language=javascript>
/*eGain Chat server */
var egainDockChat = egainDockChat  || {};
egainDockChat.UseCustomButton=true;
egainDockChat.openHelp = function(){
egainDockChat.IsChatLaunched = true;
startChat();
}
if(!egainDockChat.UseCustomButton){
startChat();
}
function startChat(){
if(!egainDockChat.launchChat){
egainDockChat.CallQueue = egainDockChat.CallQueue || [];
egainDockChat.CallQueue.push({name:'launchChat', args:[]});
}else{
egainDockChat.launchChat();
}
}
</script>
 
<!-- 
Custom JS code - so you can catch the events for when teh Chat has been minimized or maximized as well as number of messages when minimized.
Using these events - you can decide to display or hide the button and also give audio alerts - even if minimized. 
The number of un read messages could be  displayed on Chat Roundel / Button AND using WCAG guidelines - you should also be inform the user when using screen reader, e.g."You have recieved a chat message, 3 unread messages"
-->
<script language=javascript>
function showChatButton() {
  document.getElementById("chatBtn").style.display = "inline-block";
}
 
function hideChatButton() {
  document.getElementById("chatBtn").style.display = "none";
}
 
 
window.addEventListener("message", function (event) {
    try {
        const data = JSON.parse(event.data);
 
		// This shows all ECE events to console (so disable / comment out this console output in production)
		console.log("MESSAGE RECEIVED:", event.data);
 
        // Detect minimize
        if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "EG_MINIMIZE") {
            showChatButton();
        }
 
        // Detect maximize
        if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "EG_MAXIMIZE") {
			hideChatButton();
        }
 
        // Detect badge count update (where greater than 0)
        if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "egBadgeCount") {
			if (data.Value > 0){
				document.getElementById("chatBtn").innerText = "Resume Chat - Unread Messages:" + data.Value;
				}else{
				document.getElementById("chatBtn").innerText = "Resume Chat";
				}
 
            // Note - download this audio file and host on your own webserver - in case the URL changes following a ECE update
		    var sound = new Audio("https://webchat-test.example.com/templates/chat/core/common/media/21.0.0/notify.wav"); sound.play();
        }
 
    } catch (e) {
        // Ignore non JSON messages
    }
});
</script>
 
<!-- Cisco Provided ECE JavaScript - required for docked chat -->
<script type="text/javascript" src="https://webchat-test.example.com/system/templates/chat/egain-chat.js"></script>
 
</body>
</html>

ECE Webchat - Custom Buttons

Simple JS - showing the Event Listener and relevant events

A Simple Proof of concept code (HTML & JS) for a two pages Website

page1.html