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.matomoHsr (recommended) or html.piwikHsr.

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

  • To apply custom stylesheets to Session Recordings, prefix your CSS with html.matomoSessionRecording (recommended) or 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.matomoHsr { @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.