What can I do if the heatmap or session recording is not styled and CSS or font icons seem missing?

When Matomo records activities for heatmaps and session recordings, the HTML of your website is being recorded and shown when you view a heatmap or a recorded session. However, the CSS and images that your web page embeds will still be loaded from your website.

• If you have removed CSS or image files from your website that are embedded within the recorded HTML, then the styles might not be shown anymore in the Heatmap or Session recording. However, any generated heatmap data or recorded session will be still correctly displayed, because we track activities in a special way with maximum accuracy. Matomo tries to store the entire CSS of each webpage in the database. In some cases this may not work see this FAQ when you load the CSS from a different domain. If you are loading cached CSS version with unique file names such as cache/223ks2j3jdmam4.css from a different domain and you cannot fix this CORS issue, you can instruct Matomo to load the uncached CSS version or an always existing CSS file by change the HTML structure and setting a data-matomo-href attribute: <link href="cache/223ks2j3jdmam4.css" data-matomo-href="uncached.css">. In this case Matomo would load the uncached.css file when viewing the heatmap.

• If the missing CSS files have been restored or no changes were made to the page’s structure, consider deleting the existing heatmap screenshot in Matomo. Matomo will then regenerate a new screenshot that includes the now-available CSS. You can force a heatmap screenshot to be taken by appending to the URL ?pk_hsr_forcesample=1

• If you have not removed CSS files but your heatmap or session recording is still not styled, your website might not support HTTPS. In this case, try to access your Matomo via « http:// » instead of « https:// ». We recommend that you keep using Matomo via « https:// » and create a HTTPS certificate for your website in order to make sure the stylesheets are applied. It’s important to note Matomo’s URL configuration for heatmaps, the “equals simple” option and the “equals exactly” option define how Matomo matches URLs. When you choose “equals simple,” the protocol (HTTP or HTTPS), any URL parameter, and trailing slashes in a path are ignored. This allows you to more easily match different versions of a page URL. On the contrary, when selecting “equals exactly,” the URL value has to match exactly, including the protocol, URL parameters, and trailing slashes.

• If you have not removed CSS files, and your website supports HTTPS, and some of your CSS or fonts or font icons are still not loaded in the Heatmap or Session recording, and your website is on a different domain name as your Matomo instance, the problem may be that your website does not allow cross domain requests (CORS). To confirm this is the issue, when viewing the heatmap or session recording, you can check your browser developer console (in the tabs ‘Console’ and ‘Network’), whether you see any error: Access to Font at https://website.com from origin https://piwik.example.com has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://piwik.example.com' is therefore not allowed access.
  If you see this error in the browser, the solution is to configure your website and enable CORS by outputting a HTTP header Access-Control-Allow-Origin: * in your website responses or better instead of using a * define the Matomo tracking domain for CSS files Access-Control-Allow-Origin: https://matomo.example.com. (Contact your webmaster for more information)

• If you are using a browser extension such as Privacy Badger or other Adblockers, they may be blocking some of your website resources from loading. Please try to disable the extension on your Matomo domain name or URL, and refresh the page.

• If the heatmap or session recording is still not styled, please contact us and we will investigate.