# Hide sensitive data

Screendesk can automatically blur sensitive areas of your web application during recordings. The blur effect covers only the elements you specify using CSS selectors, so the rest of the application remains fully visible. This lets support agents record and review sessions without exposing passwords, credit card numbers, personal identifiers, or other confidential data.

{% hint style="info" %}
**Plan Availability:** Pro and Enterprise only
{% endhint %}

***

### How It Works

When blur is enabled, Screendesk applies a visual overlay to the HTML elements that match your configured CSS selectors. The effect uses the element's own text color to fill it completely, making the content unreadable while preserving the layout and shape of the page.

The blur is applied in real time when a recording session starts. The Screendesk snippet installed on your web application communicates with the recorder over WebSockets, and the blur state is synchronized across all open tabs of the same browser session using localStorage events.

Agents can toggle the blur on and off during a recording using the eye icon in the recorder interface. When the recording session ends or the recorder page is closed, the blur is automatically removed.

***

### Prerequisites

Before you can use the blur feature, the **Screendesk embed snippet** must be installed on your web application. This is the same snippet used by the Console Logs feature — if you have already installed it for console logs, you do not need to add it again.

{% hint style="info" %}
The embed snippet is a small JavaScript tag that loads the Screendesk widget on your pages. Without it, Screendesk cannot communicate with your web application to apply or remove the blur.
{% endhint %}

***

### Setting Up Blur

{% stepper %}
{% step %}

#### Go to Web App Blur settings

Navigate to **Account Settings → Web App Blur** (listed under the Security section in the sidebar).
{% endstep %}

{% step %}

#### Enable the toggle

<figure><img src="https://3820804400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfW6XSzJSKsNyZnOkSJPt%2Fuploads%2FxFUInM9lerEWAbmiiqJs%2FCleanShot%202026-02-09%20at%2012.49.32%402x.png?alt=media&#x26;token=3660a599-3519-4e61-9679-0927b4d43001" alt=""><figcaption></figcaption></figure>

Switch on the blur toggle at the top of the page. This activates the feature for your workspace.
{% endstep %}

{% step %}

#### Add CSS selectors

<figure><img src="https://3820804400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfW6XSzJSKsNyZnOkSJPt%2Fuploads%2Fs8JyjB97x3Hmg43ETGsa%2FCleanShot%202026-02-09%20at%2012.49.52%402x.png?alt=media&#x26;token=b7820236-6e09-4470-9014-2b999bd935f1" alt=""><figcaption></figcaption></figure>

In the **Apply blur to these selectors** field, enter the CSS selectors for the elements you want to blur, separated by commas.

For example:

```
#account-number, .credit-card, .ssn-field
```

These follow standard CSS selector syntax — the same format used by the browser's `querySelector()` API.

{% hint style="warning" %}
You must add at least one selector for the blur feature to activate. The toggle alone is not enough — both the toggle and at least one selector are required.
{% endhint %}
{% endstep %}

{% step %}

#### Save

Click **Save** to apply your settings.
{% endstep %}

{% step %}

#### Install the embed snippet

If you haven't already installed the Screendesk snippet, copy the code shown in **Step 1** on the settings page and add it before the closing `</body>` tag on every page of your web application where you want blurring to work.

You can also click **Email instructions** to send the snippet to a developer on your team.

{% hint style="info" %}
Do not add the snippet twice. If you have already installed it for the Console Logs feature, it will also handle blurring — no additional installation is needed.
{% endhint %}
{% endstep %}

{% step %}

#### Verify the installation

Click the **Verify** button in **Step 2** on the settings page. Paste a URL from your site into the dialog and click **Check setup**. Screendesk will check that the embed snippet is present on that page.
{% endstep %}
{% endstepper %}

***

### Choosing CSS Selectors

To blur the right content, you need to identify the CSS selectors for the sensitive elements in your web application.

**How to find a selector:**

1. In your browser, right-click the element that contains sensitive data.
2. Select **Inspect** to open the developer tools.
3. Look at the highlighted HTML element and note its class name or ID.

**Selector syntax:**

| Selector type | Syntax               | Example                  |
| ------------- | -------------------- | ------------------------ |
| Class name    | Prefix with a dot    | `.credit-card-number`    |
| ID            | Prefix with a hash   | `#ssn-field`             |
| Tag name      | Use the tag directly | `input[type="password"]` |

Enter multiple selectors separated by commas:

```
.account-balance, #routing-number, .pii-field
```

