Adding a 'Click For Live Help' button

Adding a 'Click for Live Help' button to your website enables the site visitors to initiate communication with an operator while browsing the site. Depending on the visitor's choice and the operator's availability, the visitor can use this button to contact an operator using a text chat, a voice call or an offline message.

Note: If by any reasons you cannot or do not want to add the 'Click for Live Help' button to your website, you still can invite a visitor to communication via Visitor's Badge from Site Monitor or from Visitors List. For more information refer to the 'Live Communication' chapter.

The integration of a 'Click for Live Help' button is carried out by inserting a piece of code into site pages. The best way to make the button accessible from any page of the site would be to include the button code in a template contained in each of the site pages. If for some reason the code cannot be included in such a way, you have to insert it into each of the pages of your site manually.

When inserting the code into a web page, make sure you place it within the body of the page:

Create the necessary code using the HTML Code Generator or manually by using the following template:

<TABLE cellpadding="0" cellspacing="0" border="0"><TR><TD align="center">
<IMG style="display: none; cursor: pointer"
  onclick="javascript:window.open('{CollectorRoot}/openChat.php?tsh=default',
  '_blank', 'status=yes,toolbar=no,menubar=no,location=no,width=500,height=400')"
  border="0" id="snsOperatorButton"><SCRIPT>
var sns_location=(window.location.protocol == "https:")?
  "{HTTPSCollectorRoot}" :
  "{CollectorRoot}";
var snsOperatorButton = document.getElementById('snsOperatorButton');
snsOperatorButton.src=sns_location+'/operatorButton.js.php?tsh=default';
snsOperatorButton.style.display = '';</SCRIPT><NOSCRIPT>
<A href="{CollectorRoot}/leaveMessage.php?noscript=true&tsh=default" target="_blank">
<IMG border="0" src="{CollectorRoot}/operatorButton.js.php?script=no&tsh=default"
  style="cursor: pointer" alt="Powered by Sales-n-Stats">
</A></NOSCRIPT></TD></TR>
<TR><TD height=15 align="center" bgcolor="#fce788">
<FONT size="1" face="Arial">
<A href="http://sales-n-stats.com"
style="text-decoration: none; color: #674435"
target="_blank"><B>Live help by SnS</B></A></FONT>
</TD></TR></TABLE>

•

{CollectorRoot} is the full URL of the Data Collector directory you entered in the process of Sales-n-Stats installation (such as http://example.com/my/collector/path). This URL must coincide with the cookie domain and cookie path in the Data Collector. If it is not the same, an error message "Sales-n-Stats is integrated incorrectly" will be shown when Open Chat window is displayed.

•	{HTTPSCollectorRoot} is the full URL of the Data Collector HTTPS directory (such as https://example.com/my/collector/path).

•	tsh=default means that the default template set should be used to show pushed content and chat invitations. If you want to use a different template set, replace 'default' with your template folder name.

Note: To ensure the correct operation of the site tracker specify the location of the button script by entering the absolute path to the Data Collector.

By default the button is displayed in GUI mode. If you need the button to be displayed as a link (in text mode), edit the inserted code, so it looks like this:

To bring it to conformity with the style of your website change the look of the button. To do so you need to edit the button templates. The button templates that need to be edited are located in the directory {CollectorRoot}/templates/default. As there are two forms in which the button can appear ('Click for Live Help' and 'Leave a Message'), do not forget to edit the templates for both of them.

The image files live_help.gif and leave_message.gif included in the templates operatorButton_LiveHelp.inc and operatorButton_LeaveMessage.inc respectively are located in the directory {CollectorRoot}/templates/default/images.

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.

Suppose you want to use a different picture (for example, a file live_h.jpg that you have on your computer) for the 'Click for Live Help' button instead of the picture in the image file live_help.gif.

1.	Upload the file live_h.jpg onto the server where your Sales-n-Stats Data Collector is installed saving it to the images directory of the template set you use for your site.

•	For example, create a folder {Collector Root}/templates/my_templates and a subfolder images within the folder my_templates.

•	Copy the template operatorButton_LiveHelp.inc from the directory {CollectorRoot}/templates/default to the directory {CollectorRoot}/templates/my_templates.

•	Save the file live_h.jpg to CollectorRoot}/templates/my_templates/images.

{*
"Click for live help" button template
Template parameters:
{SnsDir}
{TemplateDir}
{ImagesDir}
{Width}
{Height}
*}
document.write('<IMG onclick="javascript:window.top.open(\'{SnsDir}/openChat.php?'+
'{TemplateSetHint}\', \'_blank\', \'status=yes,toolbar=no,menubar=no,location=no,'+
'width=\' + {Width} + \',height=\' + {Height})" border="0" src="{ImagesDir}/'+
'live_help.gif" style="cursor: pointer; cursor: hand"');

3.	Edit the path to the image file (replace src="{ImagesDir}/live_help.gif" by src="{ImagesDir}/live_h.jpg"):

{*
"Click for live help" button template
Template parameters:
{SnsDir}
{TemplateDir}
{ImagesDir}
{Width}
{Height}
*}
document.write('<IMG onclick="javascript:window.top.open(\'{SnsDir}/openChat.php?'+
'{TemplateSetHint}\', \'_blank\', \'status=yes,toolbar=no,menubar=no,location=no,'+
'width=\' + {Width} + \',height=\' + {Height})" border="0" src="{ImagesDir}/live_h.'+
'jpg" style="cursor: pointer; cursor: hand"');

Note: In the code of the templates defining the look of Sales-n-Stats elements used in the process of visitor-to-operator communication, the parameter {ImagesDir} defines the location of the folder images for the current template set. Thus, the parameter {ImagesDir} for the templates located within the directory {CollectorRoot}/templates/default defines the location of the directory {CollectorRoot}/templates/default/images.

After you copy the template operatorButton_LiveHelp.inc from the directory {CollectorRoot}/templates/default to the directory {CollectorRoot}/templates/my_templates keeping the original template code, the parameter {ImagesDir} for the template operatorButton_LiveHelp.inc saved to the directory {CollectorRoot}/templates/my_templates will be interpreted as the location of the directory images within the folder {CollectorRoot}/templates/my_templates. That is why, while changing the button picture, you need to either put the image file live_h.jpg into the folder my_templates/images or modify the image path src="{ImagesDir}/live_help.gif" in the template so it will point to the actual location of the file live_h.jpg.

In our example we chose the first option, so the only modification that was needed for the template was changing the name of the image file from live_help.gif to live_h.jpg. Had we chosen to save the file live_h.jpg to the folder {CollectorRoot}/templates/my_templates, we would have to specify the path to the image file as src="{TemplateDir}/live_h.jpg". Saving the image to the directory where Sales-n-Stats Data Collector is installed would require the path to be specified as src="{SnsDir}/live_h.jpg". Please be aware that in any case the path to the image file can be specified as a full URL (for example, src="http://myhost.com/my/collector/path/live_h.jpg").

5.	Go to Main Menu -> Tools -> System settings -> Data Collector -> Web templates and assign the template set my_templates to your site. Check the look of the button on the site.