Demo Website Javascript

Using below you can create a Proactive Chat & Change website based on open / closed / busy values.

<?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------');";
?>

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);

 <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>

Note: It disables the proactive chat (by calling a function) and then also calls the ECE Chat

<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>