A. Programmers (API)‎ > ‎D. HTML‎ > ‎

1. Web Chat UI

 
EMBEDDING A CHAT LINK OF A MONITORED QUEUE OR INTERVIEW TO YOUR WEB SITE.
 
By:        Vivek Garg
Date:    06/29/2010
Rev.:    10/21/2010
 
Embedding a chat link to any web page is fairly easy. Take the following steps to embed chat link into your custom web page:
1. Open the webpage using any text editor
2. Add the following snippet to page header:
<script type="text/javascript" >
function startchat(queue) {
window.open("http://ApacheServerIP/ITFramework/webclient/chatapi.html?userName=" + queue,"_blank","scrollbars=yes,resizable=yes,menubar=no,status=no,directories=no,width=638,height=515");
}
</script>

3. Add the following snippet to page body where you would want to display the chat link:
<a href="javascript:startchat(' Queue Login ID ');" style="text-decoration:none; color:green; font-family:Calibri">
<img style="vertical-align:bottom" alt="" src="http:// ApacheServerIP /ITFramework/servlet/ITSTLinksStatus?name=Queue Login ID " border="0" >
<span>Queue Display Name goes here</span>
</a>

'Queue Login ID' in the above snippet  needs to be replaced with the Queue Login Name.
You can customize the look and feel of the hyperlink as per your needs. Hyperlink needs to call the function: startchat(‘Queue Login ID’) to initiate a chat when the hyperlink is clicked by the user.


A live demo of the customized chat links can be viewed at http://www.instant-tech.com/Interactive_Presence.cfm
============================================================
CUSTOMIZING WEB CLIENT LOOK AND FEEL
By:  Vivek Garg
Date:    07/07/2010
Rev.:    10/08/2010

Color scheme used by web client can be easily tweaked. All the customizations are specified in the CSS file named “style.css”.

This file is located at
<<Apache Install Folder>>\Tomcat6.0\webapps\ITFramework\webclient

File contents are as follows:

image

Updating the color hex codes will be instantly applied to chat client. You can also append HTML element attributes as per your needs.

To update the logo displayed on the chat client you will need to update the file: logoFrame.html

File contents are as follows:

image

You will need to update the path to the image tag to point to your logo.

========================================================================

CONFIGURING WEB CLIENT AVAILABILITY BASED ON LOCAL TIME AND VISITOR LOCATION
By:  Vivek Garg
Date:    03/29/2010
Rev.:    10/08/2010
 
At times the Administrators would want to conceal Queue link on a web page from users of a specific region (city/state) or during specific hours of the day.

To hide the Queue link from users of a specific region add the following javascript variable in the api.html (page) header:

var State_code="<< State Code Goes Here >>";

This will ensure that people of the specified region are unable to view Queue link.

To make the Queue link available to users only during your working hours add the following javascript variables in the api.html (page) header:

var clientSystemDate=calcTime('+10.5'); //specify GMT offset
var chatStartTime=setcalcTime('+10.5','9'); //specify working hours start time
var chatEndTime=setcalcTime('+10.5','18');  //specify working hours end time

========================================================================
 
CONFIGURING WEB CLIENT FOR CUSTOM ATTRIBUTES
By:  Vivek Garg
Date:    03/29/2010
Rev.:    10/08/2010
 
The web client can be configured to pass following visitor specific attributes (optional) to the Queue and Queue experts:

Customer Account Number
Customer Business Name
Customer State Code
Customer Phone Number
SessionID

Page customizations for passing through the attributes are as follows:

After the JavaScript function writeSTLinksApplet("visitor","",false); is called in api.html file add the following function calls:

    LoadDataForIAF("CustomerAccountNumber", “value”);
    LoadDataForIAF("CustomerBusinessName", “value”);
    LoadDataForIAF("CustomerStatecode",“value”);
    LoadDataForIAF("Telephonenumber",“value”);
    LoadDataForIAF("PruSessionID",“value”);

Once these functions are called value of associated attributes will be passed to IQM engine which will then pass it along to Queue experts.
 
========================================================================
 
 
WEB CLIENT - PASSING CUSTOM ATTRIBUTES TO API.HTML
By:  Vivek Garg
Date:    04/16/2010
Rev.:    10/08/2010
 
Typically api.html page is displayed in an iFrame. Based on your needs you can pass custom attributes to api.html based on your requirements.

In this article we pass visitor location (custom attribute) to the api.html.

Steps:

1.    Append custom attribute (location)  to the api.html page URL
http://serverfqdn/itframework/webclient/api.html?userName=Sales&location=Durham 
2.    Update api.html page source to retrieve value of custom attribute (i.e. location).
Add the following lines in the HTML body tag:

//declare a JavaScript variable and assign it value of the custom attribute
var visitorlocation = getParameter('location',url);
//get rid of escape characters
visitorlocation = myunescape(visitorlocation);

Now the visitorlocation JavaScript variable can be used as per your business logic.
 
Comments