> ## Documentation Index
> Fetch the complete documentation index at: https://jam.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Auto-blur

> Hide sensitive content automatically during Recording Link sessions. Passwords, personal info, and secrets never reach Jam's servers.

Auto-blur hides sensitive content in real time during Recording Link sessions. Blurred content never reaches Jam's servers.

## How it works

The Jam.js snippet automatically detects and blurs sensitive content during recording sessions. When a customer records:

1. Sensitive elements are blurred in real time. If an end-user needs to access blurred content, they can pause the recording.
2. Only the blurred version is captured. Sensitive data never reaches Jam's servers.
3. The final Jam shows blurred content exactly as during recording. Console logs show `<redacted>`.

**What gets blurred:** only the elements you want

**Applies to:** Jams requested via Intercom or Recording Link

<Info>By default, Jam recognizes the same privacy selectors used by FullStory, Hotjar, LogRocket, Sentry, and others. If you're already using these tools, your existing privacy setup works automatically with Jam.</Info>

## Setup

<Warning>Blurred content is only supported on sites with verified Jam.js installations. Follow the Recording Links setup guide before proceeding.</Warning>

Blurring is enabled by default once the snippet is installed.

### Quickstart

#### Want to blur something?

Use data attributes:

```html theme={"theme":"css-variables"}
<span data-jam-blur>{ccNumber}</span>
```

Or meta tag:

```html theme={"theme":"css-variables"}
<meta name="jam:blur" content=".secret-stuff" />
```

Or SDK:

```javascript theme={"theme":"css-variables"}
jam.initialize({ blurSelectors: ".secret-stuff" });
```

#### Want to unblur something?

```html theme={"theme":"css-variables"}
<span class="cc-number" data-jam-blur="no">{ccNumber}</span>
```

### What gets blurred automatically

#### Standard selectors

* **Jam:** `[data-jam-blur]`
* **rrweb:** `.rr-block`, `.rr-mask`, `.rr-ignore`
* **Standard HTML autocomplete attributes:** `cc-number`, `cc-exp`, `cc-csc`, `tel`, `email`
* **Common name/id patterns** for SSN, bank accounts, credit cards, photo IDs, driver's license

#### Session replay tools

* **FullStory:** `.fs-exclude`, `.fs-mask`, `.fs-block`, `.fs-unmask` (unblur)
* **Hotjar:** `[data-hj-suppress]`, `[data-hj-masked]`
* **LogRocket:** `[data-private]`
* **Microsoft Clarity:** `[data-clarity-mask]`, `[data-clarity-unmask]` (unblur)
* **Sentry:** `.sentry-block`, `.sentry-mask`, `[data-sentry-block]`, `[data-sentry-mask]`
* **OpenReplay:** `[data-openreplay-obscured]`, `[data-openreplay-hidden]`
* **Highlight.io:** `.highlight-block`, `.highlight-mask`, `.highlight-ignore`
* **ContentSquare:** `[data-cs-mask]`, `[data-cs-encrypt]`, `[data-cs-capture]` (unblur)
* **Matomo:** `[data-matomo-mask]`

#### Analytics tools

* **Heap:** `[data-heap-redact-text]`, `[data-heap-redact-attributes]`, `[data-heap-ignore]`, `.heap-ignore`
* **Amplitude:** `[data-amp-mask]`, `[data-amp-unmask]` (unblur)

### Add custom selectors

#### Using SDK

```javascript theme={"theme":"css-variables"}
import * as jam from "@jam.dev/recording-links/sdk";

jam.initialize({ blurSelectors: ".my-custom-blur-class" });

// or array
jam.initialize({ blurSelectors: [".blur-class-1", ".blur-class-2"] });

// or function
jam.initialize({ blurSelectors: () => `.my-${Math.ceil(Math.random() * 100)}-blur-class` });
```

#### Using script tag with meta tags

```html theme={"theme":"css-variables"}
<meta name="jam:blur" content=".my-custom-blur-class" />
```

### Opt out of blurring for specific elements

Use `[data-jam-blur="no"]`:

```html theme={"theme":"css-variables"}
<div class="rr-block" data-jam-blur="no">Blurred in rrweb, but not in Jam</div>
```

### Test before you ship

<Steps>
  <Step title="Create a Recording Link">
    Create a Recording Link using your verified recording URL.
  </Step>

  <Step title="Start a test recording">
    Click your own link and start recording.
  </Step>

  <Step title="Visit pages with sensitive content">
    Navigate to pages that should be blurred and confirm the behavior.
  </Step>
</Steps>

### Limitations

* Content in iframes cannot be selectively blurred
* Flashes of unblurred content may occur during captured pageloads
* When browser window is resized during recording, blurred content may briefly become visible