Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
vendors:cisco:uc:ece:custom-buttons [2026/02/12 10:00] – gerardorourkevendors:cisco:uc:ece:custom-buttons [2026/02/25 15:54] (current) – [page1.html] gerardorourke
Line 31: Line 31:
             alert("The chat was Maximized");             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)         // Detect badge count update (where greater than 0)
         if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "egBadgeCount") {         if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "egBadgeCount") {
             if (data.Value>0){             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);  alert("Badge count is now: " + data.Value);
  }  }
Line 51: Line 55:
 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. 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.+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.
  
 <file javascript index.html> <file javascript index.html>
Line 59: Line 63:
 </head> </head>
 <body> <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>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><button id="chatBtn" onclick="egainDockChat.openHelp();">Click to start Chat</button>
 <p><a href="./page1.html">Click here to go to Page 1</a> <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 --> <!-- Configuration for a specific Chat Entrypoint, which sets the EntryPointId, Local, template and if custom button is used -->
Line 117: Line 140:
 <script language=javascript> <script language=javascript>
 function showChatButton() { function showChatButton() {
-  document.getElementById("chatBtn").style.display = "inline-block";+    document.getElementById("chatBtn").style.display = "inline-block";
 } }
  
 function hideChatButton() { function hideChatButton() {
-  document.getElementById("chatBtn").style.display = "none";+    document.getElementById("chatBtn").style.display = "none";
 } }
- 
  
 window.addEventListener("message", function (event) { window.addEventListener("message", function (event) {
Line 129: Line 151:
         const data = JSON.parse(event.data);         const data = JSON.parse(event.data);
  
- // This shows all ECE events to console (so disable / comment out this console output in production) +        // This shows all ECE events to console (so disable / comment out this console output in production) 
- console.log("MESSAGE RECEIVED:", event.data);+        console.log("MESSAGE RECEIVED:", event.data);
  
         // Detect minimize         // Detect minimize
Line 139: Line 161:
         // Detect maximize         // Detect maximize
         if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "EG_MAXIMIZE") {         if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "EG_MAXIMIZE") {
- hideChatButton();+            hideChatButton(); 
 +            // Screen reader announcement 
 +            var announcer = document.getElementById("sr-announcer"); 
 +            announcer.textContent = ""; // Clear Screen Reader
         }         }
  
-        // Detect badge count update (where greater than 0)+        // 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") {         if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "egBadgeCount") {
-      document.getElementById("chatBtn").innerText = "Resume Chat - Unread Messages:" + data.Value; +            var unread = data.Value; 
-                    // Note - download this audio file and host on your own webserver - in case the URL changes following a ECE update +            if (unread > 0) { 
-     var sound = new Audio("https://webchat-test.example.com/templates/chat/core/common/media/21.0.0/notify.wav"); sound.play();+                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."; 
 +                } 
 +            }
         }         }
  
Line 161: Line 199:
 </html> </html>
 </file> </file>
- 
 ==== page1.html==== ==== page1.html====
 <file javascript page1.html> <file javascript page1.html>
Line 169: Line 206:
 </head> </head>
 <body> <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>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><button id="chatBtn" style="display:none;" onclick="egainDockChat.openHelp();">Resume Chat</button>
 <p><a href="./index.html">Click here to the main page</a> <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 -->+<!-- Basic Configuration for a Chat Entrypoint - when chat is NOT initiated on this page - hence no EntryPoint IDs etc-->
 <script language=javascript> <script language=javascript>
 /*eGain Chat server */ /*eGain Chat server */
Line 214: Line 270:
         const data = JSON.parse(event.data);         const data = JSON.parse(event.data);
  
- // This shows all ECE events to console (so disable / comment out this console output in production) + // This shows all ECE events to console (so disable / comment out this console output in production) 
- console.log("MESSAGE RECEIVED:", event.data);+ console.log("MESSAGE RECEIVED:", event.data);
  
         // Detect minimize         // Detect minimize
         if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "EG_MINIMIZE") {         if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "EG_MINIMIZE") {
-            showChatButton();+ showChatButton();
         }         }
  
         // Detect maximize         // Detect maximize
         if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "EG_MAXIMIZE") {         if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "EG_MAXIMIZE") {
- hideChatButton();+ hideChatButton(); 
 +            // Clear Screen reader announcement Text 
 +            var announcer = document.getElementById("sr-announcer"); 
 +            announcer.textContent = ""; // Clear Screen Reader 
         }         }
  
-        // Detect badge count update (where greater than 0)+        // Detect badge count update
         if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "egBadgeCount") {         if (data.Caller === "EGLV_DOCK_CALLER_SET" && data.Key === "egBadgeCount") {
- if (data.Value > 0){ +            var unread = data.Value; 
- document.getElementById("chatBtn").innerText = "Resume Chat - Unread Messages:" + data.Value; +            if (unread > 0) { 
- }else{ +                document.getElementById("chatBtn").innerText = "Resume Chat - Unread Messages: " + unread; 
- document.getElementById("chatBtn").innerText = "Resume Chat"; +                var announcer = document.getElementById("sr-announcer"); 
- } +                if (unread === 1) { 
-  +                    // Screen reader announcement 
-            // Note - download this audio file and host on your own webserver - in case the URL changes following a ECE update +                    announcer.textContent = "Chat message received. You have 1 unread message."; 
-     var sound = new Audio("https://webchat-test.example.com/templates/chat/core/common/media/21.0.0/notify.wav"); sound.play();+                } else { 
 +                    announcer.textContent = "Chat message received. You have " + unread + " unread messages."; 
 +                } 
 +            }
         }         }
  
  • vendors/cisco/uc/ece/custom-buttons.1770890410.txt.gz
  • Last modified: 2026/02/12 10:00
  • by gerardorourke