From Chatstack v5.1 and above we have new HTML code which is compatible with OpenCart and won’t cause JavaScript conflicts that may have occurred on certain websites with our legacy HTML code.

Step 1 – Chatstack Server Installation

Before you can add the HTML code to your OpenCart website (at http://www.example.com/livehelp/) you will need to complete the Chatstack server software installation. These instructions can be found at Documentation – Server Software Installation Instructions. Once you have completed the server software installation and successfully logged into the Chatstack administration you can proceed to adding the live chat HTML code to your website.

Step 2 – OpenCart HTML Code Installation

The following lines should be added within your OpenCart header.tpl template file. You can locate this template file at /store/catalog/view/theme/{theme}/common/header.tpl where {theme} is your OpenCart theme (or the default theme if you aren’t using a custom theme).

This code should be placed after the other <script> tags but before the </head> tag within the header.tpl file:

{literal}
<!--  BEGIN chatstack.com Live Chat HTML Code //-->
<script type="text/javascript">
    var LiveHelpSettings = {};
    LiveHelpSettings.server = '{/literal}{php} echo($_SERVER['SERVER_NAME']); {/php}{literal}';
    LiveHelpSettings.embedded = true;
    (function(d, undefined) { 
        // JavaScript
        var LiveHelp = d.createElement('script'); LiveHelp.type = 'text/javascript'; LiveHelp.async = true;
        LiveHelp.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + LiveHelpSettings.server + '/livehelp/scripts/js.min.js';
        var s = d.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(LiveHelp, s);
    })(document);
</script>
<!--  END chatstack.com Live Chat HTML Code //-->
{/literal}