Search results for "{{ search.query }}"

No results found for "{{search.query}}". 
View All Results

Masking Elements (Heatmaps/Recordings)

Depending on the type of sensitive information your users enter on your site, you may want Hotjar to not collect data from certain fields and elements. When doing so, Hotjar does not collect the data and instead sends an asterisk (*) for each character.

Note: Hotjar does the field / text masking before sending the data back to our servers. That means that our database contains asterisks instead of letters in all masked areas. There is no way to retrieve the actual text used once a recording or heatmap has been saved with masking.

Option 1: Mask input fields in recordings

You can mask all fields on your site by disabling the setting 'Record visitor key stroke data on this site' which can be found by by clicking on the edit (pencil) button next to your site in 'Sites & Organizations' (note: this setting is site specific).

Option 2: Masking specific elements in recordings and heatmaps

Masking is only applied on text.

Currently Hotjar doesn't support image masking - only text within the tagged elements will be masked.

You can mask individual elements (both input fields and regular text) by making a small modification to your site code - adding an attribute data-hj-masked to the elements you wish to mask.

Masking works recursively, so if you want to, for example, mask an entire form it's enough to apply the attribute to the <form> tag.

This setting will apply to both Recordings and Heatmaps.

Example:

<!-- The below will mask any characters typed in the field-->
<input type="text" name="company" data-hj-masked />
 
<!-- The below will mask any characters typed in the field-->
<textarea name="comments" data-hj-masked></textarea>

<!-- The below will mask any characters displayed in the paragraph-->
<p data-hj-masked>Mask me</p>

<!-- The below will mask any characters displayed in any of the elements inside the span element-->
<span data-hj-masked>
  <p>Mask this</p>
  <p>and this</p>
</span>

Verifying Hotjar is properly masking input fields

Since Hotjar masks elements client-side rather than server-side for added privacy & security, you can verify Hotjar is doing so yourself. Below are the steps to confirm this:

  • Open a new Google Chrome tab/window with the console panel open on the 'network' tab (we use Chrome as it's easier to see this kind of data with);
  • Go to a URL on your site where recordings are enabled and at least one field is masked;
  • In the 'Network' tab, click on these items in order (screenshot attached). funnel/filter icon > WS;
  • If Hotjar is recording you, there should be a websocket called 'ws'. This is the websocket we use to stream the data from the visitor's browser to our servers. This includes in it every keystroke, click, page mutation, etc. Click on 'ws' > Frames;
Steps to see data the Hotjar script sends through the 'ws' websocket to our servers.

Steps to see data the Hotjar script sends through the 'ws' websocket to our servers.

  • Click on a field on your page which is set to be masked and type something in it;
  • Once done, a new 'frame' should appear in the right panel in green (visually seen as a different row).
  • Copy the content of that frame and paste it on a notepad so you can see the full content of the frame. In it you should see something like this:
Extract from a websocket frame, showing that asterisk symbols are being sent rather than the actual user input.

Extract from a websocket frame, showing that asterisk symbols are being sent rather than the actual user input.

The image above means that Hotjar tracked keystrokes on the #name field and asterisk symbols were sent to our servers rather than the actual user input as the field is being masked. You should see the same thing for your masked fields.

Masking Elements (Heatmaps/Recordings)