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 16:46] – 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.
  
-<code>+==== Simple JS - showing the Event Listener and relevant events ==== 
 + 
 +<code javascript>
 <script language=javascript> <script language=javascript>
 window.addEventListener("message", function (event) { window.addEventListener("message", function (event) {
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 Example Code for a two pages main page (index.html) and a page1 (page1.html) ==== +==== A Simple Proof of concept code (HTML & JS) for a two pages Website ==== 
-Chat would only be initiated from main page - but if it was active - it would be available on Page1 - and a custom button could be used.+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.
  
-<code index.html>+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>
 <html> <html>
 <head> <head>
-<title>simple chat website</title>+<title>simple chat website - Main page</title>
 </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 131: Line 159:
         }         }
  
-        // Detect minimize+        // 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 154: Line 198:
 </body> </body>
 </html> </html>
-</code> +</file>
 ==== page1.html==== ==== page1.html====
-<code>+<file javascript page1.html>
 <html> <html>
 <head> <head>
-<title>simple chat website</title>+<title>simple chat website - page 1</title>
 </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 -->
  
-<p>This is Page1 - Chat is NOT configured here - so by default no button would appear - unless a chat was active. +<!-- 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><button id="chatBtn" style="display:none;" onclick="egainDockChat.openHelp();">Click to resume Chat </button> +<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><a href="./index.html">back to Welcome Page</a>+<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 Chat without referencing any specific entry point - so if a chat is active - chat can be launched with a custom button --> +<!-- Basic Configuration for a Chat Entrypoint - when chat is NOT initiated on this page - hence no EntryPoint IDs etc--> 
-<script>+<script language=javascript> 
 +/*eGain Chat server */
 var egainDockChat = egainDockChat  || {}; var egainDockChat = egainDockChat  || {};
 egainDockChat.UseCustomButton=true; egainDockChat.UseCustomButton=true;
- 
 egainDockChat.openHelp = function(){ egainDockChat.openHelp = function(){
 egainDockChat.IsChatLaunched = true; egainDockChat.IsChatLaunched = true;
 startChat(); startChat();
 } }
- 
 if(!egainDockChat.UseCustomButton){ if(!egainDockChat.UseCustomButton){
 startChat(); startChat();
 } }
- 
 function startChat(){ function startChat(){
 if(!egainDockChat.launchChat){ if(!egainDockChat.launchChat){
Line 211: 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 minimize+        // 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") {
-      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 236: Line 307:
 }); });
 </script> </script>
- 
  
 <!-- Cisco Provided ECE JavaScript - required for docked chat --> <!-- Cisco Provided ECE JavaScript - required for docked chat -->
Line 243: Line 313:
 </body> </body>
 </html> </html>
-</code>+</file>
  
  • vendors/cisco/uc/ece/custom-buttons.1770828396.txt.gz
  • Last modified: 2026/02/11 16:46
  • by gerardorourke