HTML Attributes Reference
Complete reference for HTML attributes used to build consent banners, preferences modals, and UI elements in Consent Pro V2.
Table of Contents
- Attribute Overview
- Core Attributes
- Action Elements
- Form Elements
- Tracker Elements
- Template Elements
- Styling Elements
- Best Practices
Attribute Overview
Consent Pro V2 uses HTML attributes to identify and bind functionality to DOM elements. All attributes follow the fs-consent-* naming pattern.
Primary Attributes
| Attribute | Purpose |
|---|---|
fs-consent-instance | Identifies a consent instance |
fs-consent-element | Defines element type/function |
fs-consent-tracker | Identifies tracker category sections |
fs-consent-template | Marks template elements |
fs-consent-field | Identifies dynamic content fields |
fs-consent-hide | Marks conditionally hidden elements |
fs-consent-styledcategories | Enables styled categories display |
Core Attributes
fs-consent-instance
Identifies a specific consent instance. Required on the root container.
Values: Instance identifier string (e.g., "eu-banner", "us-banner", "global")
fs-consent-element
Defines the type and function of an element. Most important attribute for UI binding.
| Value | Description |
|---|---|
"banner" | Main consent notice |
"preferences" | Detailed preferences modal |
"form" | Preferences form container |
"allow" | Accept all cookies |
"deny" | Reject optional cookies |
"fixed-preferences" | Fixed preferences trigger (e.g., footer) |
"open-preferences" | Open preferences modal |
"close" | Close current UI |
"donotsell" | CCPA Do Not Sell button |
"checkbox-analytics" | Analytics consent toggle |
"checkbox-marketing" | Marketing consent toggle |
"checkbox-personalization" | Personalization consent toggle |
"checkbox-donotsell" | Do Not Sell toggle |
"tracker-toggle" | Toggle tracker details |
"cookie-toggle" | Toggle cookie details |
"tracker-toggle-text" | Text content for tracker toggle button |
"placeholder" | Blocked iframe placeholder |
"internal-*" | Internal elements (solution-specific) |
fs-consent-styledcategories
Enables styled categories display mode.
Values: "true" or "false" (boolean)
Usage: When set to "true", enables enhanced styling for category sections in the preferences interface.
Action Elements
Allow Button
Accepts all cookie categories.
Deny Button
Rejects all optional cookies (keeps essential only).
Open Preferences Button
Opens the preferences modal.
Note: open-preferences can be placed anywhere, inside or outside the consent instance.
Close Button
Closes the current UI (banner or preferences).
Do Not Sell Button (CCPA)
Only available in opt-out and informational modes.
Form Elements
Checkbox Elements
Analytics Checkbox
Toggles consent for analytics cookies.
Marketing Checkbox
Toggles consent for marketing cookies.
Personalization Checkbox
Toggles consent for personalization cookies.
Do Not Sell Checkbox
Toggles CCPA "Do Not Sell" preference.
Form Submission
The form automatically handles submission when user clicks "Save Preferences".
Tracker Elements
Display detected trackers and cookies to users.
fs-consent-tracker
Identifies tracker category sections.
Values: Category name ("analytics", "marketing", "personalization", "essential")
Tracker Toggle Button
Toggles visibility of tracker details within a category section.
Cookie Toggle Button
Toggles visibility of individual cookie/tracker details.
Template Elements
Templates for dynamic content rendering.
fs-consent-template
Marks template elements that will be cloned for rendering.
Values:
"trackers"- Root template container"tracker-section"- Category section template"tracker-item"- Individual tracker template"cookie-item"- Individual cookie template"tracker-details"- Tracker details template"empty-state"- No trackers found template"placeholder"- Blocked iframe placeholder
Styling Elements
fs-consent-field
Identifies dynamic content fields within templates.
Values: Field name ("name", "purpose", "domain", "title", "content", "message", etc.)
fs-consent-hide
Marks elements that should be hidden if field value is empty.
Values: Field name to check
Internal Elements
Elements with fs-consent-element values prefixed with internal- (e.g., internal-component, internal-banner-text, internal-buttons-wrapper) are used internally by the Consent Pro solution for component structure and layout.
Best Practices
Multiple Triggers
- You can place multiple
open-preferencesbuttons throughout your site and it can be used to toggle Preferences to show - Consider adding preference triggers in navigation, footer, and banner areas
Next Steps
- API Reference - JavaScript API documentation
- Events - Event system and callbacks
- Migration Guide - Upgrading from V1