How to configure Chat on the Client Side

How to configure Chat on the Client Side

1.    Introduction
The purpose of this document is to give an overview on how to setup the chat on the client side, 
 
The chat session itself has to run on the application server. This can be integrated by several ways in the client’s website. 
 
a. A page on the application server can be pointed from the website. 
b. A frame inside the client’s website can be used to point to the application server. 
 
In a basic setup there are 2 pages for the chat: 
 
1. The Login page 
2. The Chat page 

2.    Login page 
2.1.  General  
The login page is used to ask the nickname that the customer wants to use during the time of the chat session. 

2.2.  Content 
The content of the login page is at minimal the following: 

<head> 
    <title>Login</title> 
</head> 
<body> 
<form id="login" method="get" enctype="application/x-www-form-urlencoded" accept-charset="utf-8"> 
    <p>Enter nickname: &nbsp;<input type="text" name="nickName" /></p> 
    <input type="hidden" name="action" value="begin" />     
<input type="submit" value="Begin conversation" /> </form> 
</body> 
</html> 

Where the ‘<input type="text" name="nickName" />’ will have the alias that the customer wants to use during the chat.
 
The button ‘<input type="submit" value="Begin conversation" />’ is used to submit the alias and start the conversation – the value of this button can be changed. 

3.     Chat page 
3.1.  General 
The chat page is used to manage the chat itself. 
 
3.2.  Content 
This is an example of how the chat page can look like: 


<head> 
    <title>Chat conversation</title> 
    <script type="text/javascript" src="chatLink.js"></script>     
<link rel="stylesheet" href="default.css" type="text/css" /> 
   
  <script type="text/javascript"> 
              var chatSession = new chatLink('/*[conversationid]*/','/*[sessionid]*/'); 
   
        function onLoad()         
{            
            chatSession.waitEvent.Add(OnWait);             
chatSession.activateEvent.Add(OnActivate);             
chatSession.historyLineEvent.Add(OnHistoryLine); 
        }          
        function onUnload () 
        { 
            chatSession.disconnect(); 
        }          
        function OnWait() 
        { 
            document.getElementById('chatWait').innerHTML = arguments[0];             
document.getElementById('chatWait').style.display = "inline"; 
   
        }          
        function OnActivate() 
        { 
            document.getElementById('chatWait').style.display = "none";             
document.getElementById('chatActive').style.display = "inline";         } 
 
        function OnHistoryLine(historyInfo)  
        { 
            var ownerDiv = document.getElementById('chatHistory'); 
             
            if(historyInfo.historyType == chatSession.chatEventType.Say) 
            { 
                var childP = document.createElement('P'); 
 
                if(historyInfo.fromMySelf) 
                    childP.innerHTML = '<I>' + historyInfo.from + ':<br />' + historyInfo.text + 
'</I>'; 
                else if(historyInfo.fromAgent) 
                    childP.innerHTML = '<B>' + historyInfo.from + ':<br />' + historyInfo.text + 
'</B>'; 
                else 
                    childP.innerHTML = historyInfo.from + ':<br />' + historyInfo.text; 
                     
                ownerDiv.appendChild(childP); 
            } 
            else if (historyInfo.historyType == chatSession.chatEventType.Leave) 
            { 
                var childP = document.createElement('P'); 
             
                childP.innerHTML = '<B><I>' + historyInfo.from + ': ' + historyInfo.text + '</I></B>';                 
ownerDiv.appendChild(childP); 
            }              
            ownerDiv.scrollTop = ownerDiv.scrollHeight; 
        } 
    </script> 
</head> 
<body onload="javascript:onLoad();" onunload="javascript:onUnload();"> 
 <h1> Chat conversation </h1> 
 <div id="chatWait" style="display:inline;"></div> 
 <div id="chatActive" style="display:none;"> 
  <div id="chatHistory" style="width: 100%; height: 200px; overflow:scroll;"></div> 
  <div id="chatSend" style="width:100%;height:40px; overflow:hidden;">   
<input id="chatText" type="text" /> 
   <input type="button" value="Send" 
onclick="chatSession.send(document.getElementById('chatText').value);" /> 
   <input type="button" value="Terminate" onclick="chatSession.disconnect();" /> 
 </div>
</div> 
</body> 
</html> 

3.3.  Create chatSession 

var chatSession = new chatLink('/*[conversationid]*/','/*[sessionid]*/'); 

This line will create an instance of the chatLink object. 

3.4.  onLoad function

function onLoad()
{            
    chatSession.waitEvent.Add(OnWait);     
chatSession.activateEvent.Add(OnActivate);     
chatSession.historyLineEvent.Add(OnHistoryLine); } 


This function will be called in the body onLoad event of the web page, and it will assign the different functions for the different events. 
 
These events are as follows: 
 
• waitEvent: this is executed when the contact is in the queue 
• activateEvent: this is executed when the contact goes online 
• historyLineEvent: each time when there is a chat line to display on the screen. 

See appendix for more information on these events. 

3.5.  OnWait function 

function OnWait() 
{     document.getElementById('chatWait').innerHTML = arguments[0];     
document.getElementById('chatWait').style.display = "inline"; 
   
} 

This function displays the waiting message for the customer. The function has 1 argument that contains the waiting text. 


3.6.  OnActivate function

