chatStatus API

How to use the chatStatus API

Calling the chatStatus API

You must pass in a valid businessHoursId and chatEntryId variable values as per the below example: 

https://api.chatstatus.mydomain.com/chatStatus.php?businessHoursId=5000&chatEntryId=1003

An ajax example calling the API is detailed below

There are 3 variables that the API responds with that should be used to change how the Chat option is displayed for an end user. Other variables (excluding debugLevel detailed below) are for troubleshooting / log purposes only.
The 3 variables are:

  • chatStatus
  • chatStatusReason
  • chatTimer

The debugLevel variable should be set to output the API response to the Browser Console to assist in troubleshooting purposes if the debugLevel variable is greater than 0 - as per the below example code: 

if (chatStatusAPI.debugLevel > 0) {
	console.log(chatStatusAPI);
}

The recommended chatStatus API refresh is 30 seconds. If a chatStatusReason 'out of service' occurs, a hold off time of 5 times the standard refresh rate should be used, i.e. 2.5 minutes.

chatStatus

The chatStatus variable should be set to a default value of “closed” before calling the API - in case the API call fails.

The API should return only 1 of 3 possible options for chatStatus

  • open
  • busy
  • closed (recommended default option before calling the API)

chatStatusReason

The chatStatus Reason can be used to display a different message based on why chat is closed. For example if chat is closed for a Bank Holidays versus a standard closed message.

The chatStatus Reason needs to be agreed in advance as this value can be set to anything, with typical / recommended options of “Holiday” and “Emergency”.

All other reasons should display a default closed message (as per below example).

Recommended values

  • Holiday
  • Emergency
  • out of service (recommended default option below calling API)
  • any-other-value

chatTimer

The chatTimer is the time in milliseconds before a proactive Chat query should be pushed to the end user. If set to '0', the proactive chat should be disabled.

A default option of '0' is recommended before calling the API.

If chat is available and an end user selects to start a chat, it is important to disable the proactive chat at the same time as calling the ECE 'start chat' function egainDockChat.openHelp()

Example Responses

Example Response - debugLevel set to '1'

{
  "chatStatus": "busy",
  "chatStatusReason": "MinAgentCount",
  "chatTimer": 10000,
  "errorCode": 0,
  "errorString": "",
  "debugLevel": 1,
  "cacheEngine": "Redis"
}

Example Response - debugLevel set to '3'

{
    "chatStatus": "busy",
    "chatStatusReason": "MinAgentCount",
    "chatTimer": 10000,
    "errorCode": 0,
    "errorString": "",
    "debugLevel": 3,
    "cacheEngine": "Redis",
    "cceBusinessHoursAPI": "From Source",
    "eceCapacityAPI": "From Source",
    "eceLiveSessionAPI": "",
    "cceBusinessHoursObj": {
        "API": "cceBusinessHours",
        "Name": "Chat_10_1_10_60",
        "Status": "open",
        "runTimeStatusReason": "Week Day closed reason",
        "ChatTimer": 10000,
        "MinAgentCount": 1,
        "MaxQueueDepth": 10,
        "MaxWaitTime": 60,
        "errorcode": 0,
        "errorstring": "",
        "httpcode": 200,
        "runTimeStatus": 3,
        "cache": false
    },
    "eceCapacityObj": {
        "API": "eceCapacity",
        "Status": "busy",
        "BusyReason": "MinAgentCount",
        "MinAgentCount": 1,
        "errorcode": 0,
        "errorstring": "",
        "httpcode": 200,
        "AgentCount": 0,
        "cache": false
    },
    "eceLiveSessionObj": null
}

Example Implementation using the chatStatus API

chatwebsite_template.zip

Code Snippets to add to your webpage

<!-- Cisco Provided ECE JavaScript -->
<script src="https://api.chatstatus.example.com/js/ece_sales.js"></script>
 
<!-- Set custom variable(s) - in this example we have using a custom variable pagename -->
<script>egainDockChat.SetCustomerParameters("pagename","sales");</script>
 
<!-- chatStatus JavaScript API to set the chat line to 'open', 'closed' or 'busy' based on the value of variable 'chatStatus' and 'chatStatusReason'-->
<script src="https://api.chatstatus.example.com/js/chatstatus_sales.js"></script>
 
<!-- Cisco Provided ECE JS - required for Cisco ECE docked chat -->
<script type="text/javascript" src="https://ucce-ece-webserver.example.com/system/templates/chat/egain-chat.js"></script>

