From Friday July 1, 2022 we're moving accounts that were created before April 20, 2022 to our updated pricing model.
Under the updated pricing model, we've grouped Surveys and Feedback into a separate product called Ask that’s priced based on the number of responses you want to collect across Surveys and Feedback. Heatmaps and Recordings will be grouped into a separate product called Observe and will still be priced based on the number of daily sessions.
Both products, Observe and Ask, will have the Basic (free), Plus, Business, and Scale plans available, and the selected plan can be different for each product.
See the Updating our pricing model blog post for all the details on this update.
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.
Have you tried retaking the Heatmap screenshot?
Updating the Heatmap screenshot can often fix screenshot issues. If you haven't tried this yet, check out How to Update a Heatmap Screenshot.
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 device 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.
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
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.