Advanced Usage: Highlighting & Masking

ExpressConsent exposes two HTML attributes that let you control what reviewers notice in a snapshot and what never appears at all:

data-expressconsent-highlight-label — you add this to every actionable element (e.g. submit buttons). Give it a unique value (token). When you pass that same token to captureAndUpload() the corresponding element is automatically outlined in the stored image so reviewers can see exactly what was clicked.
data-expressconsent-mask — irreversibly redacts data before the snapshot is stored. Use it only for highly sensitive fields (e.g. SSN) that you yourself never want to be visible, even in your own account. Routine PII masking for lead buyers happens in a separate sharing workflow.

Below we’ll cover highlighting first, then masking.

Give the button a token using data-expressconsent-highlight-label, then pass that token as the second argument to captureAndUpload().

Name
highlightLabel
Type
string
Description
Optional second positional argument. When provided, it must match a value you placed in the page as data-expressconsent-highlight-label="<token>" on exactly one element. If omitted, the snapshot is taken without any element being outlined.
Name
Typical Usage
Description
Add data-expressconsent-highlight-label to each button (e.g. data-expressconsent-highlight-label="plan-gold") and pass that string (e.g. 'plan-gold') to captureAndUpload().

Example – Multiple Submit Buttons

<button type="submit" data-expressconsent-highlight-label="plan-gold" value="gold">Gold Plan</button>
<button type="submit" data-expressconsent-highlight-label="plan-silver" value="silver">Silver Plan</button>

form.addEventListener('submit', async (e) => {
  e.preventDefault()
  const token = e.submitter.getAttribute('data-expressconsent-highlight-label')
  await SnapshotTool.captureAndUpload({ plan: token }, token)
  form.submit()
})

If you cannot access the element reference, just hard-code the token:

await SnapshotTool.captureAndUpload(meta, 'plan-gold')

Masking Sensitive Data

Use data-expressconsent-mask sparingly to ensure that extremely sensitive values never leave the browser in readable form. Anything masked is blurred in the PNG and stripped from the JSON payload before it is uploaded.

Name
data-expressconsent-mask
Type
boolean
Description
Blurs the element and removes its textual data. Appropriate for Social Security numbers, CVV codes, or similar secrets.
Name
Scope
Description
The attribute is inherited by descendants, so placing it on a container hides everything inside.
Name
Important Note
Description
This is not the masking mechanism used when you share a lead with a buyer. That downstream masking is applied later. The attribute here prevents the data from appearing in any copy of the snapshot, including your own.

Example – Redacting SSN

<input type="text" name="ssn" data-expressconsent-mask placeholder="SSN" />

Example – Redacting a Section

<section data-expressconsent-mask>
  <label>
    Tax ID
    <input name="taxId" />
  </label>
  <!-- everything here is redacted -->
</section>

Frequently Asked Questions

Will these attributes affect my site’s design?

No. ExpressConsent’s CSS runs only inside the secure headless browser that captures the snapshot. Your live site’s styles remain untouched.

What if JavaScript adds the attribute after capture?

The snapshot is taken immediately after your captureAndUpload() call. Ensure the attribute is already present (or add it synchronously) before invoking the function.

Can I style the highlight differently?

Absolutely. Because the highlighting happens in an isolated environment, you’re free to add your own visual cues (e.g. brand colours) without impacting the compliance copy stored in ExpressConsent.

More Advanced Features Coming Soon

Stay tuned for upcoming documentation on:

Automatic Anura risk-signal integration and scoring
Multi-party lead sharing workflows (buyer-specific masking, delayed reveal)
Advanced event hooks for partial submissions and custom audit trails

Have a use-case in mind? Let us know!

Back to Documentation

Read the Quickstart

View API Reference