When installing Hotjar on websites that use the Smarty Template engine, for example, WHMCS and Prestashop, you will need to make sure that the Tracking Code pasted is wrapped within {literal} tags. Without this the rendered page will "break" and content in the header section of the website will be missing such as stylesheets, JavaScript, and other resources.
Go to hotjar.com to copy the Tracking Code from the Hotjar admin
You can put the Hotjar Tracking Code directly into a template file (usually header.tpl).
Paste the Tracking Code inside the {literal}{/literal} tags.
For example:
<script type="text/javascript">
{literal}
(function(h,o,t,j,a,r){
/* ... rest of hotjar tracking code ... */
})(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
{/literal}
</script>
The actual Tracking Code that is placed in your Prestashop template file must have the {literal}{/literal} tags placed around them as shown in the example above. Please copy the Tracking Code from your Hotjar dashboard. Then add {literal} just before the first (function... line in the code and the {/literal} just before </script>
Without the literal tags, your website may only render a blank white page.
Your Hotjar Tracking Code is now installed.
Once you have added the Hotjar Tracking Code to your site, you will need to wait a few minutes for Hotjar to check if it is installed correctly. This usually happens the moment your site is loaded with the Hotjar Tracking Code on it - you can visit the page yourself to speed the process up. Once Hotjar has detected the Tracking Code on your site, the Site Dashboard will show a notice like the one below:
Keep Tracking Code in mind when making design changes
If after you install the Tracking Code, your website undergoes a major design change check to ensure your Tracking Code is still installed.
Once your Tracking Code is installed
You can start using any of Hotjar's 8 features: Heatmaps, Recordings, Forms, Funnels, Polls, Surveys, Recruiters and Incoming Feedback. Have a look at the guides below to get started.
- Creating Your First Heatmap Report
- How to Start Recordings
- Creating Your First Form Report
- Creating Your First Funnel Report
- Creating Your First Poll
- Creating Your First Survey
- Creating Your First Recruiters Widget
- Starting to use Incoming Feedback
Next Steps
- Add users to your Organization.
- Add Sites to your Organization.
- Discover the difference between Accounts, Organizations, and Sites.
- Use Hotjar for your clients.