If your website uses scroll to reveal, dynamically loaded elements, or has a pre-loader, there are a few different ways in which you can delay the screenshot capture until all the parts of the page you want to capture have loaded.
Setting up a Heatmap delay
A Heatmap can be manually delayed by adding a snippet to the end of the URL and taking a custom screenshot to ensure a user does not trigger the Heatmap.
It's important you don't skip any of these steps.
Create a new Heatmap.
Under Advanced Options, set a Custom Screenshot URL.
This will be the same URL that you put in the page targeting field, except you'll add: ?hjDelay=10000.
For example, if you were targeting http://www.example.com/, your Custom Screenshot URL would be http://www.example.com/?hjDelay=10000 )
Does your URL already contain query strings?
For example, http://www.example.com/mypage/?category=mycategory&option=1 with the hjDelay value as an additional query string would be http://www.example.com/mypage/?category=mycategory&option=1&hjDelay=10000.
Create the Heatmap.
Wait 5 minutes.
Visit the Custom Screenshot URL.
You'll have 10 seconds after the site begins loading to scroll to the bottom of the page to make sure all content is visible, scroll back to the top and open the menu.
Repeat step 6 again for the mobile and tablet view.
The best way to capture these views, would be through using DevTools in Chrome.
You can also use the Chrome Developer tools to verify that a screenshot was taken. A similar request to the one shown below means the screenshot was successfully taken!
Wait to see if you can view the Heatmap in your dashboard.
It will take no more than five minutes for you to see the Heatmap in your dashboard if the screenshot was captured correctly. If you are still unable to see the Heatmap, reach out to Support for troubleshooting help.