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 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"
Scroll-lock is a JavaScript library that alters the normal scrolling behavior on a page. Because the page’s typical scrolling is interrupted, the screenshot will not be able to correctly display the page and the heatmap will be cut off.
-
Pages that use parallax scrolling
Parallax scrolling does not support viewports which extend all the way to show the page, which is how Hotjar generate 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.
-
Dynamic content
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.
-
iFrames
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.
-
Height Limitations
When we take initially take a screenshot of a page, Hotjar renders it at a maximum of 15,000 pixels in height. Pages longer than this will be cropped to this point.
However, using the Take a new screenshot of this page yourself retake option will allow you to capture the full page in most cases. -
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.
-
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.
-
Hover-state menus
Hotjar may be unable to display a hover menu unless the HTML code of the page is updated, with a class name for example, when the menu is displayed. A developer will be needed to implement this code.
-
Viewing images rendered with JavaScript
Screenshots don't execute JavaScript so any images or animations created using it will not be visible in a heatmap.
Not Seeing Your Issue Here?
Visit our articles on Heatmap Screenshot Troubleshooting or Heatmap Data Troubleshooting.