Customizing Live Communication dialogs

The look and feel of Sales-n-Stats Live Communication dialogs can be easily adapted to match the style of the website monitored by means of Sales-n-Stats. The template-based structure of these dialogs makes them customizable to the extent where they may be made to look exactly like the rest of the site pages so your visitors will not even know there is some external software involved.

For editing the templates of the Live Communication dialogs, basic knowledge of HTML and CSS is required.

When you change the look and feel of any Sales-n-Stats elements that appear on a website, do NOT remove or modify the default template set ({CollectorRoot}/templates/default). It is strongly recommended you keep it intact, to use it if the customization messes up.

A good way to go about customization is to create a new folder inside the directory {CollectorRoot}/templates/ (for example, my_templates) and copy the templates from the default directory to that folder. Then you will be able to assign the new template set (my_templates) to your website via Main Menu -> Tools -> System settings -> Data Collector -> Web templates.

In fact, it is not necessary to copy the whole default template set to the new template set folder: it is enough to save to that folder only the copies of the templates you are going to modify. Sales-n-Stats will be able to get the rest of the templates from the default template set folder.

All Sales-n-Stats dialogs and popup windows used for live communication on the side of a website are supposed to contain the logo of your company. Included into the default template set is the image file logo.gif.

By default this image is displayed in the header of each communication dialog and popup in the place reserved for your company logo. Before going live with your Sales-n-Stats communication tools, you need to replace this image by a logo of your own.

For example, if a visitor clicks on the 'Click for Live Help' button a standard dialog is displayed. Let us replace the default logo image logo.gif by the file xlogo.gif.

Choose the template set in which you will use the new logo (for example, my_templates). Save the file xlogo.gif to the images folder within the directory of that template set.

1.	The look of the top of the dialog where the COMPANYNAME logo is inserted is defined by the template header.inc. Locate the file header.inc in the default template set folder and copy it to the folder of the template set you are going to use for your website.

2.	Open the file header.inc you have just put into the site template set folder in a text editor. Find the following fragment:

<TABLE WIDTH="100%" BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR style="background: #39588C url({ImagesDir}/head_back.gif)" valign=top>
<TD><IMG SRC="{ImagesDir}/logo.gif" ALT=""></TD>
<TD align=right><IMG SRC="{ImagesDir}/contact_h.jpg" WIDTH=185 ALT=""></TD>
</TR>
</TABLE>

<TABLE WIDTH="100%" BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR style="background: #39588C url({ImagesDir}/head_back.gif)" valign=top>
<TD><IMG SRC="{ImagesDir}/xlogo.gif" ALT=""></TD>
<TD align=right><IMG SRC="{ImagesDir}/contact_h.jpg" WIDTH=185 ALT=""></TD>
</TR>
</TABLE>

Now when you select the modified template set for your site via the 'Web templates' section of the System settings, the 'Live Communication' dialog headers change their look.

Note: The template header.inc includes two more files: head_back.gif (the background image) and contact_h.jpg (the image in the right part of the header). Replace these files in the same way we replaced logo.gif by our own image.

To edit a text piece contained in a 'Live Communication' dialog or popup window, you need to find out what template is responsible for displaying this text.

In the majority of cases the text piece is part of the template itself. Editing the text which is part of a template is probably the easiest: all you need to do is open the template in a text editor, change the text and save the changes.

For example, we can change the instructions for entering the nickname in the dialog from which visitors start a chat with Sales-n-Stats operator:

'Start communication': Open chat with operator dialog. The text around the input box can be edited directly via the template openChat.inc.

1.	Copy the template openChat.inc to the directory of the template set you use for your site.

2.	Open the file openChat.inc from that directory and find the following fragment:

<TABLE>
    <TR align="center"><TD class="sns">Please enter your name:</TD></TR>
        <TR align="center"><TD class="sns"><INPUT type="text" ID="nick" size="25
" onkeypress="nickName_keyPressed(event)"></TD></TR>
        <TR align="center"><TD class="sns">It is optional. You can stay incognito</TD></TR>
</TABLE>

<TABLE>
    <TR align="center"><TD class="sns">Pick a screenname:</TD></TR>
        <TR align="center"><TD class="sns"><INPUT type="text" ID="nick" size="25
