Currently, Heatmaps have the following limitations:
Scrolling element on the <div> container
When we load your page, we expand it in a large virtual space to take a single screenshot of the entire page. If the scrolling part of a page is within a <div> tag rather than using the <body> tag, then Hotjar can't detect the correct page height, and your screenshot will be cut off. There is no workaround for this at this time.
Pages that use "scroll-lock"
Pages that use parallax scrolling
Parallax scrolling does not support viewports which extend all the way to show the page, which is how Hotjar generates screenshots, so images may appear distorted. However, it may be possible to generate a better representation of your page by updating the screenshot.
Elements with horizontal scrolling
Elements with a horizontal scrolling action may not fully display beyond the area that is initially visible when manually updating the screenshot. This is due to the page being reloaded before the final capture is generated and the scrollable area being reset to the default starting position.
Our Heatmaps previously didn't capture dynamic content such as pop-ups, dropdown menus, or lazy-loading content by default. However, in most cases, these can now be captured using the update screenshot tool.
Content that dynamically unloads
Our Heatmaps rely on what's visible in the HTML to properly capture a screenshot. If content unloads as a user scrolls away from it, Hotjar won't be able to consistently capture those elements in the screenshot.
Although the iframes are within the HTML of the page, we are unable to collect data from them, so they will appear as a black box within the Heatmap. A possible workaround can be used to view content within the iframe, but click data will still not be present.
Pages with large file sizes
Hotjar has a limit of 10MB when capturing the HTML of a page. Large pages that contain images and source code within the body of the HTML will not be captured if they are over this limit.
Screenshots heights are limited to 50,000 pixels
Pages longer than 50,000 pixels may cause the heatmap to timeout and not capture the screenshot if they are over this limit.
Sharing Heatmaps externally
Heatmaps can't be shared through a link to users who don't have access to your Hotjar dashboard. However, you can download a heatmap to be shared externally.
Hotjar may be unable to display a hover menu unless the HTML and CSS of the page is updated when the menu is displayed. For instance, having a class on the element change from
class="example-open"and the CSS rules update, saying when the menu is visible. A developer will be needed to implement this code.
Canvas elements won't appear in screenshot
Currently, it's not possible to view or track interactions on canvas or web-gl images in heatmap screenshots. Canvas content and other 3D graphics are not exposed to the page DOM, so Hotjar cannot access it.
Custom fonts (example: VIC fonts) aren't supported as they may cause the screenshot to fail to load.