1 Introduction

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.

2 Views

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>

2.1 StartView.html

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.

2.1.1 Field StartViewName

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.

2.1.2 Field StartViewEmailAddress

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.

2.1.3 Message StartViewAddressError

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.

2.1.4 Field StartViewQuestion

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.

2.1.5 Button StartViewStartButton

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.

2.2 NoAgentsView.html

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.

2.3 ClosedView.html

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.

2.3.1 Button NoAgentsViewGoToEmailButton, 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.

2.4 EmailView.html

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.

2.4.1 Field EmailViewName

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.

2.4.2 Field EmailViewAddress

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.

2.4.3 Message EmailViewAddressError

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.

2.4.4 Field EmailViewQuestion

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.

2.4.5 Button EmailViewSendButton

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.

2.5 AfterEmailView.html

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.

2.6 ChatView.html

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:

2.6.1 List ChatViewMessageList

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.

2.6.1.1 Custom message template

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>

2.6.1.2 Custom message template values

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.

2.6.1.2.1 Custom client name

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>

2.6.2 Field ChatViewQuestion

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.

2.6.3 Button ChatViewSendButton

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.

2.6.4 Message ChatViewAgentName

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.

2.6.5 Button ChatViewPrintButton

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.

2.6.6 Button ChatViewSaveButton

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.

2.6.7 Button ChatViewCloseButton

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.

2.6.8 Message ChatQueue

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.

2.7 AfterCloseChatView.html

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.

3 Translation

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.

4 Putting it all together

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.

4.1 Standard chat header

<!-- {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} -->

4.2 Standard chat footer

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

5 Questions

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