Differences

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

Link to this comparison view

Both sides previous revision Previous revision
vendors:cisco:uc:ece:demojs [2019/03/06 15:06]
gerardorourke ['Chat on' HTML]
vendors:cisco:uc:ece:demojs [2019/03/15 09:34] (current)
gerardorourke
Line 1: Line 1:
 ====== Demo Website Javascript ====== ====== Demo Website Javascript ======
-Using below you can create a Proactive Chat & Change website based on open / closed / busy values. 
  
-==== JavaScript - PHP File===== +This detail here has been improved ​on the below page\\ 
-<code php> +[[vendors:cisco:uc:ece:apiexample]]
-<?php +
-header('​Content-Type:​ application/​javascript'​);​ +
-// todo - check values of GET variables before setting them - and give them a default if not valid +
-// Author: Gerry O'​Rourke +
-// Date: Feb 2019 +
-// This is code created for a demo website and is not production ready. Update, secure and improve error handling if used on a a production website +
-// Use at your own risk - provided for education purposes only +
- +
- +
-$myChatEntryId = htmlspecialchars($_GET["​chatEntryId"​]);​ +
-$myBusinessHoursId = htmlspecialchars($_GET["​businessHoursId"​]);​ +
-$ccehostname = '​ucce-hds-a.lab2.purplepi.ie';​ +
-$ecehostname = '​ucce-ece-web.lab2.purplepi.ie';​ +
-$cceuser = '​webapi@lab2.purplepi.ie';​ +
-$ccepass = '​mypassword';​ +
- +
-$url = '​https://'​.$ccehostname.'/​unifiedconfig/​config/​businesshour/'​ . $myBusinessHoursId;​ +
- +
-$ch = curl_init($url);​ +
- ​curl_setopt($ch,​ CURLOPT_RETURNTRANSFER,​ true); +
-    curl_setopt($ch,​ CURLOPT_SSL_VERIFYPEER,​ FALSE); +
-    curl_setopt($ch,​ CURLOPT_SSL_VERIFYHOST,​ FALSE); +
-    curl_setopt($ch,​ CURLOPT_USERPWD,"​$cceuser:​$ccepass"​);​ +
-    curl_setopt($ch,​ CURLOPT_HTTPGET,​ 1); +
-    curl_setopt($ch,​ CURLOPT_CONNECTTIMEOUT,​ 2); //​connection timeout +
-    curl_setopt($ch,​ CURLOPT_TIMEOUT,​ 3); //timeout in seconds for transaction +
-    $output = curl_exec($ch);​ +
-    //echo $output."​\n"; +
-    //$info = curl_getinfo($ch);​ +
-    //​print_r($info);​ +
-    curl_close($ch);​ +
- +
-$xml=simplexml_load_string($output);​ +
-//echo $xml; +
-//​print_r($xml);​ +
- +
-$bh_status=(int) $xml->​runTimeStatus;​ +
-$bh_name=$xml->​name;​ +
-//echo "name: $bh_name\n"; +
-//echo "​runTimeStatus:​ $bh_status\n";​ +
- +
-//Parse BusinessHours Name for underscores +
-$myvar = (explode("​_",​$bh_name));​ +
-$myProactiveChatTimer = $myvar[1]; +
-$myMinAgentCount = $myvar[2]; +
-$myMaxQueueDepth = $myvar[3];​ +
-$myMaxWaitTime = $myvar[4];​ +
-if ((empty($myProactiveChatTimer))||(!is_numeric($myProactiveChatTimer))) {$myProactiveChatTimer = '​0';​} +
-if ((empty($myMinAgentCount))|| (!is_numeric($myMinAgentCount))) {$myMinAgentCount = '​0';​} +
-if ((empty($myMaxQueueDepth))||(!is_numeric($myMaxQueueDepth))) {$myMaxQueueDepth = '​5';​} +
-if ((empty($myMaxWaitTime))|| (!is_numeric($myMaxWaitTime))) {$myMaxWaitTime = '​60';​} +
-$myProactiveChatTimer = $myProactiveChatTimer * 1000; //convert to ms +
- +
-//echo "​\nmyProactiveChatTimer"​.$myProactiveChatTimer;​ +
-//echo "​\nmyMinAgentCount"​.$myMinAgentCount;​ +
-//echo "​\nmyMaxQueueDepth"​.$myMaxQueueDepth;​ +
-//echo "​\nmyMaxWaitTime"​.$myMaxWaitTime;​ +
-//echo "​\n\n";​ +
-//set open or closed based on runTimeStatus +
- +
-$chatStatus = '​closed';​ +
- +
-if ($bh_status==1 or $bh_status==3){ +
-$chatStatus = '​open';​ +
- +
- // Capacity API - Checking Agents are available +
- curl_reset($ch);​ +
- $url = '​http://'​.$ecehostname.'/​system/​egain/​chat/​entrypoint/​capacity/'​ . $myChatEntryId;​ +
- //echo $url."​\n";​ +
- $ch = curl_init($url);​ +
-    curl_setopt($ch,​ CURLOPT_RETURNTRANSFER,​ true); +
-    curl_setopt($ch,​ CURLOPT_HTTPGET,​ 1); +
-    curl_setopt($ch,​ CURLOPT_CONNECTTIMEOUT,​ 2); //​connection timeout +
-    curl_setopt($ch,​ CURLOPT_TIMEOUT,​ 3); //timeout in seconds for transaction +
-    $capacity = curl_exec($ch);​ +
-    //$info = curl_getinfo($ch);​ +
-    //​print_r($info);​ +
-    curl_close($ch);​ +
- +
- $xml_data = str_replace("​ns2:","",​$capacity);​ +
- $xml_capacity=simplexml_load_string($xml_data);​ +
- $agentcount=(int) $xml_capacity->​count;​ +
- if ($agentcount < $myMinAgentCount){ +
- $chatStatus = '​busy';​ +
- $chatBusyReason = '​MinAgentCount';​ +
- } else { +
- curl_reset($ch);​ +
- $url = '​http://'​.$ecehostname.'/​system/​egain/​chat/​entrypoint/​liveSessionStatus/'​ . $myChatEntryId;​ +
- $ch = curl_init($url);​ +
-    curl_setopt($ch,​ CURLOPT_RETURNTRANSFER,​ true); +
-    curl_setopt($ch,​ CURLOPT_HTTPGET,​ 1); +
-    curl_setopt($ch,​ CURLOPT_CONNECTTIMEOUT,​ 2); //​connection timeout +
-    curl_setopt($ch,​ CURLOPT_TIMEOUT,​ 3); //timeout in seconds for transaction +
- $liveSessionStatus = curl_exec($ch);​ +
-    //$info = curl_getinfo($ch);​ +
-    //​print_r($info);​  +
-    //​curl_close($ch);​ +
- $xml_data = str_replace("​ns2:","",​$liveSessionStatus);​ +
- $xml_liveSessionStatus=simplexml_load_string($xml_data);​ +
- $queueDepth=(int) $xml_liveSessionStatus->​queueDepth;​ +
- $waitTime=(int) $xml_liveSessionStatus->​waitTime;​ +
- +
- if ($queueDepth>​$myMaxQueueDepth){ +
- $chatStatus = '​busy';​ +
- $chatBusyReason = '​MaxQueueDepth';​ +
-+
- if ($waitTime>​$myMaxWaitTime){ +
- $chatStatus = '​busy';​ +
- $chatBusyReason = '​MaxWaitTime';​ +
-+
-  +
-+
-+
- +
-echo "var chatStatus = '​$chatStatus';​\n";​ +
-echo "var chatBusyReason = '​$chatBusyReason';​\n";​ +
-echo "var chatTimer = '​$myProactiveChatTimer';​\n";​ +
-echo "​\nconsole.log('​------- Demo API Lookups Start------'​);";​ +
-echo "​\nconsole.log('​Filename:​ " . basename(__FILE__) . "'​);";​ +
-echo "​\nconsole.log('​ChatEntryId:​ $myChatEntryId'​);";​ +
-echo "​\nconsole.log('​BusinessHoursId:​ $myBusinessHoursId'​);";​ +
-echo "​\nconsole.log('​chatStatus:​ $chatStatus'​);";​ +
-echo "​\nconsole.log('​chatTimer:​ $myProactiveChatTimer'​);";​ +
-echo "​\nconsole.log('​chatBusyReason:​ $chatBusyReason'​);";​ +
-echo "​\nconsole.log('​------- min / max queue values------'​);";​ +
-echo "​\nconsole.log('​minAgentCount:​ $myMinAgentCount'​);";​ +
-echo "​\nconsole.log('​maxQueueDepth:​ $myMaxQueueDepth'​);";​ +
-echo "​\nconsole.log('​maxWaitTime:​ $myMaxWaitTime'​);";​ +
-echo "​\nconsole.log('​------- current queuevalues------'​);";​ +
-echo "​\nconsole.log('​agentcount:​ $agentcount'​);";​ +
-echo "​\nconsole.log('​queueDepth:​ $queueDepth'​);";​ +
-echo "​\nconsole.log('​waitTime:​ $waitTime'​);";​ +
-echo "​\nconsole.log('​------- Demo API Lookups End------'​);";​ +
-?> +
-</​code>​ +
- +
-===== Website Javascript - which updates the webpage ===== +
-<code javascript>​ +
-if (chatStatus == '​closed'​){ +
-$('#​mychatOff'​).show();​ +
-$('#​myNoteChatOff'​).show();​ +
-$('#​mychatOn'​).hide();​ +
-$('#​myNoteChatOn'​).hide();​ +
-$('#​mychatBusy'​).hide();​ +
-$('#​myNoteChatBusy'​).hide();​ +
-}  +
-if (chatStatus == '​open'​){ +
-$('#​mychatOn'​).show();​ +
-$('#​myNoteChatOn'​).show();​ +
-$('#​mychatOff'​).hide();​ +
-$('#​myNoteChatOff'​).hide();​ +
-$('#​mychatBusy'​).hide();​ +
-$('#​myNoteChatBusy'​).hide();​ +
-//Proactive Chat +
-setTimeout(function() { +
- if (chatTimer != 0){ +
-    $('#​chatModal'​).modal();​ +
-+
-}, chatTimer);​ +
-}  +
-if (chatStatus == '​busy'​){ +
-$('#​mychatBusy'​).show();​ +
-$('#​myNoteChatBusy'​).show();​ +
-$('#​mychatOff'​).hide();​ +
-$('#​myNoteChatOff'​).hide();​ +
-$('#​mychatOn'​).hide();​ +
-$('#​myNoteChatOn'​).hide();​ +
-}  +
- +
-function disableProactiveChat() { +
-  window.chatTimer = 0;  +
-console.log('​chatTimer:​ 0'); +
-+
- +
-console.log('​Source:​ displaychat.js chatStatus: ' + chatStatus);​ +
-console.log('​Source:​ displaychat.js chatTimer: ' + chatTimer);​ +
-</​code>​ +
- +
-===== HTML ===== +
-==== Simple HTML Example showing how to update page ==== +
-<code html> +
- <​h3 id='​myNoteChatOn'​ style="​display:​ none">​Note:​ Chat is on - we are open!</​h3>​ +
- <​h3 id='​myNoteChatBusy'​ style="​display:​ none">​Note:​ We are open - but we are busy!</​h3>​ +
- <​h3 id='​myNoteChatOff'​ style="​display:​ block">​Note:​ Chat is off - as we are closed!</​h3>​ +
-</​code>​ +
- +
-==== 'Chat on' HTML ==== +
-Note: It disables the proactive chat (by calling a function) and then also calls the ECE Chat +
- +
-<code html> +
-<div id="​mychatOn"​ style="​display:​ none">​ +
- <a onclick="​disableProactiveChat();​egainChat.openHelp();"​ href='​javascript:​void(0)'>​ +
- <div class="​vertical_list_pull-top verticalbuttonClass">​ +
- <div class="​vertical_image_pull-top">​ +
- <img id="​webchat-image"​ class="​webchat-image"​ src="​images/​ready.png" ​ title="​Live Web Chat" alt="​Live Web Chat"/>​ +
- </​div>​ +
- <div class="​vertical_title_pull-top">​Live Web Chat</​div>​ +
- </​div>​ +
- </​a>​ +
-</​div>​ +
-</​code>​ +
- +
-==== HTML for Proactive Chat ==== +
-Note - uses Bootstrap CSS **Modal** for Popup - [[https://​getbootstrap.com/​docs/​4.0/​components/​modal/​|Reference]] +
- +
-<code html> +
-<!-- Modal --> +
-<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 assistents 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>​ +
-</​code>​+