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:demojs [2019/03/06 15:05] – gerardorourkevendors: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 = '[email protected]'; +
-$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> +
- +
-===== HTML ===== +
-==== '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> +
-==== 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>+
  • vendors/cisco/uc/ece/demojs.1551884738.txt.gz
  • Last modified: 2019/03/06 15:05
  • by gerardorourke