Live Help Knowledge Base

Live Chat Zendesk Integration

stardevelop.com — Thu, 15 Sep 2011 14:20:23 +0000

To setup Live Chat to function with Zendesk you will need to create an extension within the Zendesk administration. You can setup the extensions within the Zendesk Administration > Settings > Extensions. You should then click Add Widget > Global JavaScript. The paste the following code. The Global JavaScript widget will insert the Live Help JavaScript and Live Help visitor tracking code on all your web pages.

var LiveHelpSettings = {};
LiveHelpSettings.server = 'www.example.com';
LiveHelpSettings.chatTab = true;
LiveHelpSettings.zendesk = true;

if (currentUser != 'undefined' && currentUser.isEndUser == true && currentUser.id != null && currentUser.name != 'Anonymous user') {
	LiveHelpSettings.name = currentUser.name;
	LiveHelpSettings.email = currentUser.email;
}

jQuery(document).ready(function() {

// JavaScript
	var LiveHelp = document.createElement('script'); LiveHelp.type = 'text/javascript'; LiveHelp.async = true;
	LiveHelp.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + LiveHelpSettings.server + '/livehelp/scripts/jquery.livehelp.noconflict.js';
	var s = document.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(LiveHelp, s);
	
	var Zendesk = document.createElement('script'); LiveHelp.type = 'text/javascript'; Zendesk.async = true;
	Zendesk.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + LiveHelpSettings.server + '/livehelp/plugins/zendesk/jquery.livehelp.zendesk.js';
	s.parentNode.insertBefore(Zendesk, s);

});

One you have pasted the above code into the Zendesk Global JavaScript widget you will need to edit the following line near the bottom of the JavaScript code. You should change the bold text to the domain where you have installed the Live Help software. Only add the domain to this text as the /livehelp/ folder will be added automatically.


LiveHelpSettings.url = 'www.example.com';

You can also create a Custom widget with the following code if you wish to display the Live Help chat button on certain pages. You also need to edit the bold text within the code below to point to your Zendesk installation.







http://www.example.com/livehelp/include/status.php" id="LiveHelpStatus" name="LiveHelpStatus" class="LiveHelpStatus" border="0" alt="Live Help" />

Adding Custom Smarty Templates

stardevelop.com — Mon, 11 Apr 2011 04:55:23 +0000

From within the Live Help Server Software v3.90 and above you are able to create custom templates. The templates are based on the PHP Smarty templating system and allow you to customise the guest chat window to suit your own web site design and layout.

Make a copy of either the /livehelp/templates/default/ or /livehelp/templates/whmcs-portal/ folder.
Rename the copied duplicate folder to the name of your template e.g. /livehelp/templates/custom/
Edit the .tpl files to change the HTML code, don’t change any tags or {} Smarty tags.
Configure your new template to load as the default template in the Live Help Windows app > Settings tab > Appearance > Template

You can also customise the following folders and images if you wish to make advanced customisations to the images and CSS.

/livehelp/images/ – Contains images that shouldn’t need translating
/livehelp/locale/en/images/ – Contains images that need translating for each language pack.
/livehelp/styles/ – Contains CSS styles, some of these are generated from PHP and use the settings that are configured within the Live Help Windows app > Settings tab > Appearance section.

VoIP / Skype Call Back HTML Code

stardevelop.com — Wed, 23 Mar 2011 04:46:44 +0000

In order for your potential customers to find your online status, you will need to add the HTML code to your web site’s pages. There are three simple steps to ensure Live Help will run correctly on your web pages. If you use Joomla or WordPress then you can install the Joomla module or WordPress plugin to automatically add the HTML code

Step 1.

In order for your customers to request a VoIP / Skype telephone callback, you will need to add the Live Help Callback HTML code to your web site’s pages. There are three simple steps to ensure Live Help will run correctly on your web pages.

Please note: These first steps are the same steps that are required for the regular Live Help button. Only step three is required if you have already placed step one and two on your web site.

Step 2.

The following lines need to be added where you wish to display the VoIP / Skype Call Back button (you may display many Live Help status buttons on a single page):

Example (Status Button Code – Step 2):

WHMCS VoIP Call Back HTML Code

stardevelop.com — Wed, 23 Mar 2011 04:07:28 +0000

If you have setup Live Help Messenger as a WHMCS module then you need to install special HTML code on your web pages to support the WHMCS integration.

In order for your customers to request a VoIP / Skype telephone callback, you will need to add the Live Help Callback HTML code to your web site’s pages. There are two steps to ensure Live Help will run correctly on your web pages.

Please note: These first step is the same HTML code that is required for the regular Live Help button – this code is used for tracking your web site visitors. Only step two is required if you wish to use the Live Help VoIP call back feature.

You will need to edit the bold text within the HTML code so that the HTML code points to your WHMCS installation folder. An absolute path is required for the HTML code to work as expected.

