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

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 Close Chat (this is only needed on pages, where chat can be initiated)
	if (data.Caller === "EGLV_DOCK_CALLER_RESET" && data.Key === ""){
            alert("The chat was Closed");
        }        
 
        // Detect badge count update (where greater than 0)
        if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "egBadgeCount") {
            if (data.Value>0){
			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.

This code also includes code for the screen reader - if the chat is minimized - it informs the user that a chat message has been received and the number of unread messages.

index.html

<html>
<head>
<title>simple chat website - Main page</title>
</head>
<body>
<!-- Start of CSS and HTML code for Screen Reader -->
<style>
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>
<div id="sr-announcer" role="status" aria-live="polite" aria-atomic="true" class="visually-hidden"></div>
<!-- End of CSS and HTML code for Screen Reader -->
 
<!-- Start of HTML code for Brief Intro and Chat Button -->
<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>
<!-- End of HTML code for Brief Intro and Chat Button -->
 
<!-- 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();
            // Screen reader announcement
            var announcer = document.getElementById("sr-announcer");
            announcer.textContent = ""; // Clear Screen Reader
        }
 
        // Detect Close Chat (this is only needed on 'chat' pages
        if (data.Caller === "EGLV_DOCK_CALLER_RESET" && data.Key === "") {
            showChatButton();
        }
 
        // Detect badge count update
        if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "egBadgeCount") {
            var unread = data.Value;
            if (unread > 0) {
                document.getElementById("chatBtn").innerText = "Resume Chat - Unread Messages: " + unread;
                var announcer = document.getElementById("sr-announcer");
                if (unread === 1) {
                    // Screen reader announcement
                    announcer.textContent = "Chat message received. You have 1 unread message.";
                } else {
                    announcer.textContent = "Chat message received. You have " + unread + " unread messages.";
                }
            }
        }
 
    } 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>
<!-- Start of CSS and HTML code for Screen Reader -->
<style>
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>
<div id="sr-announcer" role="status" aria-live="polite" aria-atomic="true" class="visually-hidden"></div>
<!-- End of CSS and HTML code for Screen Reader -->
 
<!-- Start of HTML code for Brief Intro and Chat Button (which is DISABLED by default as this is a page where chat is NOT initiated from -->
<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>
<!-- End of HTML code for Brief Intro and Chat Button -->
 
<!-- Basic Configuration for a Chat Entrypoint - when chat is NOT initiated on this page - hence no EntryPoint IDs etc-->
<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();
            // Clear Screen reader announcement Text
            var announcer = document.getElementById("sr-announcer");
            announcer.textContent = ""; // Clear Screen Reader
 
        }
 
        // Detect badge count update
        if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "egBadgeCount") {
            var unread = data.Value;
            if (unread > 0) {
                document.getElementById("chatBtn").innerText = "Resume Chat - Unread Messages: " + unread;
                var announcer = document.getElementById("sr-announcer");
                if (unread === 1) {
                    // Screen reader announcement
                    announcer.textContent = "Chat message received. You have 1 unread message.";
                } else {
                    announcer.textContent = "Chat message received. You have " + unread + " unread messages.";
                }
            }
        }
 
    } 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