Heatmap Screenshot Troubleshooting

This article identifies and offers some fixes for unexpected, blank, broken, and cut off Heatmap screenshot results. If you're looking for help with troubleshooting the heat data placed on top of the screenshot, see our Heatmap Data Troubleshooting article.

Click the screenshot issue below that most closely describes what you're seeing:

My screenshot has no styling or CSS applied, with images and icons larger than expected

Articles mentioned in the video: Hotjar IPs and How to Retake a Heatmap Screenshot

Missing CSS or images and SVG icons that are larger than expected typically mean your site's server is blocking Hotjar from accessing the CSS files.

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, updating your screenshot should resolve the issue.

• Allow the domain/referrer https://insights.hotjar.com

  We suggest allowing the domains *.hotjar.com especially for applying CSS to Heatmaps.

• 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

My screenshot is cut off at the bottom, is the wrong size, or is distorted

When your screenshot is cut off, the sizing is wrong, or it appears distorted, this can occur when the standard functionality of scrolling the page is customized in your site's code.

Below are some possible causes and solutions for this issue:

• The page has a height larger than 15,000 pixels

  When we take initially take a screenshot of a page, Hotjar renders it at a maximum of 15,000 pixels in height. Pages longer than this will be cropped to this point.

  However, using the Take a new screenshot of this page yourselfan> retake option will allow you to capture the full page in most cases.

  See our Heatmap Limitations article for a listing of what Heatmaps cannot capture.

• Page scroll does not occur on the document element

  If your page doesn't scroll on the document element or uses a scroll-lock to scroll the page, Hotjar will not be able to capture a complete screenshot of the page, and it can appear cut-off. This is because our screenshot capture process needs to determine how long the document is. If you see a cut-off screenshot, it could be because the scroll for your page occurs on a <div> container, which our Heatmaps tool doesn't support.

  See our Heatmap Limitations article for a listing of what Heatmaps cannot capture.

• The width of the page is being set with JavaScript

  Hotjar captures a screenshot at the following device widths:

  • Desktop: 1500px
  • Tablet: 800px
  • Phone: 380px

  Screenshots can be affected if JavaScript is used to set a fixed width when the browser size changes. If a user visits a page on your site with a fixed browser width applied, the screenshot for that page may not appear correctly as it won't be the required width the Hotjar screenshot tool uses.

  Possible Solution:

  In some cases, you can fix this by updating the screenshot. See our How to Update a Heatmap Screenshot article for a step-by-step guide on doing this.

• The height of the page has been set with JavaScript

  Your page may have some elements that are 100% of the browser height, set using JavaScript. Hotjar takes page screenshots in a single large window, and these types of elements can continue enlarging, resulting in an unexpected screenshot.

  Possible Solution:

  A fix may require help from your development team. It can sometimes be resolved by setting a maximum value for your height calculation. This can be a value of your choice, up to 1200.

  
  viewportHeight = (viewportHeight > 1200) ? 1200 : viewportHeight;
  // - or - //
  if (viewportHeight > 1200) {
  	viewportHeight = 1200;
  }
  

• VH units are used for text size on the page

  When images and text in a screenshot are distorted, this can be due to a vh unit being used for text size within the element's CSS styling. Heatmap screenshots don't currently support this method of vh usage.

  Possible Solution:

  In some cases, you can fix this by updating the screenshot. See our How to Update a Heatmap Screenshot article for a step-by-step guide on doing this.

Back to top

My screenshot has missing elements or shows as all white/black

This usually occurs when dynamic content on the page loads on events such as scrolling, hovering, or clicking. It can also arise when images on your page are set to load on a delay, such as to increase your site's loading speed.

Possible Solution:

This issue can be fixed in some cases by taking a new screenshot using our update screenshot tool. With this tool you have the opportunity to load your site in a new window, allow any dynamic content to load, and then capture a new screenshot. See our How to Update a Heatmap Screenshot article for a step-by-step guide on doing this.

Back to top

My screenshot on desktop is showing elements for a mobile device

You might encounter an issue where the screenshots of your desktop site have elements from the mobile site, such as the navigation menu. This can also occur the other way around, with desktop elements in the mobile screenshot.
This can occur due to CSS rules on your page where the desktop site is not set to be shown starting from 1280px. It can also happen when elements are hidden/shown using min-device-width and max-device-width.

Possible Solution:

Not all web browsers recognize min-device-width and max-device-width, which can be fixed by replacing them with min-width and max-width. You'll find more details on the differences between these in a post on Menucool called max-device-width vs max-width? Which one should I use?

Back to top