Skip to content
eConsent API

Whitelist Inspector

The Whitelist Inspector is an in-app browser that lets you navigate to your website and visually select which form fields eConsent should capture.

Using the Whitelist Inspector

See how to use the in-app browser to navigate your website and visually select form fields for consent tracking.

~3 min
Instead of writing CSS selectors manually, you click the elements you want to track.

Why whitelisting matters

Section titled “Why whitelisting matters”

eConsent uses a privacy-by-default approach. The tracker does not scrape or capture all form data. It only captures the fields you explicitly authorize. This ensures compliance with privacy regulations and gives you full control over what data is collected.

By default, eConsent always captures:

  • Core PII fields: first name, last name, email, phone, address
  • Consent elements (elements tagged with data-consent-type)
  • Auto-tagged elements (elements with IDs starting with econsent- or data-econsent="true")

The Whitelist Inspector lets you add additional fields beyond these defaults, such as custom form fields, dropdown selections, or any other input your compliance workflow requires. Whitelisted fields are captured with their values hashed.

Using the Inspector

Section titled “Using the Inspector”

  1. Navigate to the Inspector

    Go to Tools > Whitelist Inspector in your eConsent dashboard at app.econsent.org.

  2. Load your website

    Enter your website URL and click Load Page. Your site loads inside an embedded browser within the dashboard. The Inspector uses a proxy to bypass X-Frame-Options headers, so most sites will load successfully.

    Whitelist Inspector with website loaded and elements highlighted

  3. Enable Whitelist Mode

    Make sure the Inspector is in Whitelist Mode (not Consent Selector Mode). The page will highlight interactive elements as you hover over them.

  4. Click elements to whitelist

    Click on any form field, input, or element you want eConsent to capture. Each clicked element appears as a badge in the right panel showing:

    • The generated CSS selector
    • The element’s tag name and label text
    • A preview of the selected element

  5. Select properties to apply

    Choose which of your properties (websites) should use this whitelist configuration. You can apply the same whitelist to multiple properties at once.

  6. Choose a merge strategy

    • Add to Existing (default): Appends new selectors to your current whitelist without removing existing ones.
    • Replace All: Removes all existing selectors and uses only the new selection.

  7. Save

    Click Save to apply the whitelist. eConsent will immediately begin capturing data from the selected fields on the next tracked session.

Selector generation

Section titled “Selector generation”

When you click an element, the Inspector automatically generates the most specific CSS selector available, using this priority order:

PrioritySelector typeExample
1ID selector#loan-amount
2Class selector.form-input-ssn
3Attribute selectorinput[name="annual_income"]

Capture priority

Section titled “Capture priority”

When the tracker encounters a form field during a session, it determines how to handle the data using this cascade:

PrioritySourceAction
1Whitelisted elements (Inspector)Captured, values hashed
2Core PII fields (name, email, phone, address)Captured, values hashed
3Consent elements (data-consent-type)Captured, values stored
4Masked fields (property maskedFields config)Captured, values hashed
5Everything elseNot captured

Manual selector entry

Section titled “Manual selector entry”

If you prefer to add CSS selectors manually instead of using the visual picker, you can configure the maskedFields property on your property settings. Selectors follow standard CSS syntax:

/* ID selector */
#custom-field


/* Class selector */
.form-input-ssn


/* Attribute selector */
input[name="loan_amount"]


/* Combined selector */
form#apply input.required

Applying to multiple properties

Section titled “Applying to multiple properties”

If you manage multiple websites, you can apply the same whitelist configuration across properties in a single step. During the save step, select all properties that share the same form structure.

Each property maintains its own independent whitelist, so changes to one property do not affect others unless you explicitly apply them.

Troubleshooting

Section titled “Troubleshooting”

Page does not load in the Inspector

  • The Inspector uses a proxy to bypass iframe restrictions. If the page still fails to load, try a different URL path on your site or contact support.

Clicks are not registering elements

  • Make sure the Inspector is enabled (the toggle should be active). If elements are dynamically loaded after page render, wait for the page to fully load before clicking.

Selector not matching in production

  • If your site uses dynamically generated class names (e.g., CSS modules or hashed classes), use attribute selectors like input[name="field"] instead of class-based selectors.

Next steps

Section titled “Next steps”