A Heatmap screenshot is your site's page image shown underneath the heat data. The screenshot is generated using an actual user session captured via Session Replay. 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 walk you through the process of refreshing your screenshot, or taking a new screenshot yourself.
Updating a heatmap screenshot
1. When viewing a heatmap, click the expand icon to open the side panel.
2. From the side panel, click one of the following options:
- Change page screenshot
- See clicks on pop-ups and drop-downs
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.
Take 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.
1. Click on 'Take a new screenshot' from the side panel.
2. A new window will open and load your site.
3. Scroll to the bottom of the page.
4. 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.
1. Click on 'See clicks on pop-ups and drop-downs' in the side panel.
2. A new window will open and load your site.
3. Hover over or click on the element you want to capture to make sure it's visible.
4. 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.
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 (e.g. desktop, tablet, mobile). Then, repeat the screenshot update steps listed above for the device you've currently selected.
FAQs
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 and solutions:
- The Tag is no longer loading on the target page
- You may need to check with your website team to learn about any conditions that may prevent the tag from loading in certain circumstances.
- The Tag is being blocked by browser plug-ins or extensions
- Disable any browser extensions or use a Chrome Incognito browser to see if that solves the issue
- The Tag 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.
- Configure your browser to allow "third-party scripts" to prevent it from blocking Contentsquare. Guides to finding your browser settings to enable/disable "third-party scripts" are available for Safari, Firefox, and Chrome.