HTML DIVs

There are 4 div in the HTML to show the chat option in the 4 states

  • loading
    • <div id="mychatPageLoad">
  • on / available
    • <div id="mychatOn">
  • busy 
    • <div id="mychatBusy">
  • closed / off
    • <div id="mychatOff">

There is also a div for the proactive Chat option - in the example using Bootstrap modal. 

<div class="modal fade" id="chatModal">

ChatReason Message

In the below example the closed option displays a different closed reason messages based on the chatReason value. The Reason Value could be ANY value - so specific values need to be agreed in advance and a default value should be displayed if the reason is not matched against any specific reason value. In our example is specific reason messages set for 'holiday', 'emergency' and 'out of service'. 

            <p id="mychatclosed-standardmessage" class="lead mb-0">Chat to us from 9am to 5pm from Monday to Friday.</p>
            <p id="mychatclosed-holidaymessage" style="display: none" class="lead mb-0">We are closed for the Bank Holiday. Chat to us tomorrow from 9am!</p>
            <p id="mychatclosed-emergencymessage" style="display: none" class="lead mb-0">Sorry we have had to close due to unforeseen circumstances. Please try again later.</p>
            <p id="mychatclosed-outofservicemessage" style="display: none" class="lead mb-0">Sorry we are experiencing technical issues. Please try again later.</p>

A full example of this html is detailed below.

HTML code snippet example

html_snippet_example.html
<!-- Start of Chat Div's -->
 
<!-- This Div "mychatPageLoad" will be visible when the page loads and become hidden once the chatStatus JavaScript has run and returned a value. This prevents a pause or jumpy page load - as it the same as above div without a click or message. -->
<div id="mychatPageLoad" class="col-lg-4">
	<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
		<div class="features-icons-icon d-flex justify-content-center" >
			<i class="icon-bubbles m-auto text-primary"/>
		</div>
		<h3>Chat loading ...</h3>
		<p class="lead mb-0"/>
		<img class="img-fluid rounded-circle mb-3" src="img/Spinner-1s-100px.gif" alt="" height="60" width="60">
	</div>
</div>
 
<!-- This Div "mychatOn" will be hidden until the chatStatus JavaScript has run (at the end of the page) and will then become visible if variable chatStatus='open' -->
<div id="mychatOn" style="display: none" class="col-lg-4" onclick="disableProactiveChat();egainDockChat.openHelp();" href='javascript:void(0)'>
	<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
		<div class="features-icons-icon d-flex justify-content-center" >
			<i class="icon-bubbles m-auto text-primary"/>
		</div>
		<h3>Chat to us</h3>
		<p class="lead mb-0">Click here to chat to one of our advisors!</p>
	</div>
</div>
 
<!-- This Div "mychatOff" will be hidden until the chatStatus JavaScript has run (at the end of the page) and will then become visible if variable chatStatus='closed' -->		
<div id="mychatOff" style="display: none" class="col-lg-4">
	<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
		<div class="features-icons-icon d-flex justify-content-center" >
			<i class="icon-bubbles m-auto text-primary"/>
		</div>
		<h3>Chat is now closed</h3>
		<!-- only one of the below 3 divs should appears - and this depends on teh value of chatStatusReason - in this example Reason needs to be  exactly "Emergency" or "Holiday" - set in CCE BusinessHours -->
		<p id="mychatclosed-standardmessage" class="lead mb-0">Chat to us from 9am to 5pm from Monday to Friday.</p>
		<p id="mychatclosed-holidaymessage" style="display: none" class="lead mb-0">We are closed for the Bank Holiday. Chat to us tomorrow from 9am!</p>
		<p id="mychatclosed-emergencymessage" style="display: none" class="lead mb-0">Sorry we have had to close due to unforeseen circumstances. Please try again later.</p>
		<p id="mychatclosed-outofservicemessage" style="display: none" class="lead mb-0">Sorry we are experiencing technical issues. Please try again later.</p>
	</div>
</div>
 
<!-- This Div "mychatBusy" will be hidden until the chatStatus JavaScript has run (at the end of the page) and will then become visible if variable chatStatus='busy' -->		
<div id="mychatBusy" style="display: none" class="col-lg-4">
	<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
		<div class="features-icons-icon d-flex justify-content-center" >
			<i class="icon-bubbles m-auto text-primary"/>
		</div>
		<h3>Our Chat line is currently busy</h3>
		<p class="lead mb-0">Please try again later</p>
	</div>
