There are several ways to apply custom CSS when rendering Heatmaps and Session recordings:

  • To apply custom CSS stylesheets to your Heatmaps and Session Recordings, prefix your CSS with html.piwikHsr.

  • To apply custom stylesheets only for Heatmaps, prefix your CSS with html.piwikHeatmap.

  • To apply custom stylesheets to Session Recordings, prefix your CSS with html.piwikSessionRecording.

  • To load and apply a custom stylesheet file only to your Heatmaps and Session recordings, add the following CSS code to your HTML page or CSS: html.piwikHsr { @import url("fixed.css"); }.

Custom stylesheets can be useful to prevent any possibly sensitive data from being shown in a heatmap or a session recording. It can be also useful when your website shows a pop-up when a user lands on your website. Under circumstances such a pop-up could be visible in a heatmap. You can also exclude or hide elements when you configure a heatmap, but by defining it in your stylesheets you don’t have to configure it each time you create a new heatmap.

Any questions?

Many answers and more information about Matomo you can find here:

We are social

Follow us: