Standard Chat Design Manual

The Cention standard chat is a chat client for the Chat module in Cention Contact Center. The Cention standard chat is hosted by Cention on Cention’s servers and you will be provided with a link to your installation of the standard chat that you can put on your web site to enable your customers to engage in live chats with you.

This document describes how to customise the look and feel of the standard chat.

The Cention standard chat has seven different views. These views have been provided to you with this documentation as seven HTML template files. By opening these files in a web browser you are able to see how these views will look (sans CSS). Unfortunately chatting and clicking any buttons will not work in the files that has been provided to you. For these things to work the files needs to be installed in the Cention standard chat on Cention’s servers.

The templates are:

Note on required and optional fields

Each view has required and optional fields. The required fields must be included in your views as instructed by this documentation otherwise the Cention standard chat will not work after your customizations have been installed.

Unless otherwise stated required and optional fields have names that must be present within the id attribute of the HTML tags. The HTML tags must be either <input> or <textarea> and if the tag is <input> the attribute type must be equal to text.

The following are examples of required and optional HTML tags.

<input id="EmailViewName" type="text" />
<textarea id="EmailViewQuestion"></textarea>

The start view is the view that will be displayed to the customer if there are agents available for chat within Cention Contact Center. This view is the view the customer will see when he/he will be allowed to start a chat with one of the available agents.

This view has four required fields and one optional field. The required fields are StartViewName, StartViewEmailAddress, StartViewAddressError and StartViewStartButton and the optional field is StartViewQuestion.

In this field the customer should enter his/her name. This field is required and must be either <input> or <textarea>. The HTML tag must have the id attribute and the attribute must be equal to StartViewName.

In this field the customer should enter his/her email address. It is used by Cention Contact Centre to link the chat session to other communication from the customer. This field is required and must be either <input> or <textarea>. The HTML tag must have the id attribute and the attribute must be equal to StartViewEmailAddress.

This HTML tag is hidden by default and only displayed if the customer enters an invalid email address. This HTML tag is required. It can be of any type but it must have the id attribute and the attribute must be equal to StartViewAddressError.

This field allows the customer to enter his/her question before the chat session is started so that the agent which is assigned to the chat will know the customer’s question without having to ask first. Having this field present also allows the system to automatically search for an answer to the customer’s question that will be available to the agent as soon as the agent sees the chat. This field is optional. If it is present it must be either <input> or <textarea>. The HTML tag must have the id attribute and the attribute must be equal to StartViewQuestion.

This is the button that the customer should click to start a live chat session with one of your agents. This HTML tag is required. It can be of any type but it must have the id attribute and the attribute must be equal to StartViewStartButton.

The no agents view is displayed if there are no agents available for chat within Cention Contact Centre. You can use this view to show a button that will navigate the customer to the EmailView.html which allow the customer to send an email instead.

This view has one optional button. The optional button is NoAgentsViewGoToEmailButton.

The closed view is displayed if the client is opened outside of the configured opening hours. You can use this view to show a button that will navigate the customer to the EmailView.html which allow the customer to send an email instead.

This view has one optional button. The optional button is ClosedViewGoToEmailButton.

These buttons will navigate the customer to the EmailView.html which will allow the customer to send an email to you. Both are optional.

This view allows the customer to send an email to you. The customer can have this choice if you so require if there are no agents available for chat. The email view has five required fields/buttons. Those are EmailViewName, EmailViewAddress, EmailViewAddressError, EmailViewQuestion and EmailViewSendButton.

In this field the customer should enter his/her name. This field is required and must be either <input> or <textarea>. The HTML tag must have the id attribute and the attribute must be equal to EmailViewName.

In this field the customer should enter his/her email address. This field is required and must be either <input> or <textarea>. The HTML tag must have the id attribute and the attribute must be equal to EmailViewAddress.

This HTML tag is hidden by default and only displayed if the customer enters an invalid email address. This HTML tag is required. It can be of any type but it must have the id attribute and the attribute must be equal to EmailViewAddressError.

In this field the customer should enter his/her question. This field is required. It must be either <input> or <textarea>. The HTML tag must have the id attribute and the attribute must be equal to EmailViewQuestion.

This is the button that the customer should click to send a new email to you with the information he/she has entered. This HTML tag is required. It can by of any type but it must have the id attribute and the attribute must be equal to EmailViewSendButton.

This view is displayed after the customer has clicked the send button in the in the EmailView.html. It can tell the customer to close the window. This view has no required or optional fields.

The chat view is the main view for the chat. It is in this view that chat between the agent and the customer takes place.

These are the fields/buttons in this view:

This HTML tag will contain the list of messages that are sent between the agent and the customer. The tag can be of any type except <input>, <textarea>, <select> or any other type of form element.

When a new message is appended to the list it will be appended using the HTML displayed below.

<div class="message [CLASS]">
      <span class="info">
            <span class="time">([TIME])</span>
            <span class="name">[NAME]</span>:
      </span>
      <span class="body">[MESSAGE]</span>[TICKS]