" onkeypress="nickName_keyPressed(event)"></TD></TR>
        <TR align="center"><TD class="sns">(optional)</TD></TR>
</TABLE>

Note: Certain text elements cannot be changed by editing the text in a template, as they are received by the template in the form of a parameter value passed from the PHP code (For example, in Sales-n-Stats Live edition the dialog titles Leave a message or Open chat with operator are received in the form of the parameter {Title}). If this is the case with the element you would like to edit, the only way to change the text displayed in your 'Live Communication' dialogs is to modify the PHP code responsible for the element.

To modify the look of your Sales-n-Stats Live Communication dialogs and popup windows more thoroughly than just changing the logo, a deeper understanding of the dialog and window structure is needed. Let us take a closer look at the default template set shipped with Sales-n-Stats.

Some of the templates are used in more than one dialog/popup and thus should be mentioned separately:

•	startDialog.inc, endDialog.inc - start and end templates of the window dialogs; provide a setting for the header and footer of a dialog; must be used together.

•	htmlLayerPopup.inc - javascript code that is responsible for displaying a popup window to a visitor; includes a header and a footer.

•

header.inc, footer.inc - top and bottom of the communication dialogs and popup windows; must be used together. Please note that the template header.inc includes some images (logo.gif, contact_h.jpg and head_back.gif) and the dialog title. The template footer.inc includes the Powered by Sales-n-Stats link.

•	subheader.inc subheader for the standard header.inc template.

•	button.inc standard button template (for example, the Text chat, Start chat, Save file, Open buttons, etc).

•	smallButton.inc template for the buttons smaller than 70 px in width (for example, the Send button in the chat window).

For your convenience we provide a list of 'Live Communication' dialogs and 'Push Content' popup windows with the templates used to display each dialog/window in the 'Appendices' -> 'Live Communication dialog templates' section.

The style and layout of Sales-n-Stats 'Live Communication' dialogs and popup windows can be controlled using CSS (Cascading Style Sheets). The styles defining how to display the elements of these dialogs and windows are stored in the external style sheet style.css. Modify this file to change colors, fonts, spacing and other properties.

Note: By default style.css is located in the directory {CollectorRoot}/templates/default defining the look of elements assembled from the default template set. As it is not recommended to modify the files of the default template set, make a copy of the default template set (including style.css) and save it to a separate folder within the directory {CollectroRoot}/templates (for example, {CollectorRoot}/templates/my_templates). Then you will be able to edit the file style.css for your sites template set.

The file style.css consists merely of style rules in the format of selector {property: value}

The selector is the HTML element/tag being defined, the property is the attribute which can be changed, and the value is the value this property can take. The property and value are separated by a colon and surrounded by curly braces. If more than one property is specified, each property is separated with a semi-colon. The example below shows how the look of a link is defined:

When more than one selector use the same style definition, the selectors may be grouped:

{
        FONT-SIZE: 13px;
        COLOR: #000000;
        FONT-FAMILY: Verdana, Arial, Helvetica, Sans-serif;
}

If the tag name in the selector is omitted, it means the style is used by all HTML elements that have this class. In the example below, all HTML elements with class="sns_WindowBack" have a white background color:

Generally speaking, find out the style of any HTML element by the class attributed to it. For example, to know what style rules regulate the appearance of the dialog title, find the template that defines the look of the dialog header and find in this template the lines defining the look of the title. There will be an indication of the class attributed to the dialog title element.

The name of the header template is header.inc. Open it and find the following lines:

{Subheader}
<TR valign="middle"><TD>
<DIV ID="dialogTitle" class="sns_Header" align="center" style="padding: 20px">{Title}</DIV>
</TD></TR>

The fragment class=sns_Header means that the title follows the rules in the ".sns_Header" selector. Now open the file style.css and find the appropriate style definition:

.sns_Header {
        font-size: 13pt;
        font-weight: bold;
        font-family: Verdana;
        color: black;
}

Knowing the properties of the dialog title element, you can modify the look of text appearing in the title. Before any modifications are made to the file style.css, the dialog 'Start communication': Open chat with operator looks like this:

.sns_Header {
        font-size: 20pt;
        font-weight: bold;
        font-family: Verdana;
        color: red;
}

'Start communication': Open chat with operator dialog: font size - 20pt; text color - red.