(Optional) Configure privacy settings

User privacy is a critical consideration when recording session replays. Although default settings are designed to protect sensitive information, you may need to adjust privacy configurations to meet specific needs. This section explains how to mask, block, or ignore certain data to comply with privacy standards while maintaining the functionality of session replays.

By default, all text and inputs are replaced with asterisks. Here's an example of how a replay looks with default privacy:

If this setting is appropriate, move on to the next step.

If you need to customize what content or user input is captured, you have options to mask, block, or ignore specific classes and attributes of content or user input. Make sure to check with your privacy team before changing the privacy settings.

Mask sensitive text

You can mask sensitive text, which means the text will be replaced with asterisks (*). For example, you can mask a user's account ID that shows in a URL.

To specify which input should be masked, you have a few options:

On the Application settings page, add your own CSS selectors or check the masking boxes. Note that using mask selectors won't mask user input, so if you need to hide user input, we recommend using block selectors.
Add our CSS class nr-mask or attribute data-nr-mask to your webpage HTML.
For example, to mask an account ID from showing in the URL, add nr-mask to the <div> containing the account ID:
<div>Account ID: <span class="nr-mask">99881123</span></div>
These options use an asterisk (*) to mask all text in that element, hiding the actual text but revealing the number of characters entered. However, asterisks aren't valid numbers, so masking number type-specific fields such as telephone or credit card numbers will result in a blank field in a replay.

Block site content

You can block entire sections of content on your site, which means the section will appear as an empty placeholder in session replay. For example, if you have an image on your About Us webpage and don’t need it captured, you could block the class containing the image.

To block specific classes or attributes, you have a few options:

On the Application settings page, add your CSS selectors in the *Block selectors field.
Manually add our CSS class nr-block or attribute data-nr-block to your webpage HTML. For example, if you wanted to block irrelevant text and images from session replay, add nr-block to <div class>:
```
<html>
  <head>
    <title>Sample image and text</title>
  </head>
  <body>
    <div class="image-text-container nr-block">
      <img src="https://example.com/image.png" alt="Image description" />
    </div>
  </body>
</html>
```

Ignore user input

You can ignore changes to a user input field, which means the input field will still be displayed in the replay, but you won't display changes to the value. For example, you could ignore the class containing the email address or credit card fields. Password input fields are always masked.

To ignore input, add the CSS class nr-ignore to the input field’s class name. For example, if you want to ignore sensitive information on a billing page, add class="nr-ignore" to <input type>:

<div class="sensitive-information">
  <h2>Sensitive Information</h2>
  <p>
    Credit card number:
    <input type="number" class="nr-ignore" id="creditCardNumber" />
  </p>
  <p>
    Expiration date:
    <input type="number" class="nr-ignore" id="expirationDate" />
  </p>
  <p>CVV code: <input type="number" class="nr-ignore" id="cvvCode" /></p>
</div>

Mask sensitive text .css-21sua1{background:none;border:none;width:0;padding:0;}

Block site content

Ignore user input

Mask sensitive text