{% hint style="info" %}
If your application already marks sensitive fields with a specific CSS class (for example, `.sensitive` or `.pii`), you can use that class directly as your selector. This is the simplest approach and avoids having to list every field individually.
{% endhint %}

***

### Using Blur During a Recording

When blur is enabled and at least one selector is configured, the recorder interface displays an eye icon in the top-right corner.

**Default behavior:** Blur is **on** when the recording starts. Sensitive elements matching your selectors are hidden automatically as soon as the recorder connects to the page.

<figure><img src="https://3820804400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfW6XSzJSKsNyZnOkSJPt%2Fuploads%2FrihFWxuZdARdq55Oh4NF%2FCleanShot%202026-02-09%20at%2012.51.36%402x.png?alt=media&#x26;token=aa33a82d-481d-4e41-a870-391ba8e7b639" alt=""><figcaption></figcaption></figure>

| Icon             | State                                     | Tooltip                                                                       |
| ---------------- | ----------------------------------------- | ----------------------------------------------------------------------------- |
| Eye with a slash | Blur is active — sensitive data is hidden | "Sensitive data are hidden when recording. Click to display sensitive data."  |
| Open eye         | Blur is off — sensitive data is visible   | "Sensitive data are not hidden when recording. Click to hide sensitive data." |

Clicking the icon toggles between the two states in real time. The change applies immediately on the customer's web application.

{% hint style="warning" %}
If you close the recorder page while blur is still active, the browser may show a confirmation dialog: "Sensitive data may still be blurred. Are you sure you want to leave?" This gives the system time to send the unblur command before the page closes.
{% endhint %}

***

### Technical Details

<details>

<summary>How the blur effect is applied</summary>

The blur effect uses a CSS `box-shadow` property: `inset 5em 5em currentColor`. This fills the element with its own text color, completely obscuring the content while maintaining the element's size and position in the layout. This approach works regardless of the element's background color.

</details>

<details>

<summary>How cross-tab synchronization works</summary>

Screendesk uses `localStorage` to synchronize the blur state across tabs. When the recorder sends a blur or unblur command, the widget on your web application writes to a `localStorage` key. The browser fires a `storage` event in all other tabs that share the same origin, causing them to apply or remove the blur as well. This means that if a customer has your application open in multiple tabs, all tabs are blurred simultaneously.

</details>

<details>

<summary>How blur is removed after a session</summary>

The `localStorage` key that controls blur is removed on the `beforeunload` event when the tab is closed or navigated away from. This means the blur does not persist after the page is refreshed or the tab is closed and reopened. If the blur persists unexpectedly after a recording ends, closing and reopening the tab will clear it.

</details>

<details>

<summary>How the recorder communicates with the widget</summary>

The recorder and the widget communicate over WebSockets via Pusher. When the recorder starts, it subscribes to a private channel identified by a browser fingerprint. The recorder sends `blurSensitiveInfo` or `unblurSensitiveInfo` messages with the configured CSS selectors attached. The widget receives these messages and applies or removes the blur effect accordingly. It sends an acknowledgment (`client-ack`) back to the recorder to confirm the change was applied.

</details>

***

### Frequently Asked Questions

<details>

<summary>Does the blur appear in the recorded video?</summary>

No. Blur is applied live during the session. It is not baked into the video.

The recording captures whatever was visible at the time. If blur was on, you’ll see blurred elements. If an agent turned blur off, you’ll see the unblurred content.

</details>

<details>

<summary>Can agents toggle blur on and off during a recording?</summary>

Yes. Agents can use the eye icon in the recorder to toggle blur anytime.

</details>

<details>

<summary>Does the blur work across multiple browser tabs?</summary>

Yes. Blur syncs across tabs for the same site using `localStorage` events.

</details>

<details>

<summary>What if the blur stays on after the recording ends?</summary>

Blur is cleared when the tab is closed or reloaded. If it persists, close the tab and reopen it.

</details>

<details>

<summary>I already installed the snippet for Console Logs. Do I need to add it again?</summary>

No. The embed snippet is shared by blur and console logs. If it’s already installed, just enable blur and add your selectors.

</details>

<details>

<summary>Can I test my selectors before going live?</summary>

Yes. Save selectors, confirm the snippet is installed, then start a recording on your site. If the right elements blur, your selectors work.

</details>

<details>

<summary>Are blur setting changes logged in audit logs?</summary>

Yes. Changes to the blur toggle are tracked in audit logs on the Enterprise plan.

</details>