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 Change screenshot.
Click Refresh or Take new.
Automatically finds the last recording of the page and updates the screenshot. Choosing to refresh the screenshot means you cannot go back to the previous screenshot.
Loads your site in a new window, enabling you to capture your heatmap's screenshot manually.
We recommend scrolling to the bottom of the page, allowing any dynamic content to load, and then either clicking Take screenshot or using the keyboard shortcut Ctrl + K (Windows)/Cmd + K (Mac).
When using the refresh or take new 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 to refresh or take a new screenshot 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 screenshot" button?
If you're attempting to use the in-app screenshot Retaker 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 red "camera" button should appear.
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.