Privacy API

You can also mask elements in your session recordings using the Privacy API. To mask or hide elements, use the data-sl attribute with one of the values listed in the table.

VALUEDESCRIPTION
MaskHides text in elements
UnmaskShows text that was masked by a previous mask
ExcludeReplaces entire element with an overlay of the same size
<div data-sl="mask">
  This text will be replaced by *.
  </div>
    This text will be replaced by *.
  </div>
</div>

📘

Passwords and credit card numbers are not recorded by default.

Payment gates

Recordings of credit cards are safe because most payment gates are 3rd party apps where customer gets redirected to another site. These payment gates are usually in an iframe which we block from being recorded as well.

You probably noticed the Card number example. We block credit cards in recordings by default but it may happen that your site is using some custom coded payment solution that is not either secure or is coded in such a way that our script does not recognize it. For such rare cases you can make sure by using this attribute and value that your customer card numbers are safe and will not be recorded.

Masking forms

Forms are everywhere these days on websites and most often you will want to mask some of them.

Exclude visitor's sensitive data from recordings by masking forms and inputs.

Masking all fields

To mask all fields in a form:

<!-- Mask all fields in a form -->
<form data-sl="mask">
  <div>
    <label>Card number</label>
    <input type="text" placeholder="Card number">
  </div>
  <div>
    <label>Expiration Date</label>
    <input type="text" placeholder="MM-YY">
  </div>
</form>

Masking selected fields

If you do not want to mask the entire form, you can also mask only selected fields.

To mask selected fields in a form:

<form>
  <!-- Mask this field -->
  <div data-sl="mask">
    <label>Card number</label>
    <input type="text" placeholder="Card number">
  </div>

  <!-- This field is not masked -->
  <div>
    <label>Expiration Date</label>
    <input type="text" placeholder="MM-YY">
  </div>
</form>

Did this page help you?