# HTML Attributes Reference

Complete reference for HTML attributes used to build consent banners, preferences modals, and UI elements in Consent Pro.

## Table of Contents

- [Attribute Overview](#attribute-overview)
- [Core Attributes](#core-attributes)
- [Action Elements](#action-elements)
- [Form Elements](#form-elements)
- [Tracker Elements](#tracker-elements)
- [Template Elements](#template-elements)
- [Styling Elements](#styling-elements)
- [Best Practices](#best-practices)

## Attribute Overview

Consent Pro 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

### Custom Placeholders

You can create your own placeholder elements anywhere on your page and use the [JavaScript API](./api.md#events-api) to toggle their visibility based on consent state.

This is useful when:

- You embed third-party content (maps, videos, social feeds) outside of iframes
- You use custom scripts that render content into a container
- You want full control over placeholder design and positioning

#### Example

```html
<div style="position: relative;">
  <!-- Your embedded content (hidden by default) -->
  <div id="my-analytics-widget" style="display: none;"></div>

  <!-- Placeholder overlay -->
  <div
    id="analytics-placeholder"
    style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.85); color: #fff; font-size: 14px; text-align: center; z-index: 1;"
  >
    <div style="padding: 16px; max-width: 280px;">This content is blocked. Accept analytics cookies to load it.</div>
  </div>
</div>

<script>
  window.FinsweetConsentPro = window.FinsweetConsentPro || [];
  window.FinsweetConsentPro.push([
    'consent',
    (FinsweetConsentPro) => {
      const placeholder = document.getElementById('analytics-placeholder');
      const widget = document.getElementById('my-analytics-widget');

      const update = (choices) => {
        if (choices.analytics) {
          placeholder.style.display = 'none';
          widget.style.display = 'block';

          return;
        }

        placeholder.style.display = 'flex';
        widget.style.display = 'none';
      };

      // Check initial consent state
      update(FinsweetConsentPro.consents.get());

      // React to future consent changes
      FinsweetConsentPro.on('consent-updated', (detail) => {
        update(detail.choices);
      });
    },
  ]);
</script>
```

### 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-preferences` buttons 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](./api.md) - JavaScript API documentation
- [Events](./events.md) - Event system and callbacks
- [Webflow Migration Guide](/webflow/migration) - Upgrade a legacy Webflow implementation
- [Web App Setup](/web-app/) - Set up the current runtime on another platform