Articles in this section

Heatmap Limitations

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"

      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 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.

    • 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.

    • 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.

    • 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.

    • 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 and CSS of the page is updated when the menu is displayed. For instance, having a class on the element change from class="example" to class="example-open" and the CSS rules update, saying when the menu is visible. 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.

    • 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

      Custom fonts (example: VIC fonts) aren't supported as they may cause the screenshot to fail to load.

Not Seeing Your Issue Here?

Visit our articles on Heatmap Screenshot Troubleshooting or Heatmap Data Troubleshooting.

Back to top

Related articles