Recordings are a powerful analytics tool that allows website owners to understand user behavior. However, sometimes you might encounter recordings where the Cascading Style Sheets (CSS) seem to be missing or not rendering correctly. This can be frustrating, but fear not! Below are several common reasons why CSS might be missing in your Hotjar recordings and steps to troubleshoot the issue.
This article covers:
- How to identify CSS and image issues
- Most Common Reasons for Issues
- Solutions for missing CSS
- Less common issues for missing CSS
How to identify CSS and image issues
If your Recordings look broken when compared to your live site, this could be because Hotjar isn’t able to access the images or CSS files that add the styling to your site. Below is an example of a Recording with no CSS applied.
You might also see error messages like these in your recordings if you open your browser's dev tools and check the console.
Most Common Reasons for Issues
Reasons why your site may be blocking Hotjar from accessing these assets include:
- Access is limited to specific IP addresses
- Blocking is occurring based on domain/referrer
- Access is restricted based on geolocation (i.e., accessing assets from Ireland is not possible)
- Blocking based on lack of cookie/sessionStorage
- Blocking based on password protection, preventing assets from being accessed directly through their URL, or blocking requests to specific endpoints
Solutions for missing CSS
In most cases, making the allowances listed below can fix issues involving domain/referrer and IP blocking. After making these changes, recordings should be able to display correctly.
-
Allow the domain/referrer https://insights.hotjar.com
We suggest allowing the domains *.hotjar.com especially if the issue is affecting Heatmaps too.
-
Allow Hotjar's IP addresses
All our servers are hosted on Amazon AWS eu-west-1 in Ireland and access stylesheets over HTTPS. Below is a list of the IPs that Hotjar uses to send egress, outgoing traffic from which you can allow if required on your end.
18.203.61.76 18.203.176.135 52.17.197.221The IPs listed above do not cover the actual domain
The actual domain is https://insights.hotjar.com. This is because it is being served by our CDN provider. We suggest allowing the domains *.hotjar.com, especially for applying CSS to Heatmaps.
If you use a Content Delivery Network (CDN), Web Application Firewall (WAF), or any other service that sits between your server and the rest of the web, then you may need to make the changes within those services as well as on the server.
-
Allow Hotjar's User-Agents
Some CDNs or WAFs do not allow you to permit access based on IP address but may allow you to permit access based on User-Agent.
'phone': ( 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) ' 'Hotjar Version/15.2 Mobile/15E148 Safari/604.1' ), 'tablet': ( 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) ' 'Hotjar Version/15.2 Safari/605.1.15' ), 'desktop': ( 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) ' 'Hotjar Chrome/97.0.4692.71 Safari/537.36' )
Less common issues for missing CSS
If you have already tried everything above, here are a few other things to consider about what might be happening.
CSS on Staging servers and Intranets
When using Hotjar on a staging server or intranet, certain content such as CSS and image files may not but publicly available. It Hotjar can't access these files then Recordings, Heatmaps and Feedback widgets may not display properly in your Insights dashboard.
You can read more about how to fix this in our Tips for Running Hotjar on Publicly Inaccessible Servers article.
CSS-in-JS styled-components
If you use CSS-in-JS style libraries on your site, this can cause issues with CSS in your recordings.
One cause for this issue is the reliance of these libraries on insertRule to inject the rules to document.styleSheets in the CSSOM rather than in the DOM.
One way to fix this issue is to take all styles injected by the library, and if Hotjar is recording, re-inject them as an inline `<style>` tag so that Hotjar can see them. Discussing this with your developers to find a solution that best fits your needs would be best.
I recently updated my site and/or CSS, and now it looks broken
When we take a recording of your page, our servers request any CSS files to store them for playback. If we can't store the CSS, we fall back to directly linking to the original CSS files.
This usually happens because a server or Content Delivery Network (CDN) setting refuses requests for assets that don't originate from your domain.
This can normally be fixed if you allow our IP addresses on the server. You can find the IPs to allow here: Hotjar IPs
If adding Hotjar IPs does not solve this issue, then it is because when your site updates CSS files, it changes their name or directory structure.
An example of this is when a file called name.hash1.css is updated with new content, its name may change to name.hash2.css When that happens, the URL where the file is hosted changes as well. Hotjar is unaware of this and still uses the URL captured during the session recording.
The site changes the file name to force browsers to download the new versions. However, there are other ways to achieve this, and the one we recommend would fix this issue in Hotjar.
Instead of renaming files when updated, your team could consider using query string versioning, where a query in the URL changes to a new version when the file is updated. The previous example would then turn into the following.
The file name before the update includes a query string with a version number: oldName.css?v=1 when it is updated, the word itself doesn't change, but the query string does oldName.css?v=2
This will ensure that your users always download the newer version of your styles and allow Hotjar to always pull styles in Recordings that store older URLs.
Unsupported Platforms and Frameworks
While Hotjar supports tries to support a variety of platforms and frameworks, some are unsupported. This can mean that while you are able to install the tracking code, your recordings or heatmaps may not display some content correctly.
You can check if your framework is unsupported in our Platforms and Frameworks not Compatible with Hotjar guide.