How do I apply custom stylesheets when a heatmap is generated or a session recording replayed?

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) or 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. In certain situations, a pop-up might be visible within 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.