Live Help HTML Code
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.
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):
<!-- stardevelop.com Live Help International Copyright - All Rights Reserved //-->
<!-- BEGIN Live Help Code - NOT PERMITTED TO MODIFY IMAGE MAP/CODE/LINKS //-->
<script language="JavaScript" type="text/JavaScript" src="/livehelp/include/javascript.php"></script>
<!-- END Live Help HTML Code - NOT PERMITTED TO MODIFY IMAGE MAP/CODE/LINKS //-->Step 2.
The following lines should be added on each page between your documents <body> tags (this should be added once per page). This code should be added immediately after the <body> tag or immediately before the </body> tag (you should not nest this code within any other tags as it will cause problems with the position):
<!-- stardevelop.com Live Help International Copyright - All Rights Reserved //-->
<!-- BEGIN Live Help Code - Copyright - NOT PERMITTED TO MODIFY IMAGE MAP/CODE/LINKS //-->
<div id="floatLayer" style="position:absolute; left:10px; top:10px; visibility:hidden; z-index:5000;">
<map name="LiveHelpInitiateChatMap" id="LiveHelpInitiateChatMap">
<area shape="rect" coords="50,210,212,223" href="http://livehelp.stardevelop.com" alt="stardevelop.com Live Help"/>
<area shape="rect" coords="113,183,197,206" href="#" onclick="openLiveHelp();acceptInitiateChat();return false;" alt="Accept"/>
<area shape="rect" coords="206,183,285,206" href="#" onclick="declineInitiateChat();return false;" alt="Decline"/>
<area shape="rect" coords="263,86,301,104" href="#" onclick="declineInitiateChat();return false;" alt="Close"/></map>
<div id="InitiateText" style="position:relative; left:30px; top:145px; width:275px; height:35px; z-index:5001; text-align:center; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold;">Do you have any questions that I can help you with?</div>
<img src="/livehelp/locale/en/images/InitateChat.gif" alt="stardevelop.com Live Help" width="323" height="229" usemap="#LiveHelpInitiateChatMap"/></div>
<!-- END stardevelop.com Live Help Messenger Code - Copyright - NOT PERMITTED TO MODIFY IMAGE MAP/CODE/LINKS //-->Step 3.
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):
<!-- stardevelop.com Live Help International Copyright - All Rights Reserved //-->
<!-- BEGIN Live Help HTML Code - NOT PERMITTED TO MODIFY IMAGE MAP/CODE/LINKS //-->
<a href="/livehelp/index.php" onclick="openLiveHelp(); return false">
<img src="/livehelp/include/status.php" id="LiveHelpStatus" alt="Live Help" />
</a><!-- END Live Help HTML Code - NOT PERMITTED TO MODIFY IMAGE MAP/CODE/LINKS //-->Please note: The above third step is optional and should only be added to web pages that you wish to display the Live Help button.
Example (Status Button Code – Step 3):
How do I add a text link (button) instead of an image on a single page that still has the image button in the header?
Eddie, you would need to place a second copy of step three of the HTML code on your page. You can then edit this code to remove the image from the link and use text instead.
Where I should to place the first two codes?
We use Dolphin community software. Now I have the Error image you can see it on the site.
Hi, I have a blog site that is completely written in PHP. Can I add your script to a site like that? You only mention adding things to to HTML pages. All my pages have HTML embedded in the PHP.
Harry, please contact technical support via. email so that we can help with the issues that you are experiencing.
The Live Help HTML code can be placed on any web page, PHP, ASP.NET, ColdFusion, Ruby etc. Normally when added the HTML code to these dynamic web pages you would need to add the HTML code to your web site template files.
Does it support multiple sub-domains?
Bryan, yes this HTML code can work within multiple sub-domains.
Is there any way to get status.php to check the online status of an operator only on page load? It seems to check the status every 2 seconds and my web host is claiming this is causing server slow downs for them.
Adam, the status.php will only be called every 10 seconds (not every 2 seconds) to check if the site visitor is still on your site etc. You can disabled the visitor tracking feature completely within the Live Help Settings > General > Visitor Tracking > Disabled. Once this is disabled then you won’t be able to see who is browsing your web site.
Instead of having an image indicating whether an operator is online I’d just like to output text in a paragraph like “Live Chat Online” or “Live Chat Unavailable”. Is there a way I can fetch the status in PHP or even Javascript and choose what to output myself?
Anthony, you would be best to use the jQuery HTML code over at http://livehelp.stardevelop.com/kb/article/245/ You can then add your own custom JavaScript code to update your text link. There is no need to fetch the status with your own PHP code as the visitor tracking is already doing that for you.
Is it possible to not have the button be a link if we are offline? We will already have a seperate form on our page when we are closed. Would just like the button to display offline.
Marty, you can use the Live Help Windows app > Settings > Email > Offline URL Redirection > Enter the URL of your existing contact form. The offline button will then direct to that page when the Live Help is offline.
I’m using OpenCart how I add the first 2 codes?
Barak, OpenCart will work fine with Live Help. You will most likely need to insert the Live Help HTML code into your OpenCart template. This will then ensure that the visitor monitor code and Live Chat button is inserted on all your web pages. Please contact us via. email or Live Chat if you need us to help add the HTML code to your templates.
Is it possible that to set the status button as an floating button into the page? Please give me some instructions.
Olaf, yes you could easily setup the Live Chat button as a floating image. You would need to edit the button CSS style. The CSS property that you need would be position: fixed Please let us know if you need further assistance.
I’m struggling to get this working. I have duplicated my main site into a sub directory and the live help does not work on there. I also cannot get the popups to work on my blog page.
I have tried to send a message via your live help but it will not let me solve the captcha
Promotional Products, please contact us using the ticketing form at http://livehelp.stardevelop.com/kb/ticket/ or via. Live Chat. The captcha issue should now be fixed on our web site so you shouldn’t have any trouble with that.
How can I change the position of the image button? If I used the module for Joomla and I’ve changed it, I would like to change the position because the default module align doesn’t meet my needs, is there any way?
Michael, you can change the module position within the Joomla module settings. You could also apply a CSS prefix and change the CSS in your style sheet.