function OnActivate() 
{     document.getElementById('chatWait').style.display = "none";     
document.getElementById('chatActive').style.display = "inline"; } 


This function is called when the customer can start talking to an agent. 


3.7.  OnHistoryLine function 

function OnHistoryLine(historyInfo)  
{ 
    var ownerDiv = document.getElementById('chatHistory'); 
     
    if(historyInfo.historyType == chatSession.chatEventType.Say) 
    { 
        var childP = document.createElement('P'); 
 
        if(historyInfo.fromMySelf) 
            childP.innerHTML = '<I>' + historyInfo.from + ':<br />' + historyInfo.text + '</I>';         
else if(historyInfo.fromAgent) 
            childP.innerHTML = '<B>' + historyInfo.from + ':<br />' + historyInfo.text + '</B>';         
else 
            childP.innerHTML = historyInfo.from + ':<br />' + historyInfo.text; 
                     
        ownerDiv.appendChild(childP); 
    } 
    else if (historyInfo.historyType == chatSession.chatEventType.Leave) 
    { 
        var childP = document.createElement('P'); 
     
        childP.innerHTML = '<B><I>' + historyInfo.from + ': ' + historyInfo.text + '</I></B>';         
ownerDiv.appendChild(childP); 
    }      
    ownerDiv.scrollTop = ownerDiv.scrollHeight; 
}

This function is called every time when there is a message to display. This is for both the agent’s and the customer’s messages.  
 
It has 1 argument called ‘historyInfo’ which is an object that contains information about the message: 



historyInfo.historyType can be compared to a enumerator (enum) of the type chatSession.chatEventType, hereby a list of possibilities: 



In this default version the messages are displayed in a ‘div’-element with a different layout for messages coming from the agent, then messages coming from the customer. 

3.8.  onUnload function 

function onUnload() 
{ 
    chatSession.disconnect(); 
} 

The unload function is called when closing the webpage and will send a disconnect message to the server. If this is used, it is required to keep in mind that when the page is refreshed, this function is called and the chat session is disconnected. 

3.9.  Send 

<div id="chatSend" style="width:100%;height:40px; overflow:hidden;"> 
 <input id="chatText" type="text" /> 
 <input type="button" value="Send" 
onclick="chatSession.send(document.getElementById('chatText').value);"/> 
 <input type="button" value="Terminate" onclick="chatSession.disconnect();" /> </div> 

This is the part that sends the message to the agent. 
 
‘<input id="chatText" type="text" />’ is a textbox where the customer can write the message. 
 
‘<input type="button" value="Send" onclick="chatSession.send(document.getElementById('chatText').value);"/>’ is the button that will send the message. 
 
The function for sending the message looks like this: 
 
• chatSession.send(message) 

‘<input type="button" value="Terminate" onclick="chatSession.disconnect();" />’ is the button that disconnects the agent from the chat session.  
 
The function for disconnecting the chat is: 
 
• chatSession.disconnect() 

4.     Appendix
4.1.  waitEvent 
Occurs when the contact is waiting in the queue. 
 
The waitEvent sends a text to display. 
 
Example: 

//To assign a callback function chatSession.waitEvent.Add(OnWait); 
 
function OnWait() 
{ 
    alert(arguments[0]); 
} 

4.2.  activateEvent
Occurs when the contact goes online. 
 
Example: 

//To assign a callback function chatSession.activateEvent.Add(OnActivate); 
 
function OnActivate() 
{ 
    alert(‘online’); 
} 

4.3.  historyLineEvent
Occurs when there is a message to display on the screen. 
 
The historyLineEvent sends message info. 
 
Example: 

//To assign a callback function 
chatSession.historyLineEvent.Add(OnHistoryLine); 
 
function OnHistoryLine(historyInfo)  
{ 
    alert(historyInfo.text);
} 





    • Related Articles

    • How to configure Chat in Nixxis

      1.    Introduction The purpose of this article is to give an overview on how to setup the chat using Nixxis Contact Suite.     See article How to Configure Chat on Client Side to setup the chat WebPages.    There are 2 main actions to take to create ...

    • Configuration of a Chat activity NCS v3.0 (EN)

      Introduction The objective of this article is to provide a detailed guide on the steps to follow to configure a chat activity. Below are the steps to follow for deploying a model (which can, of course, be adapted based on your operational needs). 1. ...

    • Configuration d'une activité Chat NCS v3.0 (FR)

      Introduction L'objectif de cet article est de fournir un guide détaillé des étapes à suivre pour configurer une activité de chat. Ci-après les étapes à suivre permettant de déployer un modèle (celui-ci pourra évidemment être adapté en fonction de vos ...

    • Configuration d'une activité Chat (FR) NCS v2.x

      Introduction Cet article vise à fournir les détails pour la configuration de l'activité de chat. Ci-après les étapes à suivre permettant de déployer un modèle (celui-ci pourra évidemment être adapté en fonction de vos besoins opérationnels). Fichiers ...

    • Customiser la page d'attente de contact et pause - Module Agent

      Introduction Cet article vise à décrire comment ajouter une page web à l'écran de pause et d'attente dans le module agent Ecran pause Ouvrez le fichier Http.config Ajoutez la clé suivante pour personnaliser l'écran de pause dans l'application Agent : ...