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:apiexample [2019/03/15 13:21]
gerardorourke [Example JavaScript to hide / show the open / closed / busy buttons]
vendors:cisco:uc:ece:apiexample [2019/04/12 15:02] (current)
gerardorourke [Simple End to End Example]
Line 11: Line 11:
  
 {{:​vendors:​cisco:​uc:​ece:​businesshours.png?​direct&​400|}} {{:​vendors:​cisco:​uc:​ece:​businesshours.png?​direct&​400|}}
 +
 ===== APIs used to achieve this functionality ===== ===== APIs used to achieve this functionality =====
 ==== ECE - liveSessionStatus - Display chat option based on queue depth and wait time ==== ==== ECE - liveSessionStatus - Display chat option based on queue depth and wait time ====
Line 80: Line 81:
  
 ===== JavaScript - PHP File===== ===== JavaScript - PHP File=====
-Call the below page by passing in the relevant ECE Chat Entry ID and Business Hours ID. and embed in your webpage that requires chat+Call the below PHP Code to set 3 JavaScript Variables, **chatStatus**,​ **chatBusyReason** and **chatTimer**  ​by passing in the relevant ​**ECE Chat Entry ID** and **Business Hours ID**. and embed in your webpage that requires chat 
 Example HTML: Example HTML:
 <code html> <code html>
-<script type="​text/​javascript"​ src="​http://​nas2.home.purplepi.ie/​chatdemo/js/​demo-chat-api-lookups.php?​chatEntryId=1001&​businessHoursId=5001"></​script>​+    <!-- Custom PHP Javascript using Cisco ECE & CCE APIs to check  opening hours - which returns variable '​chatStatus'​ 
 + Make sure to pass in a valid BusinessHour and Chat EntryPoint ID 
 +  
 +    Example Response: 
 +    var chatStatus = '​busy';​ 
 +    var chatBusyReason = '​MinAgentCount';​ 
 +    var chatTimer = '​10000';​ 
 +    --> 
 +    ​<script type="​text/​javascript"​ src="​http://​nas2.home.purplepi.ie/​chat/​demo-chat-api-lookups.php?​chatEntryId=1001&​businessHoursId=5001">​</​script>​ 
 +  
 + <!-- Custom Javascript in case PHP JavaScript does not return successfully-->​ 
 + <​script>​ 
 + if (chatStatus == null) { 
 +            var chatStatus = '​closed';​ 
 +     var chatTimer = '​0';​ 
 +     var chatBusyReason = 'out of service';​ 
 +        } 
 + </​script>​
 </​code>​ </​code>​
  
