Web Chat Layout Properties

<Web Chat Routing Report How to navigate to this page> Typical display>

Manage the properties of an individual web chat layout entry.

Theme Tab

This allows you to customise the appearance of the web chat widget that appears on your web site without the need to understand JavaScript, HTML, and CSS. Web pages using this layout will be affected immediately when changes are made here. To use this layout in your web pages select the layout in the chat properties page and insert the following code into your web pages:

The following properties of the chat widget can be modified:

•	Theme background and text colour;

•	Sender background and text colour;

•	Recipient background and text colour;

•	The information message background and text colour;

•	The chat panel background and text colour;

•	The height and width of the chat window;

•	The position on the screen of the open chat button (top right, top left, bottom right or bottom left);

•	The title of the chat window;

•	The text on the Open Chat button;

•	The font size and family for the chat text.

A preview of an example chat widget is displayed to the right of the screen. This is updated giving a preview of the changes as they are applied.

It should be noted that any font may be entered in the font family field but it may not be rendered on the preview panel if that font is not installed on the Manager PC. Similarly, it may not appear on the actual web site itself for the same reason. The chosen font will only be displayed if it is supported by the Management PC (for the preview) and supported by the website for the chat box as displayed within the website.

Layout Tab

HTML editor window defining the layout template.

•	URL - this should be set to a unique name for your new chat routing point entry. This must not conflict with any other device names configured in your system;

•	Chat Window HTML - an editor window where the HTML can be changed.

Web Chat Layouts

A layout comprises of an HTML and CSS file to provide the chat dialog box that is made visible on the external web site. Different layouts may be selected for different look and feel of the chat box seen by the customer. These are used to integrate the rostrvm chat system into the customer website and require website programming skills (i.e. HTML and CSS).

The layout HTML must contain the following HTML elements:

rtmchat_open

The element that is used to initiate a chat and is shown when the customer first visits the website. In the provided templates this is in the form of a simple button labelled Open Chat that is fixed to the bottom right of the web page.

This could be customised to increase its visibility and encourage visitors to initiate chats. CSS can be used to position the element.

If the customer clicks this element the rtmchat_window element will be displayed and the rtmchat_open element is hidden.

rtmchat_window

This element is shown when a chat is being started and when the chat is in progress. In the provided templates this is a dialog style element which is fixed to the bottom right of the web page. CSS is used to respond to small devices (i.e. smart phones) and expand this dialog to cover the bottom of the screen.

This window should contain elements that have a class of rtmchat_active or rtmchat_create. Elements with the rtmchat_active class are shown once the chat has been established, and elements with the rtmchat_create class are shown when the chat is being created (i.e. when the customer is entering their details).

rtmchat_form

This is a form that should be enclosed within rtmchat_window and must contain the elements for initialising the chat (e.g. email address) and the message sending element (i.e. a text input field).

When submitting the form, the input fields will be sent to the server and the chat will be started. To start a chat, there must be a field with the name 'name' and a field with the name 'email'. Other named fields are converted to rostrvm CLIPboard elements which may be used in CallDirector or CallGuide scripts.

rtmchat_precannedmenu

This is a datalist element that will contain the pre-canned responses that are defined against the web chat point in the configuration. These are only available to rostrvm agents. This element should be linked to the rtmchat_message element.

rtmchat_message

Input control into which the customer may enter their chat text.

rtmchat_leave

Button/icon which will close the chat when clicked.

rtmchat_title

Title of the chat window. The name of the other party will be put into this element when the chat is established.

rtmchat_photo

Image element into which the agents photo (if any) is put for display to the customer.

rtmchat_main

This should be a div where the chat messages will be placed.

CSS Tab

CSS editor window defining the layout template.

•	CSS - an editor window where the CSS can be changed.

Operations

From here you can:

•	Save - click the Save button to apply the changes. If this is a new entry it will appear on the Web Chat Routing report;

•	Delete - click the Delete button to remove the entry;

•	Clone - click the Clone button to create a new layout template based on a copy of the template you are currently viewing.

Web pages using this layout will be affected immediately when changes are made. To use a layout in your web pages select the layout in the chat properties page and insert the following code into your web pages into your <HEAD></HEAD> section: