A Heatmap screenshot is your site's page image shown underneath the heat data. The screenshot is generated using an actual user session captured in our Recordings tool. You might decide to update this screenshot because it misses parts of your page or when you've changed the page design and you'd like the screenshot refreshed.
This article will step through the process of refreshing your screenshot or taking a new screenshot yourself.
How to use the update screenshot tool
When viewing a heatmap, click the expand icon to open the side panel.
Click one of the two available options.
The Screenshot date may not be from the most recent session
Session data is tied to the Date filter you select when viewing a heatmap. Hotjar will try to grab a screenshot from a session where the page you're analyzing was fully loaded by a user. So, while the screenshot will always be pulled from a session in the date range you select, it may not be from the most recent session. For more information on date filters, visit How Do I Filter Session Data?
Change page screenshot
From here, you'll see three pre-generated screenshots of the page to choose from. If none of them look quite right, you can choose the Take a new screenshot option on the far right.
Take a new screenshot
This option is useful if your site uses dynamic content, such as "lazy-load" elements that only appear as a user scrolls down the page.
Click on Take a new screenshot in the side panel.
A new window will open and load your site.
Scroll to the bottom of the page.
Make sure any dynamic content on the page is fully loaded, then click Take new screenshot:
See clicks on pop-ups and drop-downs
This option is useful if you want to capture a pop-up or content that is only visible when a user hovers or clicks on a certain area of your page, such as a drop-down menu.
Click on See clicks on pop-ups and drop-downs in the side panel.
A new window will open and load your site.
Hover over or click on the element you want to capture to make sure it's visible.
Click Take new screenshot or use the keyboard shortcut Ctrl + K (Windows)/Cmd + K (Mac) to capture the screenshot:
When using any of these options, your new screenshot will be used to update the Heatmap report. Heatmap data will also be updated based on newly visible content.
Repeat the update screenshot process for other devices to also update their screenshots
Taking a new screenshot for one device won't update the screenshots across all devices. To update the screenshots of other devices, first select the relevant device type using the device selector on the right-hand side when viewing a heatmap (e.g. desktop, tablet, mobile). Then repeat the Update screenshot steps listed above for the device you've currently selected when viewing your heatmap.
What if my screenshot still doesn't look right?
If your screenshot still doesn't seem right, several things might be causing the issue. Screenshot issues can include having no styling or CSS applied, a screenshot that is cut off at the bottom, missing elements and white space, or mobile elements showing on a desktop screenshot.
To help resolve these issues, see our Heatmap Screenshot Troubleshooting article. We also suggest checking our Heatmap Limitations article in case your site falls under one of the Heatmap limitations.
What if I don't see the 'Take a new screenshot' button?
If you're attempting to use the in-app screenshot re-taker tool but you don't see the button to capture the new screenshot, there are a few possible causes:
The Hotjar tracking code is no longer loading on the target page.
This could happen because the Tracking Code was removed from the page or only loads under certain conditions. This can sometimes occur during a redesign of your site or if your site has criteria related to third-party scripts.
Solution: Check out the How to Verify Hotjar is Installed guide to make sure your Tracking Code is present. You may also need to check with your website team to learn about any conditions that may prevent the Hotjar Tracking Code from loading in certain circumstances.
The tracking code is being blocked by browser plug-ins or extensions
Some examples of browser extensions that can prevent the Retaker from working are AdBlock and Ghostery.
Solution: Disable any browser extensions or use a Chrome Incognito browser to see if that solves the issue. Once extensions are disabled, the blue button with the "Take a new screenshot" text appears.
The tracking code is being blocked by your browser's security settings.
Try using another browser to confirm if the issue is browser-related. If you are able to use the retake tool in another browser, this means something is preventing the button from showing in your normal browser.
Solution: Configure your browser to allow "third-party scripts" to prevent it from blocking Hotjar. Guides to finding your browser settings to enable/disable "third-party scripts" are available for Safari, Firefox, and Chrome.