Why is hotjar never taking the initial screenshot?

I am trying to setup hotjar heatmaps on a react application.

Setting it with all default options worked (by default options, i mean not touching the "advanced options" tab)

But the first thing in the page is a loading bar, before the content appears, so the heatmap is not really useful

Luckily, hotjar has a treatment for this that is well documented on this page

I followed all steps and the view count is increasing, but the screenshot is never taken

Any help? There will be a loading of a few seconds on every page so, unless I can configure the delayed screenshot, hotjar won't be of much use, unfortunately, but if it does work, it's gonna kick ass on our UX research

Thanks!

As you have said, using the default settings, the screenshot will be taken immediately when the target page is loaded for first time.

In order to get a delayed screenshot you need to:

1) Start creating a heat-map

2) On the 3rd step, enter the page/s URL that you want to track.

3) Click on Advanced options

4) Enter the full URL to the page from which you want the screenshot to be taken and also add the hjDelay parameter to delay the screenshot. The delay is in milliseconds.

e.g. If the page you wish to record has an URL https://example.com you need to enter https://example.com/?hjDelay=10000 to take a screenshot from the page 10 seconds after it is loaded. Alternatively, if the page already has query strings, https://example.com/?foo=bar, you need to enter https://example.com/?foo=bar&hjDelay=10000.

5) You now have to access at least once the page with the delay that you have specified in order to get the screenshot. That would be https://example.com/?hjDelay=10000 and not just the base URL.

6) Once you access the page, make sure to activate all interactive elements before the time has ran out and after that you should be able to see your new heat-map.