Why Do Recordings Look Broken or Have No CSS Loading?

If your Recordings look broken when compared to your live site, this could be because Hotjar isn’t able to access the CSS files which add the styling to your site. Below you can see an example of a Recording with no CSS applied.

Reasons why your site may be blocking Hotjar from accessing CSS 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

Solution:

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.221

  The IPs listed above do not cover the actual domain

  The actual domain is https://insights.hotjar.com. This is due to it 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'
      )

Back to top