Matomo Heatmap not rendering correctly from Webflow Page

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: https://preview.webflow.com/preview/inno2fleet?utm_medium=preview_link&utm_source=designer&utm_content=inno2fleet&preview=69744b1ac87aceaff36e2d5b1a310ddf&pageId=63281d68519ac8b8cf8bf996&workflow=preview