</div>
 
<!-- 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!</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 experts is available to assist you now.
					<p>Would you like 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');egainDockChat.openHelp();">Chat Now!</button>
					</div>
			</div>
	</div>
</div>
<!-- End of Proactive Chat -->

Cisco Provided ECE code snippet - ece_sales.js

In the below example, custom button has been enabled, the entryPoint has been set to '1003' and the ECE chat template 'sales' has been used (which would be a copy of the default template (hosted on the ECE WebServer, with minor changes (form questions, post chat survey etc.).

ece_sales.js
/*eGain Chat server */
var egainDockChat = egainDockChat  || {};
egainDockChat.serverURL = "https://ucce-ece-webserver.example.com/system";
/*eGain Chat Entry Point*/
egainDockChat.EntryPointId  = "1003";
/*eGain Chat Locale*/
egainDockChat.Locale  = "en-US";
/*eGain template name*/
egainDockChat.Template = "sales";
/*Set to true to enable posting attributes to templates*/
egainDockChat.PostChatAttributes = true;
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();
}
}

chatStatus Code Snippet - chatstatus_sales.js

chatstatus_sales.js
/*
 * chatStatus Javascript
 */
 
// Initiate Variables
var chatStatus = 'closed';
var chatStatusReason = 'out of service';
var chatTimer = '0';
var proactiveChatDisabled = false;
var chatProactiveAttempts = '0' //Initialise to zero
var chatStatusRefreshTimer = '30000'; // refresh timer
var chatProactiveRetryAttempts = '1';
var chatStatusUrl = "https://api.chatstatus.mydomain.com/chatStatus.php";
var mybusinessHourId = '5000';
var mychatEntryId = '1003';
 
getChatStatus(); //on load of page run the (Ajax) Script
 
function getChatStatus() { //Note - the JSON Response gets auto parsed by jQuery.
	$.ajax({
			url: chatStatusUrl,
			data: {businessHoursId: mybusinessHourId, chatEntryId: mychatEntryId},
			dataType: 'json',
			success: function(chatStatusAPI) {
				chatStatus = chatStatusAPI.chatStatus;
				chatStatusReason = chatStatusAPI.chatStatusReason;
				chatTimer = chatStatusAPI.chatTimer;
				if (chatStatusAPI.debugLevel > 0) {
					console.log(chatStatusAPI);
			}
			setChatStatus(); //on success call this function to update the page
				}
		})				
		.fail(function() {
			chatStatus = 'closed';
			chatStatusReason = 'out of service';
			chatTimer = '0';
			console.log("chatStatus: Ajax Call failed ------");
			setChatStatus(); //on fail call this function to update the page
		})
 
};
 
function setChatStatus() {
 
	if (chatStatus == 'closed') {
		$('#mychatOff').show();
		$('#mychatOn').hide();
		$('#mychatBusy').hide();
		$('#mychatPageLoad').hide();
 
		if (chatStatusReason == 'Holiday') { //Case sensensitve = match exactly!
			$('#mychatclosed-holidaymessage').show();
			$('#mychatclosed-standardmessage').hide();
			$('#mychatclosed-emergencymessage').hide();
			$('#mychatclosed-outofservicemessage').hide();
		}
		else if (chatStatusReason == 'Emergency') { //Case sensensitve = match exactly!
			$('#mychatclosed-emergencymessage').show();
			$('#mychatclosed-holidaymessage').hide();
			$('#mychatclosed-standardmessage').hide();
			$('#mychatclosed-outofservicemessage').hide();
		}
		else if (chatStatusReason == 'out of service') { //Case sensensitve = match exactly!
			$('#mychatclosed-outofservicemessage').show();
			$('#mychatclosed-holidaymessage').hide();
			$('#mychatclosed-standardmessage').hide();
			$('#mychatclosed-emergencymessage').hide();
		}
		else { 
			$('#mychatclosed-standardmessage').show();
			$('#mychatclosed-outofservicemessage').hide();
			$('#mychatclosed-holidaymessage').hide();
			$('#mychatclosed-emergencymessage').hide();
		}
	}
 
	if (chatStatus == 'busy') {
		$('#mychatBusy').show();
		$('#mychatOff').hide();
		$('#mychatOn').hide();
		$('#mychatPageLoad').hide();
	}
 
	if (chatStatus == 'open') {
		$('#mychatOn').show();
		$('#mychatOff').hide();
		$('#mychatBusy').hide();
		$('#mychatPageLoad').hide();
 
		//Proactive Chat
		if (chatProactiveRetryAttempts > chatProactiveAttempts){
			setTimeout(function() {
				if ((chatTimer != 0) && (proactiveChatDisabled == false) && (chatStatus == 'open') && (chatProactiveRetryAttempts > chatProactiveAttempts)) { //Since open state can change by the timer occurs - need to check again before showing 
					chatProactiveAttempts++
					$('#chatModal').modal();
				}
			}, chatTimer);
		}
	}
	if (chatStatusReason == 'out of service'){
		setTimeout(getChatStatus, 5*chatStatusRefreshTimer); //call the getChatStatus function again in 5 times standard X seconds if chatStatusReason is 'out of service'
	}else{
		setTimeout(getChatStatus, chatStatusRefreshTimer); //call the getChatStatus function again in X seconds, where X is the chatStatusRefreshTimer
	}
}
 
