Matomo Heatmap not rendering correctly from Webflow Page

Design help Custom code
1

Hi,

We are using Heatmap recording to track user behaviour and improve our website.
As we are low coding on our Website (using Webflow), I am not sure how to solve the problem. We are using for some sections the setting of viewport height of min-height = 85% vh, which works totally fine.

But as you may see, the Matomo Heatmap shows the rendering of the page fully distorted.

I know that I need to add some code like

.matomoHsr {
    min-height: 2000px !important;
}

.matomoHsr .page {
    min-height: 2000px !important; 
}

But I am not sure which code to enter on our website and where to put it correctly (is it inside head tag, or before body tag?) Can you help me with that?

I also already tried this code (in Header Tag), but it was not working:

<script>
  document.children[0].className += ' matomoHsr ';
</script>

Can you help with that?

grafik

Here is my site Read-Only: Webflow - inno2fleet