HotJar recordings and form masking

Ask the community
1

Hi all,

For those of us who are also using HotJar, curious if you have been able to ‘unmask’ form fields that do not contain PII, such as the Search box on a List page. It’d be great to view the input as part of the recordings, especially as search strings are not included in the URL parameter in Softr.

HotJar requires updating the HTML by including a data-hj-allow tag (see documentation):

<!--data-hj-allow can be appended as either an attribute or a class -->
  
  <!-- Allow and record any keystroke data typed in input fields -->
  <input name="code" type="text" data-hj-allow />
  <input class="form-control data-hj-allow" name="quantity" type="text" />
  
  <!-- Allow and record any keystroke data typed in textareas -->
  <textarea name="comment" data-hj-allow></textarea> 
  <textarea class="form-control data-hj-allow" name="comment"></textarea>

While this can probably be accomplished through GTM or a custom code block, I have not been able to figure out yet how. Any help is much appreciated!

2

Will you be selectively hiding input for some fields only or for all ?

3

Hi @artur, as I do not have a Checkout, there is no need to mask any fields, except for email and password fields that are masked by HotJar by default.

4

For anyone else who would like to ‘unmask’ HotJar fields, I’ve used the following custom code inside the of the relevant page:

<script>
setTimeout(function() {
  const inputElement = document.querySelector('input.css-1gfpg5k');
  inputElement.setAttribute('data-hj-allow', '');
}, 1500);
</script>

Make sure to replace the ‘css-1gfpg5k’ value with the right value of your input field. You can find this by Inspecting the element, e.g.:
<input aria-invalid="false" id=":r0:" placeholder="Search for flights by airport, city, or country" type="text" class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-1gfpg5k" value="">