function disableProactiveChat() {
	proactiveChatDisabled = true;
	console.log('chatStatus: Proactive Chat Disabled!');
}

Full HTML Example

Full Webpage example here: sales-webpage.zip
The index.html file - included in the attached - below.

index.html
<!DOCTYPE html>
<html lang="en">
 
<head>
 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
 
  <title>chatStatus API Chat Demo</title>
 
  <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
  <!-- Custom fonts for this template -->
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
  <link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
 
  <!-- Custom styles for this template -->
  <link href="css/landing-page.min.css" rel="stylesheet">
 
</head>
 
<body>
 
  <!-- Navigation -->
  <nav class="navbar navbar-light bg-light static-top">
    <div class="container">
      <a class="navbar-brand" href="#">chatStatus API - ECE Docked Chat Redis Example</a>
      <a class="btn btn-primary" href="#">Sign In</a>
    </div>
  </nav>
 
  <!-- Masthead -->
  <header class="masthead text-white text-center">
    <div class="overlay"></div>
    <div class="container">
      <div class="row">
        <div class="col-xl-9 mx-auto">
          <h1 class="mb-5">chatStatus API Demo</h1>
        </div>
        <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
          <form>
            <div class="form-row">
              <div class="col-12 col-md-9 mb-2 mb-md-0">
                <input type="email" class="form-control form-control-lg" placeholder="Enter your email...">
              </div>
              <div class="col-12 col-md-3">
                <button type="submit" class="btn btn-block btn-lg btn-primary">Sign up!</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </header>
 
  <!-- Icons Grid -->
  <section class="features-icons bg-light text-center">
    <div class="container">
      <div class="row">
 
<!--
		<div class="col-lg-4">
          <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
            <div class="features-icons-icon d-flex">
              <i class="icon-screen-desktop m-auto text-primary"></i>
            </div>
            <h3>Fully Responsive</h3>
            <p class="lead mb-0">This theme will look great on any device, no matter the size!</p>
          </div>
		</div>
-->
 
<!-- Start of Chat Div's -->
 
<!-- This Div "mychatOn" will be hidden until the chatStatus JavaScript has run (at the end of the page) and will then become visible if variable chatStatus='open' -->
		<div id="mychatOn" style="display: none" class="col-lg-4" onclick="disableProactiveChat();egainDockChat.openHelp();" href='javascript:void(0)'>
          <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
            <div class="features-icons-icon d-flex justify-content-center" >
              <i class="icon-bubbles m-auto text-primary"></i>
            </div>
            <h3>Chat to us</h3>
            <p class="lead mb-0">Click here to chat to one of our advisors!</p>
          </div>
		</div>
 
