This is an old revision of the document!
ECE Webchat - Custom Buttons
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>
Really Simple Example Code for a two pages main page (index.html) and a page1 (page1.html)
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.
<html>
<head>
<title>simple chat website</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 minimize
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</title>
</head>
<body>
<p>This is Page1 - Chat is NOT configured here - so by default no button would appear - unless a chat was active.
<p><button id="chatBtn" style="display:none;" onclick="egainDockChat.openHelp();">Click to resume Chat </button>
<p><a href="./index.html">back to Welcome Page</a>
<!-- Basic Configuration for Chat without referencing any specific entry point - so if a chat is active - chat can be launched with a custom button -->
<script>
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 minimize
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>