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

# Protecting sensitive data

> Keep parts of your app out of what the in-app expert reads: tags, classes, selectors and the automatic rules.

The in-app expert (the [web widget's](/web-widget#proactive-help-copilot)
proactive help) reads the **structure** of the screen a visitor is on: button and
link names, form labels, headings and short labels. It never reads what anyone
types into a field, or anything inside lists and tables. This page covers how to
keep more of your app out of what it reads, and what it masks on its own.

Everything here happens **in the visitor's browser**, before anything is sent to
Boom. Protected content never leaves the page.

## Two ways to protect a part of the page

| | Hide completely | Keep layout, hide text |
| - | - | - |
| Attribute | `data-boom-private` | `data-boom-pii` |
| Class | `boom-private` | `boom-pii` |
| What the expert gets | Nothing. For the expert, the region does not exist. | That a control is there (for example "a text box, filled") but never its label or any text. Every label and text inside reads `[redacted]`. |
| Can the expert point at it? | No | No. It never rings or guides to a control in this region. |

Use **hide completely** for regions with nothing the expert needs: account
details, balances, a profile card. Use **keep layout, hide text** for a form or
panel where knowing that the controls exist helps the expert understand the
screen, but their labels or contents would identify someone (for example, a
contact list whose buttons are named after people).

```html theme={null}
<!-- Nothing in here is read -->
<section data-boom-private>
  <h2>Maria Lopez</h2>
  <p>Balance: $1,200.00</p>
</section>

<!-- The expert sees two controls here, named [redacted] -->
<div class="boom-pii">
  <button>Message Maria</button>
  <button>Call Maria</button>
</div>
```

The class works the same as the attribute, for apps whose components let you set a
`class` but not arbitrary attributes. Either one protects the element and
everything inside it.

You can also mark just a part of something. In `<h2>Welcome, <span
class="boom-pii">Maria</span></h2>`, the expert reads the heading as "Welcome,
\[redacted]"; the same goes for buttons, links and form labels. With
`boom-private` the part is left out entirely.

## Selectors, when you can't change the markup

If you can't edit the HTML (a third-party component, a template you don't own),
add CSS selectors in Boom instead: in the widget's settings, open the **In-app
expert** tab and use the **Protected content** card. Each selector is either
**Hide completely** or **Keep layout, hide text**, exactly like the attribute.

* Up to 50 selectors, each up to 200 characters.
* Any selector the browser understands: `.account-balance`, `#profile-card`,
  `[data-testid="user-name"]`, `table.users td:nth-child(2)`.
* Boom refuses a selector that would cover the whole page (`body`, `html`,
  `:root`, `*`). To stop the expert on a site, switch it off instead.
* If a visitor's browser can't parse one of your selectors, that one selector is
  ignored and the rest still apply.

Changes reach your site with the widget's next load (the loader is cached for a
few minutes).

## What is protected automatically

You don't need to mark these:

* **Anything typed into a field.** Only whether a field is empty or filled is
  read, and not even that for passwords.
* **Fields for personal data.** An input of type `password`, `email` or `tel`,
  and any field whose `autocomplete` names personal data (`name`, `given-name`,
  `family-name`, `email`, `tel`, `street-address`, `address-line1`,
  `postal-code`, `cc-number` and the other `cc-` values, `bday`,
  `one-time-code`, `current-password`, `new-password`, `username`, `sex`), are
  treated as **keep layout, hide text**: their labels read `[redacted]` and the
  expert never points at them. Fields for a company name or a country are not
  included.
* **Lists and tables.** Nothing inside list items, table rows and cells, or
  cards marked as `article` is read, except navigation menus and tab lists.
* **Hidden content.** Anything under `aria-hidden="true"`.
* **Patterns in any text it does read**, masked before anything is sent:

  | Pattern | Becomes |
  | - | - |
  | Email address | `[email]` |
  | Card number (13-19 digits that pass the card checksum) | `[card]` |
  | IBAN | `[iban]` |
  | Mexican CURP and RFC, Brazilian CPF and CNPJ, US Social Security number | `[id]` |
  | Phone numbers and other long numbers | `[number]` |
  | Ids in the page address (`/orders/48213/edit`) | `/orders/:id/edit` |

The masks recognize the usual written forms (a CPF as `123.456.789-09`, an SSN
as `123-45-6789`). A number written some other way may only be masked as
`[number]`, or not at all if it is short. Patterns are a safety net, not a
substitute for marking a region that shows personal data.

## What Boom keeps

The screen structure is used to decide whether to offer help and is not stored.
Boom's logs keep the page's route shape (ids removed) and the name of the control
the expert pointed to. Because a protected control is never pointed to, its name
never reaches those logs either.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.