<!-- This Div "mychatOff" will be hidden until the chatStatus JavaScript has run (at the end of the page) and will then become visible if variable chatStatus='closed' -->		
		<div id="mychatOff" style="display: none" class="col-lg-4">
          <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
            <div class="features-icons-icon d-flex justify-content-center" >
              <i class="icon-bubbles m-auto text-primary"></i>
            </div>
            <h3>Chat is now closed</h3>
			<!-- only one of the below 3 divs should appears - and this depends on teh value of chatStatusReason - in this example Reason needs to be  exactly "Emergency" or "Holiday" - set in CCE BusinessHours -->
            <p id="mychatclosed-standardmessage" class="lead mb-0">Chat to us from 9am to 5pm from Monday to Friday.</p>
            <p id="mychatclosed-holidaymessage" style="display: none" class="lead mb-0">We are closed for the Bank Holiday. Chat to us tomorrow from 9am!</p>
            <p id="mychatclosed-emergencymessage" style="display: none" class="lead mb-0">Sorry we have had to close due to unforeseen circumstances. Please try again later.</p>
            <p id="mychatclosed-outofservicemessage" style="display: none" class="lead mb-0">Sorry we are experiencing technical issues. Please try again later.</p>
          </div>
		</div>
 
<!-- This Div "mychatBusy" will be hidden until the chatStatus JavaScript has run (at the end of the page) and will then become visible if variable chatStatus='busy' -->		
		<div id="mychatBusy" style="display: none" class="col-lg-4">
          <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
            <div class="features-icons-icon d-flex justify-content-center" >
              <i class="icon-bubbles m-auto text-primary"></i>
            </div>
            <h3>Our Chat line is currently busy</h3>
            <p class="lead mb-0">Please try again later</p>
          </div>
		</div>
 
<!-- This Div "mychatPageLoad" will be visible when the page loads and become hidden once the chatStatus JavaScript has run and returned a value. This prevents a pause or jumpy page load - as it the same as above div without a click or message. -->
		<div id="mychatPageLoad" class="col-lg-4">
          <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
            <div class="features-icons-icon d-flex justify-content-center" >
              <i class="icon-bubbles m-auto text-primary"></i>
            </div>
            <h3>Chat loading ...</h3>
            <p class="lead mb-0"></p>
  	    	<img class="img-fluid rounded-circle mb-3" src="img/Spinner-1s-100px.gif" alt="" height="60" width="60">
          </div>
		</div>
 