Step 1.

The following lines should be added on each page after your tag and just before your </head> tag (this should be added once per page):</p> <div><code><br /> <br /> <br /> <script type="text/JavaScript" src="/livehelp/scripts/jquery-latest.js"></script><br /> <script type="text/javascript"><br /> <br /> </script><br /> <br /> </code></div> <p><strong>Note: </strong>You don’t need to include the <script> tag to /whmcs/includes/jscript/jquery.js if your web site already includes the jQuery JavaScript library.</p> <h2>Step 2.</h2> <p>The following lines need to be added where you wish to display the Live Help status indicator button (you may display many Live Help status buttons on a single page):</p> <div><code><br /> <a href="#" class="LiveHelpCallButton">/whmcs/modules</strong>/livehelp/include/status.php?CALLBACK" id="LiveHelpStatus" name="LiveHelpStatus" class="LiveHelpStatus" border="0" alt="Live Help" /></a><br /> </code></div> <p>Please note: The above second step is optional and should only be added to web pages that you wish to display the Live Help VoIP call back button.</p> </article> <article> <h1>MaxMind IP City Location Support</h1> <p>stardevelop.com — Tue, 01 Feb 2011 01:45:14 +0000</p> <p>The Live Help v3.90 and above supports IP City level location detection. We support the MaxMind GeoLite City (free) and MaxMind GeoIP City (paid with higher accuracy) databases. These databases are not included with the Live Help downloads (due to the size of the database) so you will need to download the latest database from the MaxMind web site. The following instructions are for installing the database.</p> <ul> <li>Download the MaxMind GeoLite City database at <a href="http://geolite.maxmind.com/download/geoip/database/GeoLiteCity.dat.gz">GeoLite City (Approx. 18MB)</a></li> <li>Unzip the file on your local PC, you can use a free tool like 7zip for unzipping the GeoLiteCity.dat.gz file.</li> <li>Upload the GeoLiteCity.dat file to the /livehelp/plugins/maxmind/ directory. The file is approximately 30MB so this may take some time.</li> <li>The GeoLite database should be located at /livehelp/plugins/maxmind/GeoLiteCity.dat when finished uploading</li> </ul> <p>The MaxMind GeoLite database is updated each month (normally on the 1st of each month) so you can replace this file every month if you wish to use the most accurate location data. Further details on the MaxMind GeoLite City database is available at <a href="http://www.maxmind.com/app/geolitecity?rId=stardevelop">http://www.maxmind.com/app/geolitecity</a></p> </article> <article> <h1>Blank Live Help Chat Window Issue</h1> <p>stardevelop.com — Mon, 17 Jan 2011 02:16:20 +0000</p> <p>If you have installed Live Help and the Live Help popup window is showing a blank chat window then we recommend the following troubleshooting steps.</p> <ul> <li>Check that the /livehelp/templates_c/ directory exists. If this directory doesn’t exist then please create it.</li> <li>If the chat window is still blank then make the /livehelp/templates_c/ directory writable. We recommend that you try the following permissions in this order 755, 775 and 777. </li> </ul> <p>The /livehelp/templates_c/ directory should be writable so that the Live Help templates can be created. This issue will only affect Live Help installations v3.90 and above.</p> <p><strong>Please note:</strong> If you are using Security-Enhanced Linux (SELinux) then you may also need to setup <em>allow_httpd_anon_write</em> to 1. You can do this by running the command <em>setsebool -P allow_httpd_anon_write 1</em></p> </article> <article> <h1>Invalid UTF-8 Character Encoding</h1> <p>stardevelop.com — Mon, 30 Aug 2010 05:09:44 +0000</p> <p>If you are translating the Live Help language pack files to your own language then you may experience the following issue with invalid UTF-8 characters appearing within the Live Help chat window. This error will occur if you have not correctly saved the language pack files as UTF-8.</p> <p>A screenshot is shown below of the issue occurring with a Spanish language pack, an incorrectly saved language pack file will show invalid characters such as � within the chat window. <strong>Note: </strong>We only include an English language pack with Live Help, this is just an example for the purposes of this KB article.</p> <div id="attachment_376" class="wp-caption aligncenter" style="width: 617px"><a href="http://livehelp.stardevelop.com/kb/wp-content/uploads/2010/08/Chat-Window-Language-Issue.png" rel="lightbox[375]"></a><p class="wp-caption-text">Live Chat Window - UTF-8 Language Character Issue</p></div> <p>In order to resolve the issue you will need to open the /livehelp/locale/en/guest.php file or the guest.php file in the correct language pack folder using Notepad. It is best to use Microsoft Notepad as it has the correct options for saving the language pack file as UTF-8 encoding.</p> <p>Once you have the language pack open in Notepad, you should have the language pack file open as shown below. You then need to save the file as UTF-8 Encoding as shown within the second screenshot below.</p> <a href='http://livehelp.stardevelop.com/kb/375/language-issue-notepad/' title='Guest Language Pack File Open within Microsoft Notepad'></a> <a href='http://livehelp.stardevelop.com/kb/375/language-issue-notepad-saving/' title='Saving Language Pack as UTF-8 Encoding'></a> </article> <article> <h1>Managing Departments</h1> <p>stardevelop.com — Thu, 26 Aug 2010 07:18:52 +0000</p> <p>In order to manage departments you must associate a department to an operator when creating the account. When creating or editing accounts you can enter a department within the appropriate department field.</p> <div id="attachment_367" class="wp-caption aligncenter" style="width: 645px"><a href="http://livehelp.stardevelop.com/kb/wp-content/uploads/2010/08/GuestAccount.png" rel="lightbox[360]"></a><p class="wp-caption-text">Guest Account - Easily Enter Assign a Department to the Account</p></div> <h2 style="margin-top: 25px;">Assign Multiple Departments</h2> <p>In certain circumstances it is necessary for an operator to be assigned to multiple departments eg. Technical Support and Sales departments. When assigning a user to multiple departments enter the values within the departments field separated by semi-colons eg. Support; Sales; Management. The example above shows the Guest account that is assigned to Support, Sales and Management departments.</p> <div id="attachment_368" class="wp-caption aligncenter" style="width: 554px"><a href="http://livehelp.stardevelop.com/kb/wp-content/uploads/2010/08/OnlineDepartments.png" rel="lightbox[360]"></a><p class="wp-caption-text">Chat Window - Visitors can easily select an Online Department</p></div> <p>Your site visitors will be prompted to select a department when request a Live Help chat from your web site. Departments are only displayed to your site visitors if an operator is available within the department (shown above).</p> </article> <article> <h1>Adding Operator Accounts</h1> <p>stardevelop.com — Thu, 26 Aug 2010 07:03:27 +0000</p> <p>Within the Live Help Messenger Windows application you can manage the operator accounts within the Accounts tab (as shown in the screenshot below). You can easily see what operators are logged into Live Help and update any account details as required. For each operator you are able to setup the account username, first name, last name, email address, department, access level, account status and operator icon.</p> <div id="attachment_350" class="wp-caption aligncenter" style="width: 610px"><a href="http://livehelp.stardevelop.com/kb/wp-content/uploads/2010/08/AddingAccounts.png" rel="lightbox[348]"></a><p class="wp-caption-text">Easily Manage Operator Accounts within Live Help</p></div> <h2 style="margin-top:20px">Account Options (Add / Delete and Change Password)</h2> <p>You are also able to easily Add Accounts, Delete Accounts, Change Status Mode and Change Password for an account. You can access these additional options for the Options button in the bottom right corner of the Accounts section (shown below).’</p> <div id="attachment_353" class="wp-caption aligncenter" style="width: 424px"><a href="http://livehelp.stardevelop.com/kb/wp-content/uploads/2010/08/AccountsMenu.png" rel="lightbox[348]"></a><p class="wp-caption-text">Options Button - Add / Delete Accounts and Change Passwords</p></div> </article> <article> <h1>Department jQuery HTML Code</h1> <p>stardevelop.com — Tue, 24 Aug 2010 06:53:19 +0000</p> <p>A department Live Help button will show the Live Help status for just one department. When the visitor clicks the department button they will be directed to that department and not given the option to select an available department. </p> <p>If you wish to insert a department button within your web pages then you will need to modify step 2 of the HTML code. You would modify the HTML code for your department as shown below in <strong>bold</strong>. You need to change both LiveHelpSettings.department = ‘<strong>Sales</strong>‘ and /livehelp/include/status.php<strong>?DEPARTMENT=Sales</strong>. This example is for a <strong>Sales</strong> department Live Help button.</p> <h2>Step 1.</h2> <p>The following lines should be added on each page after your <title> tag and just before your </head> tag (this should be added once per page):</p> <div><code><br /> <br /> <br /> <script type="text/JavaScript" src="/livehelp/scripts/jquery-latest.js"></script><br /> <script type="text/javascript"><br /> <br /> </script><br /> <br /> </code></div> <p><strong>Note: </strong>You don’t need to include the <script> tag to /whmcs/includes/jscript/jquery.js if your web site already includes the jQuery JavaScript library.</p> <h2>Step 2.</h2> <p>The following lines need to be added where you wish to display the Live Help status indicator button (you may display many Live Help status buttons on a single page):</p> <div><code><br /> <a href="#" class="LiveHelpButton">?DEPARTMENT=Sales</strong>" id="LiveHelpStatus" name="LiveHelpStatus" class="LiveHelpStatus" border="0" alt="Live Help" /></a><br /> </code></div> <p>Please note: The above second step is optional and should only be added to web pages that you wish to display the Live Help button.</p> </article> </main></body></html>