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.

This can be achieved using the below JS code - which can trigger on minimized, maximized (to clear / bring it back to default) and also for messages when sent when minimized (and how many messages are unread / i.e. the badge number - which appears on the out of the box floating roundel when minimized).

I also included a audio alert when 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.

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

Really Simple Proof of concept HTML & JS Code for a Simple two pages Website

page1.html