Line 302: Line 321:
 </​code>​ </​code>​
  
 +===== Simple End to End Example =====
  
 +  *http://​nas2.home.purplepi.ie/​chat/​
 +
 +<file html undocked.html>​
 +<​!doctype html>
 +<html lang="​en">​
 +
 +<​head>​
 +    <!-- Required meta tags -->
 +    <meta charset="​utf-8">​
 +    <meta name="​viewport"​ content="​width=device-width,​ initial-scale=1,​ shrink-to-fit=no">​
 +
 +    <!-- Optional JavaScript from Bootstrap-->​
 +    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 + <script src="​https://​code.jquery.com/​jquery-3.3.1.slim.min.js"​ integrity="​sha384-q8i/​X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"​ crossorigin="​anonymous"></​script>​
 +    <!-- Popper Not needed for this example -->
 + <!-- <script src="​https://​cdnjs.cloudflare.com/​ajax/​libs/​popper.js/​1.14.7/​umd/​popper.min.js"​ integrity="​sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"​ crossorigin="​anonymous"></​script>​ -->
 +    <script src="​https://​stackpath.bootstrapcdn.com/​bootstrap/​4.3.1/​js/​bootstrap.min.js"​ integrity="​sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/​nJGzIxFDsf4x0xIM+B07jRM"​ crossorigin="​anonymous"></​script>​
 +
 +    <!-- Bootstrap CSS -->
 +    <link rel="​stylesheet"​ href="​https://​stackpath.bootstrapcdn.com/​bootstrap/​4.3.1/​css/​bootstrap.min.css"​ integrity="​sha384-ggOyR0iXCbMQv3Xipma34MD+dH/​1fQ784/​j6cY/​iJTQUOhcWr7x9JvoRxT2MZw1T"​ crossorigin="​anonymous">​
 +    <​title>​Simple Chat Page with Proactive Chat</​title>​
 +
 +    <!-- Custom PHP Javascript using Cisco ECE & CCE APIs to check  opening hours - which returns variable '​chatStatus'​
 + Make sure to pass in a valid BusinessHour and Chat EntryPoint ID
 +
 +    Example Response:
 +    var chatStatus = '​busy';​
 +    var chatBusyReason = '​MinAgentCount';​
 +    var chatTimer = '​10000';​
 +    -->
 +    <script type="​text/​javascript"​ src="​http://​nas2.home.purplepi.ie/​chat/​chatStatus.php?​chatEntryId=1001&​businessHoursId=5001"></​script>​
 +
 +    <!-- Custom Javascript in case PHP JavaScript does not return successfully-->​
 + <​script>​
 + if (chatStatus == null) {
 +            var chatStatus = '​closed';​
 +     var chatTimer = '​0';​
 +     var chatBusyReason = 'out of service';​
 +        }
 + </​script>​
 +
 +    <!-- Cisco Provided ECE JavaScript -->
 +    <script language=javascript>​
 +        var egainChat = egainChat || {};
 +        /*eGain Chat server */
 +        egainChat.serverURL = "​http://​ucce-ece-db-12.lab2.purplepi.ie/​system";​
 +        /*eGain Chat Entry Point*/
 +        egainChat.EntryPointId = "​1001";​
 +        /*eGain Chat Locale*/
 +        egainChat.Locale = "​en-US";​
 +        /*eGain template name*/
 +        //​egainChat.Template = "​purplepi-anon";​
 +        egainChat.Template = "​purplepi-nameonly";​
 +        /*Set to true to enable posting attributes to templates*/
 +        egainChat.PostChatAttributes = false;
 +        egainChat.CustomerContextParameters = {};
 +        egainChat.openHelp = function() {
 +            var domainRegex = /​^((?:​http?:​\/​\/​)?​(?:​www\.)?​([^\/​]+))/​i;​
 +            try {
 +                if (egainChat.eglvchathandle != null && egainChat.eglvchathandle.closed == false) {
 +                    egainChat.eglvchathandle.focus();​
 +                    return;
 +                }
 +            } catch (err) {}
 +            var refererName = "";​
 +            refererName = encodeURIComponent(refererName);​
 +            var refererurl = encodeURIComponent(document.location.href);​
 +            var hashIndex = refererurl.lastIndexOf('#'​);​
 +            if (hashIndex != -1) {
 +                refererurl = refererurl.substring(0,​ hashIndex);
 +            }
 +            var eglvcaseid = (/​eglvcaseid=[0-9]*/​gi).exec(window.location.search);​
 +            var vhtIds = '';​
 +            if (typeof EGAINCLOUD != '​undefined'​ && EGAINCLOUD.Account.getAllIds) {
 +                var ids = EGAINCLOUD.Account.getAllIds();​
 +                vhtIds = '&​aId='​ + ids.a + '&​sId='​ + ids.s + '&​uId='​ + ids.u;
 +            }
 +            var EG_CALL_Q = window.EG_CALL_Q || [];
 +            EG_CALL_Q.push(['​enableTracker',​ true]);
 +            var eGainChatUrl = egainChat.serverURL + '/​templates/​chat/'​ + egainChat.Template + '/​index.html?​subActivity=Chat&​entryPointId='​ + egainChat.EntryPointId;​
 +
 +            eGainChatUrl += ''​ + '&​templateName='​ + egainChat.Template + '&​locale='​ + egainChat.Locale + '&​ver=v11';​
 +            eGainChatUrl += '&​postChatAttributes='​ + egainChat.PostChatAttributes + '&​eglvrefname='​ + refererName + '&'​ + eglvcaseid + vhtIds;
 +
 +            var domain = domainRegex.exec(eGainChatUrl)[0];​
 +
 +            if ((eGainChatUrl + refererurl).length <= 2000)
 +                eGainChatUrl += '&​referer='​ + refererurl;
 +            var params = '​height=650,​width=450,​resizable=yes,​scrollbars=yes,​toolbar=no';​
 +
 +            window.addEventListener('​message',​ function(event) {
 +                try {
 +                    var message = JSON.parse(event.data);​
 +                    if (event.origin === domain && message.Caller.indexOf('​EGLV_DOCK'​) !== -1) {
 +                        if (message.Key === '​X-egain-session'​) {
 +                            var response = {
 +                                value: window.sessionStorage.getItem('​X-egain-session'​),​
 +                                caller: message.Caller
 +                            };
 +                            event.source.postMessage(JSON.stringify(response),​ event.origin);​
 +                        }
 +                    }
 +                } catch (e) {}
 +            });
 +            if (egainChat.PostChatAttributes) {
 +                if (window.navigator.userAgent.indexOf("​Trident"​) != -1 || window.navigator.userAgent.indexOf("​Edge"​) != -1) {
 +                    var win = document.getElementById('​egainChatDomainFrame'​);​
 +                    win.contentWindow.postMessage(JSON.stringify(egainChat.CustomerContextParameters),​ domain);
 +                } else {
 +                    window.addEventListener('​message',​ function(event) {
 +                        try {
 +                            var message = JSON.parse(event.data);​
 +                            if (event.origin === domain && message.Caller.indexOf('​EGLV_DOCK'​) !== -1) {
 +                                if (message.Key === '​EgainChatParameter'​) {
 +
 +                                    var response = {
 +                                        value: egainChat.CustomerContextParameters,​
 +                                        caller: message.Caller
 +                                    };
 +                                    event.source.postMessage(JSON.stringify(response),​ event.origin);​
 +                                }
 +                            }
 +                        } catch (e) {}
 +                    });
 +                }
 +            }
 +            egainChat.eglvchathandle = window.open(eGainChatUrl,​ '',​ params);
 +        };
 +        /*To be called by client website. All the parameters specified in application-chat-defaults must be set here.*/
 +        egainChat.SetCustomerParameters = function(egainAttributeName,​ attributeValue) {
 +            egainChat.CustomerContextParameters[egainAttributeName] = attributeValue;​
 +        };
 +        egainChat.writeIframeIfRequired = function() {
 +            if (egainChat.PostChatAttributes && (window.navigator.userAgent.indexOf("​Trident"​) != -1 || window.navigator.userAgent.indexOf("​Edge"​) != -1)) {
 +                var iframe = document.createElement('​iframe'​);​
 +                iframe.src = egainChat.serverURL + '/​web/​view/​live/​customer/​storeparams.html?​wsname='​ + window.location.protocol + '//'​ + window.location.host;​
 +                iframe.style.display = '​none';​
 +                iframe.name = '​egainChatDomainFrame';​
 +                iframe.id = '​egainChatDomainFrame';​
 +                if (typeof document.body !== '​undefined'​ && document.body !== null) {
 +                    document.body.appendChild(iframe);​
 +                } else {
 +                    setTimeout(egainChat.writeIframeIfRequired,​ 100);
 +                }
 +            }
 +        }
 +        egainChat.writeIframeIfRequired();​
 +    </​script>​
 +</​head>​
 +
 +<​body>​
 +<!-- Proactive Chat (hidden) which using Bootstrap'​s Modal feature ​ -->
 +<div class="​modal fade" id="​chatModal"​ tabindex="​-1"​ role="​dialog"​ aria-labelledby="​chatModalLabel"​ aria-hidden="​true">​
 +  <div class="​modal-dialog"​ role="​document">​
 +    <div class="​modal-content">​
 +      <div class="​modal-header">​
 +        <h5 class="​modal-title"​ id="​chatModalLabel">​Proactive Chat Demo</​h5>​
 +        <button type="​button"​ class="​close"​ data-dismiss="​modal"​ aria-label="​Close">​
 +          <span aria-hidden="​true">&​times;</​span>​
 +        </​button>​
 +      </​div>​
 +      <div class="​modal-body">​
 + <​p>​Hello,​ one of our assistants is available to assist you now. 
 + <​p>​Do you want to chat?
 +      </​div>​
 +      <div class="​modal-footer">​
 +        <button type="​button"​ class="​btn btn-secondary"​ data-dismiss="​modal">​Close</​button>​
 +        <button type="​button"​ class="​btn btn-primary"​ onclick="​$('#​chatModal'​).modal('​hide'​);​egainChat.openHelp();">​Chat Now!</​button>​
 +      </​div>​
 +    </​div>​
 +  </​div>​
 +</​div>​
 +
 +    <div class="​d-flex justify-content-center">​
 +        <​h1>​Very Simple Undocked Chat Example<​h1>​
 +    </​div>​
 +    &nbsp;
 +    <div class="​d-flex justify-content-center">​
 + <​h2>​Includes Proactive Chat!<​h2>​
 +    </​div>​
 +    &nbsp;
 + <​!--Chat Options to display to end user - open / closed / busy -->
 + <​!--Chat Open-->
 +    <div id="​mychatOn"​ align="​center"​ style="​display:​ none">​
 +        <button type="​button"​ class="​btn btn-primary"​ onclick="​egainChat.openHelp();">​Chat Now!</​button>​
 +    </​div>​
 + <​!--Chat Closed / Off -->
 +    <div id="​mychatOff"​ align="​center"​ style="​display:​ none">​
 +        <​h2>​We are closed.</​h2>​
 +    </​div>​
 + <​!--Chat Busy-->
 +    <div id="​mychatBusy"​ align="​center"​ style="​display:​ none">​
 +        <​h2>​Sorry,​ we are busy.</​h2>​
 + <​h3>​Busy Reason: <script type="​text/​javascript">​document.write(chatBusyReason)</​script></​h3>​
 +    </​div>​
 +
 +    <!-- Custom Cisco ECE JavaScript for Show or Hide the open / closed / busy Chat option based on var '​chatStatus'​ value and JS to display Proactive Chat Popup when the configured timer value expires-->​
 + <script type="​text/​javascript">​
 +        if (chatStatus == '​closed'​) {
 +            $('#​mychatOff'​).show();​
 +            $('#​mychatOn'​).hide();​
 +            $('#​mychatBusy'​).hide();​
 +        }
 +        if (chatStatus == '​open'​) {
 +            $('#​mychatOn'​).show();​
 +            $('#​mychatOff'​).hide();​
 +            $('#​mychatBusy'​).hide();​
 +            //Proactive Chat
 +            setTimeout(function() {
 +                if (chatTimer != 0) {
 +                    $('#​chatModal'​).modal();​
 +                }
 +            }, chatTimer);
 +        }
 +        if (chatStatus == '​busy'​) {
 +            $('#​mychatBusy'​).show();​
 +            $('#​mychatOff'​).hide();​
 +            $('#​mychatOn'​).hide();​
 +        }
 +
 +        function disableProactiveChat() {
 +            window.chatTimer = 0;
 +            console.log('​chatTimer:​ 0');
 +        }
 +
 +        console.log('​Source:​ displaychat.js chatStatus: ' + chatStatus);​
 +        console.log('​Source:​ displaychat.js chatTimer: ' + chatTimer);
 +    </​script>​
 +</​body>​
 +</​html>​
 +</​file>​