Examples of managed elements grouped by category + type.
Managed elements elements with data-consent-category are blocked until consent is granted
SCRIPT
necessary
data-consent-category="necessary"
Always runs
waiting...
SCRIPT
analytics
data-consent-category="analytics"
Requires analytics consent
waiting...
EXT SCRIPT
analytics
data-consent-category="analytics" data-src="…"
External src, requires analytics
waiting...
SCRIPT
marketing
data-consent-category="marketing"
Requires marketing consent
waiting...
SCRIPT
functional
data-consent-category="functional"
Requires functional consent
waiting...
IGNORED
marketing
data-consent-category="marketing" data-consent-ignore
Runs regardless of consent
waiting...
IFRAME
functional
data-consent-category="functional" data-src="…"
YouTube embed, requires functional
waiting...
PIXEL
marketing
data-consent-category="marketing" data-src="…"
1×1 img, requires marketing
waiting...
How this works
consent.js is the core library. It defines 4 consent categories and scans the page for elements with data-consent-category. It does not handle UI or storage — those are plugged in via callbacks. Internal events are logged directly to the browser console.
In this demo the callbacks are wired to:
- localStorage — saves/loads your consent choice
- a custom dialog — shown when no consent exists yet
When you make a choice the page reloads, the library re-reads the saved consent, and activates only the elements whose category you allowed.