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/11 17:52] – [ECE Webchat - Custom Buttons] gerardorourkevendors:cisco:uc:ece:custom-buttons [2026/02/25 15:54] (current) – [page1.html] gerardorourke
Line 5: Line 5:
 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. 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).+The below sample proof of concept code allows you to:
  
-I also included a audio alert when minimized.+  * 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. 
 + 
 +==== Simple JS - showing the Event Listener and relevant events ====
  
 <code javascript> <code javascript>
Line 27: 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 44: Line 52:
  
  
-==== Really Simple Proof of concept HTML & JS Code for a Simple two pages Website ==== +==== A Simple Proof of concept code (HTML & JS) for a two pages Website ==== 
-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.+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.
  
 <file javascript index.html> <file javascript index.html>
Line 53: 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 111: 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 123: 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 133: 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 155: Line 199:
 </html> </html>
 </file> </file>
- 
 ==== page1.html==== ==== page1.html====
 <file javascript page1.html> <file javascript page1.html>
Line 163: 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 208: 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.1770832359.txt.gz
  • Last modified: 2026/02/11 17:52
  • by gerardorourke