</div>

There are five templates values in the HTML. The templates values are [CLASS], [TIME], [NAME], [MESSAGE] and [TICKS]. The template value [CLASS] will be replaced with either client-reply or agent-reply, depending on who sent the message. The template value [TIME] will be replaced by the time the message was sent. The template value [NAME] will be replaced by the name of the person who sent the message. It could be either the customer’s name, agent’s name, or “System”. The template value [MESSAGE] will be replaced by the message the customer or the agent sent. For the message that the customer send the template value [TICKS] will be replaced with a two-ticks indicator for indicating the status of the message (✓✓). The first tick indicates whether the message is received by the server, and the second tick indicates whether the message has been sent to the agent. The tick changes its color from light gray (css color name: lightgray) to green (css color name: green) to indicate a positive response.

It is possible to specify your own HTML for messages if the default HTML does not suit your needs. To do this you need to assign your HTML to a global JavaScript variable called CustomMessageTemplate inside the chat view. An example of how to do this you can see below.

<script type="text/javascript">
      CustomMessageTemplate = '<div class="message {3}">' +
            '<span class="info">' +
                  '<span class="name">{1}</span> ' +
                  '<span class="time">{0}</span>' +
            '</span>' +
            '<span class="body">{2}</span>{4}' +
      '</div>';
</script>

When the client uses your custom message template it puts the values in the right place depending on where you put the template values. There are five template values that the custom message template can contain.

• {0} is replaced by the time the message was sent.
• {1} is replaced by the name of whom sent the message.
• {2} is replaced by the body of the message.
• {3} is replaced by either client-reply or agent-reply depending on who sent the message.
• {4} is replaced by the two-ticks client message status indicator.

When the client sends a message the default message header will read (11:34) Carl Swordstone. In this case the client would have entered Carl Swordstone as his/her name before starting the chat.

If instead you would like something other then the name entered by the client displayed in the message header you can specify a custom client name. To do this you assign a global JavaScript variable called CustomClientName inside the chat view with what you would like to display instead of the name entered. An example of how to do this you can see below.

<script type="text/javascript">
      CustomClientName = 'You';
</script>

In this field the customer should enter his/her question. This field is required. It must be either <input> or <textarea>. The HTML tag must have the id attribute and the attribute must be equal to ChatViewQuestion.

This is the button the customer should click to the send a new message to the agent. This button is required. It can be of any type but it must have the id attribute and the attribute must be equal to ChatViewSendButton.

This HTML tag will contain the name of the agent the customer has been connected to. This HTML tag is optional. It can be of any type but it must have the id attribute and the attribute must be equal to ChatViewAgentName.

This button allows the customer to print the ongoing or finished chat session at any time during the chat session. This button is optional. It can be of any type but it must have the id attribute and the attribute must be equal to ChatViewPrintButton.

This button allows the customer to save the ongoing or finished chat session at any time during the chat session. This button is optional. It can be of any type but it must have the id attribute and the attribute must be equal to ChatViewSaveButton.

This button allows the customer to close the current ongoing chat. It can be of any type but it must have the id attribute and the attribute must be equal to ChatViewCloseButton.

If the chat queue feature is used, this HTML tag will contain the client chat queue number. This HTML tag is optional. It can be of any type but it must have the id attribute and the attribute must be equal to ChatQueue.

This view is displayed after the client closes the chat. For example the view be used to tell the customer to close the window.

This view has no required or optional fields.

In addition to the text in the view files, there are also text that are generated server-side during the chat. You can provide your own translation to these text by providing the file templates/translation.js.

Once you have finished your customizations and sent those to the developers at Cention then the Cention developers will install this in your standard chat that has been provided with your installation of Cention Contact Center.

The view files will be converted into template files that the Cention standard chat understands and can use. Simply put the header and footer in the view files - everything between HEADER_BEGIN, HEADER_END and FOOTER_BEGIN, FOOTER_END - will be taken out and placed in their own files. When customizing the view files it can be a good idea to think about this to make this process easier.

In the default standard chat view files provided to you the header and footer would be what you can see below.

<!-- {HEADER_BEGIN} -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Cention Standard Chat</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="javascript/jquery.min.js"></script>
		<script type="text/javascript" src="javascript/jquery.spellchecker.js"></script>
		<script type="text/javascript" src="javascript/prototype.js"></script>
		<script type="text/javascript" src="javascript/ckeditor/ckeditor.js"></script>

		<script type="text/javascript" src="javascript/socket.io.js"></script>
		<script type="text/javascript" src="javascript/sockwrap.js"></script>
		<script type="text/javascript" src="javascript/CentionChatAPI-{CHAT_API_VERSION}.js"></script>
		<script type="text/javascript" src="javascript/chat.js"></script>
       <body>
       <!-- {HEADER_END} -->

       <!-- {FOOTER_BEGIN} -->
       </body>
</html>
<!-- {FOOTER_END} -->

If you have any questions regarding the customizations process feel free to ask your excellent support team at which you can reach by emailing support@cention.com.