ExpressConsent

Highlighting & Masking

Emphasize the consent action in your visual record and redact sensitive fields before they leave the browser.

Highlighting

Highlighting draws attention to the exact submit button/action the user clicked in the visual record. This is especially useful when your form has multiple submit buttons (for example, multiple-choice options) and you need to show which specific button was used. Your live page is not affected.

1. Add a label to the element

html
<!-- Mark the consent action element -->
<button type="submit" data-expressconsent-highlight-label="consent-submit">
  I agree &amp; submit
</button>

Multiple buttons

Give each button a unique label, then pass the one the user actually clicked as highlightTarget.

html
<!-- Multiple choice: each button gets a unique label -->
<button type="submit" data-expressconsent-highlight-label="opt-in-calls">
  Yes, call me
</button>
<button type="submit" data-expressconsent-highlight-label="opt-in-texts">
  Yes, text me
</button>

2. Pass the token to captureCDR

javascript
// Pass the label that matches the button the user clicked.
await window.ExpressConsent.captureCDR({
  highlightTarget: "consent-submit",
});

Masking

Masking redacts sensitive data (SSN, CVV, passwords) from the evidence before it leaves the browser. Masked data is gone permanently — you cannot recover it, even as the org owner.

Mask a single input

html
<label>
  SSN
  <input name="ssn" data-expressconsent-mask />
</label>

Mask an entire section

The attribute is inherited by descendants. Place it on a container to redact everything inside.

html
<section data-expressconsent-mask>
  <h3>Payment details</h3>
  <input name="cardNumber" />
  <input name="cvv" />
  <!-- Everything inside is masked -->
</section>

Common pitfalls

  • Highlight doesn’t appear: token mismatch between the attribute and highlightTarget
  • Masking too much: placing data-expressconsent-mask on a broad container accidentally redacts consent UI, weakening the evidence
  • Element not in page yet: the label is added asynchronously after captureCDR() runs

Next

captureCDR() reference