Your Heatmaps may be based on continuous capture
If you are on a Hotjar Business or Plus plan, your Heatmaps are based on continuous capture by default. As we transition to Continuous Heatmaps, you will still have access to manual snapshot-based Heatmaps as well. Learn more about Continuous Heatmaps.
You can use Hotjar to generate Heatmaps of any pages on your site including password-protected pages and dynamically generated pages. The steps below are an advanced explanation of how Hotjar Heatmaps work.
We take a copy of your page's HTML code.
After adding a new Heatmap snapshot, the very first thing that Hotjar does is wait for a user to load a page on your site you have targeted for your Heatmap, from each device type.
When this happens, the HTML the user loads is sent to our servers and a device-specific screenshot of that page is taken. The screenshots are taken using Selenium WebDriver which loads the HTML previously saved using three different user agents (one for each screenshot) mimicking a desktop, tablet, and a phone device.
The assets needed to render the CSS are loaded directly from your server
This means that the assets need to be publicly available and that insights.hotjar.com needs access to load these assets.
Hotjar uses these user agents when capturing screenshots:
// Desktop user agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Hotjar Chrome/74.0.3729.131 Safari/537.36
// Tablet user agent:
Mozilla/5.0 (iPad; CPU iPhone OS 11_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Hotjar Version/11.0 Mobile/15E148 Safari/604.1
// Phone user agent:
Mozilla/5.0 (iPhone; CPU iPhone OS 11_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Hotjar Version/11.0 Mobile/15E148 Safari/604.1And these device widths when we take Heatmap screenshots:
| Device | Size |
| Desktop | 1280px |
| Tablet | 800px |
| Mobile | 380px |
Hotjar will take a screenshot of the first page in the target range visited
This means that the content in the screenshot is dependent on that first visit.
We save a copy of all the elements available on your page.
Hotjar creates an 'element map' of all the elements available on your page. The elements are mapped by their tag and their parent elements, IDs or classes. This will be needed to later build your Heatmap report.
We collect usage data from your users.
Hotjar will start collecting data usage behavior from your users to generate three different Heatmap reports. You can see three real examples of different types of Heatmaps here.
We build your Heatmap report.
When it comes to click/tap and move Heatmaps, Hotjar will check all the elements your users interact with and compares them to the previous copy saved in Step 2. If there is a match, it will be reflected in the Heatmap report.
Hotjar may collect more click data than shows on your Heatmap
Hotjar will only show you the usage of the elements available on the screenshot it took. The click count on the Heatmap view and the % of clicks is based on visible elements only. This means % of clicks per element varies between the Heatmap screenshot and the Click Data.