Hotjar generates Heatmaps by taking a screenshot of your page and overlaying that screenshot with data it has collected about clicks, mouse movement, and scrolls. Occasionally, you may want your Heatmap screenshot to mask or exclude specific elements on your page. For example, if you have a pop-up which automatically loads when a new user lands on your page, you may want to exclude it from your screenshot.
Suppressing Text in your Heatmap
To learn more, you can refer to Suppressing Text in Heatmaps.
Excluding elements from the Heatmap screenshot using CSS selectors
Find the elements you want to hide from your Heatmap (they will not show at all)
You will need to locate the CSS selectors of the elements you wish to exclude. To do this, you can use Chrome. Right-click on the elements you want to hide in the screenshot and click on Inspect Element.
Use Chrome to get the CSS Selectors you need
After clicking Inspect Element, the development panel will open and show you the element you have selected. Clicking the elements will highlight the part of the site allowing you to determine the exact element you want to exclude.
Once you've selected the right line, right-click on Copy > Copy selector.
Create a Heatmap with excluded elements
When creating a Heatmap, you can use our Exclude elements from Heatmap functionality. Paste the CSS selector you copied earlier into this field.
You can also exclude multiple elements with a comma:
When specifying elements through this method, Hotjar will exclude and ignore usage on the element you specify and all its "children" (elements which are inside the element you specify).