Hide sensitive data
Automatically blur sensitive UI elements in your app during recordings.
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.
Plan Availability: Pro and Enterprise only
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.
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.
Setting Up Blur
Add CSS selectors
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-fieldThese follow standard CSS selector syntax — the same format used by the browser's querySelector() API.
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.
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.
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.
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:
In your browser, right-click the element that contains sensitive data.
Select Inspect to open the developer tools.
Look at the highlighted HTML element and note its class name or ID.
Selector syntax:
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:
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.
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.
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.
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.
Technical Details
How the blur effect is applied
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.
How cross-tab synchronization works
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.
How blur is removed after a session
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.
How the recorder communicates with the widget
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.
Frequently Asked Questions
Does the blur appear in the recorded video?
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.
Can agents toggle blur on and off during a recording?
Yes. Agents can use the eye icon in the recorder to toggle blur anytime.
Does the blur work across multiple browser tabs?
Yes. Blur syncs across tabs for the same site using localStorage events.
What if the blur stays on after the recording ends?
Blur is cleared when the tab is closed or reloaded. If it persists, close the tab and reopen it.
I already installed the snippet for Console Logs. Do I need to add it again?
No. The embed snippet is shared by blur and console logs. If it’s already installed, just enable blur and add your selectors.
Last updated
Was this helpful?