<!-- End of Chat Div's -->
 
        <div class="col-lg-4" onclick="window.open('http://api.ubuntu100.example.com/chatStatus.php?businessHoursId=5000&chatEntryId=1002','mywindow');";>
          <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
            <div class="features-icons-icon d-flex">
              <i class="icon-layers m-auto text-primary"></i>
            </div>
            <h3>chatStatus API</h3>
            <p class="lead mb-0">Click here to have a look at the chatStatus API response directly</p>
          </div>
        </div>
 
        <div class="col-lg-4" onclick="location.href='http://orourke.tv/web/doku.php?id=vendors:cisco:uc:ece:chatstatusv3';">
          <div class="features-icons-item mx-auto mb-0 mb-lg-3">
            <div class="features-icons-icon d-flex">
              <i class="icon-check m-auto text-primary"></i>
            </div>
            <h3>Easy to Use</h3>
            <p class="lead mb-0">Click here to find out more about the chatStatus API</p>
          </div>
        </div>
 
	  </div>
    </div>
  </section>
 
  <!-- Image Showcases -->
  <section class="showcase">
    <div class="container-fluid p-0">
      <div class="row no-gutters">
 
        <div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image: url('img/bg-showcase-1.jpg');"></div>
        <div class="col-lg-6 order-lg-1 my-auto showcase-text">
          <h2>Fully Responsive Design</h2>
          <p class="lead mb-0">When you use a theme created by Start Bootstrap, you know that the theme will look great on any device, whether it's a phone, tablet, or desktop the page will behave responsively!</p>
        </div>
      </div>
      <div class="row no-gutters">
        <div class="col-lg-6 text-white showcase-img" style="background-image: url('img/bg-showcase-2.jpg');"></div>
        <div class="col-lg-6 my-auto showcase-text">
          <h2>Updated For Bootstrap 4</h2>
          <p class="lead mb-0">Newly improved, and full of great utility classes, Bootstrap 4 is leading the way in mobile responsive web development! All of the themes on Start Bootstrap are now using Bootstrap 4!</p>
        </div>
      </div>
      <div class="row no-gutters">
        <div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image: url('img/bg-showcase-3.jpg');"></div>
        <div class="col-lg-6 order-lg-1 my-auto showcase-text">
          <h2>Easy to Use &amp; Customize</h2>
          <p class="lead mb-0">Landing Page is just HTML and CSS with a splash of SCSS for users who demand some deeper customization options. Out of the box, just add your content and images, and your new landing page will be ready to go!</p>
        </div>
      </div>
    </div>
  </section>
 
  <!-- Testimonials -->
  <section class="testimonials text-center bg-light">
    <div class="container">
      <h2 class="mb-5">What people are saying...</h2>
      <div class="row">
        <div class="col-lg-4">
          <div class="testimonial-item mx-auto mb-5 mb-lg-0">
            <img class="img-fluid rounded-circle mb-3" src="img/testimonials-1.jpg" alt="">
            <h5>Margaret E.</h5>
            <p class="font-weight-light mb-0">"This is fantastic! Thanks so much guys!"</p>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="testimonial-item mx-auto mb-5 mb-lg-0">
            <img class="img-fluid rounded-circle mb-3" src="img/testimonials-2.jpg" alt="">
            <h5>Fred S.</h5>
            <p class="font-weight-light mb-0">"Bootstrap is amazing. I've been using it to create lots of super nice landing pages."</p>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="testimonial-item mx-auto mb-5 mb-lg-0">
            <img class="img-fluid rounded-circle mb-3" src="img/testimonials-3.jpg" alt="">
            <h5>Sarah W.</h5>
            <p class="font-weight-light mb-0">"Thanks so much for making these free resources available to us!"</p>
          </div>
        </div>
      </div>
    </div>
  </section>
 
  <!-- Call to Action -->
  <section class="call-to-action text-white text-center">
    <div class="overlay"></div>
    <div class="container">
      <div class="row">
        <div class="col-xl-9 mx-auto">
          <h2 class="mb-4">Ready to get started? Sign up now!</h2>
        </div>
        <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
          <form>
            <div class="form-row">
              <div class="col-12 col-md-9 mb-2 mb-md-0">
                <input type="email" class="form-control form-control-lg" placeholder="Enter your email...">
              </div>
              <div class="col-12 col-md-3">
                <button type="submit" class="btn btn-block btn-lg btn-primary">Sign up!</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>
 
  <!-- Footer -->
  <footer class="footer bg-light">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 h-100 text-center text-lg-left my-auto">
          <ul class="list-inline mb-2">
            <li class="list-inline-item">
              <a href="#">About</a>
            </li>
            <li class="list-inline-item">&sdot;</li>
            <li class="list-inline-item">
              <a href="#">Contact</a>
            </li>
            <li class="list-inline-item">&sdot;</li>
            <li class="list-inline-item">
              <a href="#">Terms of Use</a>
            </li>
            <li class="list-inline-item">&sdot;</li>
            <li class="list-inline-item">
              <a href="#">Privacy Policy</a>
            </li>
          </ul>
          <p class="text-muted small mb-4 mb-lg-0">&copy; Your Website 2019. All Rights Reserved.</p>
        </div>
        <div class="col-lg-6 h-100 text-center text-lg-right my-auto">
          <ul class="list-inline mb-0">
            <li class="list-inline-item mr-3">
              <a href="#">
                <i class="fab fa-facebook fa-2x fa-fw"></i>
              </a>
            </li>
            <li class="list-inline-item mr-3">
              <a href="#">
                <i class="fab fa-twitter-square fa-2x fa-fw"></i>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="#">
                <i class="fab fa-instagram fa-2x fa-fw"></i>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
 
 
<!-- 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!</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 experts is available to assist you now.
		<p>Would you like 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');egainDockChat.openHelp();">Chat Now!</button>
      </div>
    </div>
  </div>
</div>
<!-- End of Proactive Chat -->
 
 
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
<!-- Cisco Provided ECE JavaScript -->
<script src="https://api.chatstatus.example.com/js/sales_ece.js"></script>
 
<script>egainDockChat.SetCustomerParameters("pageName","Sales-Bananas");</script>
 
<!-- JavaScript to Show or Hide the open / closed / busy Chat options based on 'chatStatus' and 'chatStatusReason' values from chatStatus custom API-->
<script src="https://api.chatstatus.example.com/js/sales_chatstatus.js"></script>
 
<!-- Cisco Provided ECE JavaScript - required for docked chat -->
<script type="text/javascript" src="https://ucce-ece-webserver.example.com/system/templates/chat/egain-chat.js"></script>	
 
</body>
</html>
  • vendors/cisco/uc/ece/chatstatus/api.txt
  • Last modified: 2021/09/16 17:16
  • by gerardorourke