# Hide sensitive data

{% hint style="info" %}
**Requirement**: [**Birdie snippet**](https://docs.birdie.so/birdie-docs/~/changes/0VcwZq2bE3lijHZqXNlN/getting-started/snippet) has to be installed
{% endhint %}

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.&#x20;
2. Target your data to hide:\
   \
   To blur sensitive information iwith 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](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector).\
   \
   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: <mark style="color:red;">`.like-this-class`</mark>. Ids must be prefixed with a hash, like this: <mark style="color:red;">`#like-this-id`</mark>. You can also use tag names without prefixes, like this: <mark style="color:red;">`button`</mark>.\
   \
   📌 Note that you must write at least one selector to enable the blurring feature.

{% embed url="<https://youtu.be/lehv0nx_cKM>" %}

<details>

<summary><img src="https://3843507234-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FECPgvsGwy5oMz4WIZw3a%2Fuploads%2FEiNFH3C3slfAADOlQo5h%2FScreen-Recording.png?alt=media&#x26;token=8a0484a6-a589-4cd1-a47c-6204fb98259a" alt="" data-size="line"> Screen recoding behavior</summary>

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

<img src="https://3843507234-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FECPgvsGwy5oMz4WIZw3a%2Fuploads%2FGxb6ZayoEyLR4T1tR4aX%2FCapture%20d%E2%80%99e%CC%81cran%202023-05-25%20a%CC%80%2008.19.23.png?alt=media&#x26;token=4ededc91-02ec-4142-9be2-e9336da1f83f" alt="" data-size="original">

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

</details>

<details>

<summary><img src="https://3843507234-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FECPgvsGwy5oMz4WIZw3a%2Fuploads%2FUfo9k50koiUHcZhkfxwV%2FNo-download.png?alt=media&#x26;token=8e8c0e26-4fea-4409-8187-90e6900a24bf" alt="" data-size="line"> CoBrowsing behavior</summary>

Birdie displays \*\*\*\* for sensitive data on the agent side. However, on the customer side, the web app is displayed as usual.\
![](https://3843507234-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FECPgvsGwy5oMz4WIZw3a%2Fuploads%2F7j0co9C41FSCSeCp3Zi3%2FCapture%20d%E2%80%99e%CC%81cran%202023-05-25%20a%CC%80%2008.16.56.png?alt=media\&token=573b98ff-9394-4ee1-8384-a2fe9af3ae96)

</details>
