Hide sensitive data

How to blur sensitive data in your web app automatically

Requirement: Birdie snippet has to be installed

Birdie has the ability to automatically hide any sensitive data in your web app.

To achieve this, Birdie blurs only the pieces of text that need to be masked, keeping the entire UI of your app intact. This way, you and your customers can use Birdie safely without losing context.

1. Go to settings -> security.

2. Target your data to hide: To blur sensitive information with Birdie, you need to identify the specific parts of your app that contain this information. This is done by indicating the tag name, class, or id of the elements to target, following the syntax of the DOM querySelector() API. If your app already has specific classes that identify the sensitive portions, you can simply use them as selectors. To find the class name or id, you can right-click on the element > Inspect and report the corresponding identifier in your setting target field. Class names must be prefixed with a dot, like this: .like-this-class. Ids must be prefixed with a hash, like this: #like-this-id. You can also use tag names without prefixes, like this: button. 📌 Note that you must write at least one selector to enable the blurring feature.

Screen recoding behavior

Birdie hides sensitive data on the webapp while the Birdie recorder is active. Both agents and customers cannot see sensitive data.

📌Note that Birdie only hides sensitive data for incoming recordings.

CoBrowsing behavior

Birdie displays **** for sensitive data on the agent side. However, on the customer side, the web app is displayed as usual.