I've been trying to generate a full page heatmap screenshot in Hotjar application, but I've not been able to because the screenshot is being cut-off at the bottom.
The Hotjar documentation states that the issue might be in the scroll functionality. This is a snipet of the documentation (https://help.hotjar.com/hc/en-us/articles/115011867928)
Scrolling element on the container
When we load your page, we expand it in a large virtual space to take a single screenshot of the entire page. If the scrolling part of a page is within a tag rather than using the tag, then Hotjar can't detect the correct page height, and your screenshot will be cut off. There is no workaround for this at this time.
If I try to change the scroll to the body some feature are broken like the header content, since the application is Reactive. Expanding the screen container to not overflow will disable the scroll functionality.
Have anyone experienced this, and if so what steps did you take to solve the heatmap screenshot issue?
Hi,
I don't have experience with Hotjar, but I may have similar case like yours.
In my case, the cause is because Outsystems Reactive App is a SPA (Single Page Application), where the pages basically only using a single page, with render and de-render the content on that page.
This mean, when (in your case hotjar) doing scan, Outsystems Reactive App, should still rendering, so the whole pages is cannot captured by hotjar.
You can try to use prerender to solve this problem (contact Outsystems Support if you want to use this, as this is additional services)