Consent Pro HTML Attributes Reference

Complete reference guide for HTML attributes used with Consent Pro, based on actual implementation. These attributes allow you to create fully customized GDPR and CCPA compliant cookie consent banners using Webflow's native Designer.

Table of Contents

• Core Structure
• Banner Elements
• Settings Panel
• Action Buttons
• Styling Guidelines

Core Structure

fs-consent-element

Identifies elements within the consent system.

Required Elements

internal-component - Root container for all consent elements

<div fs-consent-element="internal-component">
  <!-- All consent UI goes here -->
</div>

banner - Main consent notice shown to users

<div fs-consent-element="banner">
  <p>Cookie consent message...</p>
  <a fs-consent-element="allow" href="#">Accept</a>
</div>

Optional Elements

preferences - Detailed consent preferences modal

<div fs-consent-element="preferences">
  <form fs-consent-element="form">
    <!-- Category checkboxes -->
    <!-- Submit button -->
  </form>
</div>

fixed-preferences - Always-visible settings access. This can be placed anywhere in your page design, like the footer and it can be used to toggle the Preferences banner.

<div fs-consent-element="fixed-preferences">
  <div fs-consent-element="open-preferences">Settings</div>
</div>

Action Elements

allow - Accept all cookies

<a fs-consent-element="allow" href="#" class="w-button">Accept</a>

deny - Reject optional cookies

<a fs-consent-element="deny" href="#" class="w-button">Reject</a>

open-preferences - Open detailed settings

<a fs-consent-element="open-preferences" href="#">Preferences</a>

close - Close current interface

<div fs-consent-element="close" role="button">×</div>

Form Elements

form - Container for preference checkboxes

<form fs-consent-element="form">
  <!-- Category checkboxes -->
  <input type="submit" value="Save Preferences" />
</form>

Checkbox Elements:

• checkbox-essential - Essential cookies (always checked)
• checkbox-analytics - Analytics tracking
• checkbox-marketing - Marketing/advertising
• checkbox-personalization - Personalization features

<input type="checkbox" fs-consent-element="checkbox-marketing" />

Internal Elements

These are used internally by the system:

internal-banner-text - Dynamic button text reference

<strong fs-consent-element="internal-banner-text">"Accept"</strong>

internal-buttons-wrapper - Button container

<div fs-consent-element="internal-buttons-wrapper">
  <!-- Action buttons -->
</div>

internal-categories-wrapper - Categories container

<div fs-consent-element="internal-categories-wrapper">
  <!-- Category options -->
</div>

internal-category-[type] - Individual category containers

<div fs-consent-element="internal-category-essential">
  <!-- Essential category UI -->
</div>

Configuration Attributes

Applied to the internal-component element:

fs-consent-styledcategories - Controls category styling

<div fs-consent-styledcategories="false"></div>

Examples

Simple Banner (Accept Only)

<div fs-consent-element="internal-component">
  <div fs-consent-element="banner">
    <p>Cookie notice with privacy policy link</p>
    <a fs-consent-element="allow" href="#" class="w-button">Ok, got it</a>
  </div>
</div>

Full Featured Implementation

<div fs-consent-element="internal-component" fs-consent-styledcategories="false">
  <!-- Banner -->
  <div fs-consent-element="banner">
    <p>
      By clicking <strong fs-consent-element="internal-banner-text">"Accept"</strong>, you agree to storing cookies...
    </p>
    <div fs-consent-element="internal-buttons-wrapper">
      <a fs-consent-element="open-preferences" href="#">Preferences</a>
      <a fs-consent-element="deny" href="#" class="w-button">Reject</a>
      <a fs-consent-element="allow" href="#" class="w-button">Accept</a>
    </div>
  </div>

  <!-- Preferences Modal -->
  <div fs-consent-element="preferences">
    <form fs-consent-element="form">
      <div fs-consent-element="internal-categories-wrapper">
        <!-- Essential Category -->
        <div fs-consent-element="internal-category-essential">
          <div>Essentials - Always active</div>
          <p>Necessary for the site to function.</p>
        </div>

        <!-- Marketing Category -->
        <div fs-consent-element="internal-category-marketing">
          <label>
            <input type="checkbox" fs-consent-element="checkbox-marketing" />
            Marketing
          </label>
          <p>Used for targeted advertising.</p>
        </div>

        <!-- Analytics Category -->
        <div fs-consent-element="internal-category-analytics">
          <label>
            <input type="checkbox" fs-consent-element="checkbox-analytics" />
            Analytics
          </label>
          <p>Measures usage and improves experience.</p>
        </div>

        <!-- Personalization Category -->
        <div fs-consent-element="internal-category-personalization">
          <label>
            <input type="checkbox" fs-consent-element="checkbox-personalization" />
            Personalization
          </label>
          <p>Remembers preferences and provides enhanced features.</p>
        </div>
      </div>

      <!-- Form buttons -->
      <div>
        <a fs-consent-element="deny" href="#" class="w-button">Reject All</a>
        <a fs-consent-element="allow" href="#" class="w-button">Accept All</a>
        <input type="submit" value="Save Preferences" />
      </div>

      <!-- Close button -->
      <div fs-consent-element="close">×</div>
    </form>
  </div>

  <!-- Fixed preferences access -->
  <div fs-consent-element="fixed-preferences">
    <div fs-consent-element="open-preferences">
      <div>🍪</div>
      <div>Preferences</div>
    </div>
  </div>
</div>

This documentation reflects the actual structure used in your implementation, focusing on the core elements and their specific roles in the consent system.