If the Heatmap only shows the top section of your page, then the most likely cause is that the page scroll happens on a DIV, not on the document. This is a current limitation of Heatmaps and is mentioned in our article on Heatmap Limitations.
Below you can find the possible causes why a Heatmap might not show the full page as expected:
Page scroll doesn't occur on the document element
If your page does not scroll on the document element, or your page uses a scroll-lock to scroll the page, Hotjar will not be able to capture a complete screenshot of the page.
We sometimes see sites where the scroll happens on a DIV container. These types of pages are not supported and we mention this is in our Heatmap Limitations article. For Heatmap screenshots to show in full, Hotjar needs to know how big the document is.
Page width fixed with Javascript
Hotjar captures a screenshot at the following divice widths:
Desktop: 1280px
Tablet: 800px
Phone: 380px
If your screenshot appears to be cut-off, you can check to see if Javascript is being used to set a fixed width whenever the browser size changes. If a user visits a page on your site with a fixed browser width that is not the required width the Hotjar screenshot tool uses, then the screenshot may not render correctly.
Possible solution: You can try retaking the screenshot in-app. Alternatively, you can set up future Heatmaps using the Heatmap delay workaround. This will allow you to manually capture the screenshot yourself when you create a new Heatmap.
Page height fixed with Javascript
Your page may have some elements with 100% of the browser height which could be set using JavaScript. Hotjar takes page screenshots in a single large window and these types of elements can continue enlarging, rendering the screenshot incorrectly.
Possible solution: You may need help from your development team to look into this issue. It can sometimes be fixed by setting a maximum value for your height calculation (this can be a value you choose, up to 1200). Setting a limit can help address this problem.
viewportHeight = (viewportHeight > 1200) ? 1200 : viewportHeight;
// - or - //
if (viewportHeight > 1200) {
viewportHeight = 1200;
}
Heatmaps will not show the full screenshot on pages that are larger than 15,000 pixels in height
As mentioned in our Heatmap Limitations, pages with a height that is greater than 15,000 pixels will not fully render. Pages longer than this will be cropped to this point.
Heatmap looks distorted due to the use of VH units
While this isn't common, you may find that a Heatmap displays images and text in a distorted way. This could be due to some of the text on your site being set to use a vh unit for font-size within the element's CSS styling.
Currently, we're not able to handle this method of vh usage. You can reach out to our Support Team using the 'Contact Us' button at the bottom of this page and we can try to manually retake the screenshot.