Back to Home
Documentation

FitConsent CMP Documentation

Complete setup and configuration guide for FitConsent CMP. Install cookie consent banners, configure Google Consent Mode V2 and Microsoft UET, and comply with GDPR, CCPA, and 15+ global privacy regulations.

IntroductionInstallation & SetupConfiguring Your BannerStorage DeclarationAdvanced Usage

Introduction

Welcome to the FitConsent Consent Management Platform (CMP) documentation. This guide covers everything you need to install, configure, and get the most out of FitConsent — from your first script tag to advanced consent data handling.

What is a Consent Management Platform (CMP)?

A Consent Management Platform (CMP) is a tool that helps websites legally collect and manage user consent for data processing, a requirement under privacy laws like GDPR in Europe and CCPA/CPRA in California. It powers the cookie banners you see on websites worldwide.

FitConsent goes beyond a basic banner. It provides the tools to comply with the law and to build user trust by optimising the consent experience. Our service includes full, automatic support for Google Consent Mode V2 and Microsoft UET Consent Mode, ensuring that your analytics and marketing tags adjust their behaviour based on user consent. This adaptability is crucial for maintaining data-driven marketing in a privacy-first world.

Key Features

•

Automatic Google Consent Mode V2 and Microsoft UET Consent Mode integration

•

Support for 16 global privacy frameworks: GDPR, CCPA, TCF, ePrivacy, UCPA, VCDPA, CTDPA, LGPD, PIPEDA, APPI, PDPA, APA-NZPA, FADP, POPIA, and more

•

100+ languages supported with automatic language detection

•

AI-powered banner optimizer (Pro+ plans)

•

Storage Declaration (cookie table) for privacy policy pages

•

Floating trigger button so users can update consent at any time

•

Real-time live preview in the dashboard

•

Built-in diagnostic tool to verify correct installation

Installation & Setup

Integrating FitConsent is designed to be quick and straightforward. Choose the method that best fits your website platform.

Prerequisites

Before you begin, make sure you have:

•

Created a FitConsent account and registered your website in the dashboard

•

Your unique Website ID (found on your website's configuration page)

•

Decided which privacy framework applies to your audience

Direct Embed

For standard HTML websites, copy the snippet below and paste it into the <head> section as high as possible — before any Google Analytics, Google Ads, or Microsoft UET tags.

HTML
<!-- FitConsent CMP: Set Consent Defaults BEFORE all other scripts -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  window.uetq = window.uetq || [];

  // Default consent: denied until user interacts
  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'analytics_storage': 'denied'
  });

  window.uetq.push('consent', 'default', { 'ad_storage': 'denied' });
</script>

<!-- Load your other scripts (Google Analytics, UET, etc.) here -->

<!-- FitConsent Banner: updates consent based on user interaction -->
<script async defer src="https://app.fitconsent.com/api/banner?websiteId=YOUR_WEBSITE_ID"></script>
ℹ

Replace YOUR_WEBSITE_ID with your actual Website ID from the dashboard. This script must appear before any tag that reads or sets cookies.

Google Tag Manager (Recommended)

Using the official FitConsent GTM Community Template is the recommended installation method. It correctly manages consent defaults and integrates with GTM's Consent Overview feature.

Step 1: Enable Consent Overview

1. In your GTM workspace, click the "Admin" tab.

2. Under the "Container" column, click "Container Settings".

3. Check "Enable consent overview" and click "Save".

Step 2: Add the FitConsent Template

1. Go to "Templates" > "Tag Templates" > "Search Gallery".

2. Search for "FitConsent" and click "Add to workspace".

3. Accept the permissions prompt.

Step 3: Create the "Google Consent Default" Tag

1. Go to "Tags" > "New", name it "FitConsent – Default Consent".

2. Click "Tag Configuration" and choose "FitConsent".

3. In the "Tag Type" dropdown, select "Google Consent Default".

4. Enter your Website ID in the "FitConsent Website ID" field.

5. Set the trigger to the built-in "Consent Initialization – All Pages".

6. Save the tag.

Step 4: Create the "Banner Loader" Tag

1. Create a new tag named "FitConsent – Banner Loader".

2. Choose "FitConsent" as the tag type (defaults to "FitConsent Banner Loader").

3. Enter your Website ID and set trigger to "Consent Initialization – All Pages".

4. Save the tag.

Step 5: Configure Your Google Tag

If you already have a Google Tag (GA4):

1. Edit the tag > "Advanced Settings" > "Consent Settings".

2. Select "No additional consent required" and save.

If you do not yet have a Google Tag:

1. Create a new tag, choose "Google Tag", and enter your GA4 Measurement ID (e.g., G-XXXXXXXXXX).

2. Set trigger to "Initialization – All Pages".

3. Under "Advanced Settings" > "Consent Settings", select "No additional consent required".

4. Save the tag.

Step 6: Handle Third-Party Scripts

For scripts like Microsoft Clarity or Facebook Pixel, configure each tag's consent requirements:

1. Edit the tag > "Advanced Settings" > "Consent Settings".

2. Click "Require additional consent for tag to fire".

3. Add the appropriate consent type: analytics_storage for analytics tools (Clarity, GA4), ad_storage for advertising (Meta Pixel, LinkedIn Ads), or both for mixed-purpose tools.

Click "Submit" and "Publish" your GTM container to go live.

WordPress Plugin

FitConsent is available as an official plugin on WordPress.org. It provides automatic compatibility with the WP Consent API, which is the standard used by Google Site Kit for consent mode integration.

Installation via WordPress Dashboard

1. Log in to your WordPress dashboard.

2. Navigate to "Plugins" > "Add New".

3. Search for "FitConsent CMP" and click "Install Now", then "Activate".

Manual Installation via FTP

1. Download the FitConsent CMP plugin from WordPress.org.

2. Upload the fitconsent-cmp folder to /wp-content/plugins/.

3. In your WordPress dashboard, go to "Plugins" > "Installed Plugins" and activate "FitConsent CMP".

Post-Installation Configuration

1. Go to "Settings" > "FitConsent" in your WordPress dashboard.

2. Enter your FitConsent Website ID.

3. Click "Save Changes".

ℹ

If you use Google Site Kit, enable "Consent Mode" in its settings. FitConsent communicates with Site Kit via the WP Consent API automatically — no additional configuration is needed.

Other Platforms (Shopify, Drupal, Webflow, etc.)

FitConsent works with any platform that allows custom HTML or JavaScript. We strongly recommend using the GTM integration if your platform supports it. Otherwise, use the Direct Embed method by adding the script snippet to your site's <head> template or custom code section.

Configuring Your Banner

All configuration is managed from the FitConsent Dashboard. Open your website's configuration page to access all settings. Changes are previewed in real time on the right panel — you can switch between desktop/mobile and light/dark modes.

General Settings

Domain: Your website's domain (e.g., example.com). Used for identification and diagnostic checks.

Google Analytics Measurement ID: Enter your GA4 Measurement ID (e.g., G-XXXXXXXXXX) to enable advanced diagnostic reporting.

Framework: Choose the privacy regulation framework that applies to your visitors.

FrameworkBest ForRegion
AutoAutomatically applies GDPR or CCPA based on visitor locationGlobal
GDPREU General Data Protection RegulationEuropean Union / EEA
CCPACalifornia Consumer Privacy ActCalifornia, USA
ePrivacyEU ePrivacy Directive (cookie law)European Union
TCFIAB Transparency & Consent FrameworkPublishers & Ad Networks
UCPAUtah Consumer Privacy ActUtah, USA
VCDPAVirginia Consumer Data Protection ActVirginia, USA
CTDPAConnecticut Data Privacy ActConnecticut, USA
LGPDBrazil Lei Geral de Proteção de DadosBrazil
PIPEDACanada Personal Information Protection ActCanada
APPIJapan Act on Protection of Personal InformationJapan
PDPAThailand Personal Data Protection ActThailand
APA-NZPAAustralia & New Zealand Privacy ActsAustralia / New Zealand
FADPSwiss Federal Act on Data ProtectionSwitzerland
POPIASouth Africa Protection of Personal Information ActSouth Africa
NoneNo automatic framework — fully manual controlAny
ℹ

For websites serving international audiences, select "Auto". FitConsent will automatically show the appropriate banner (GDPR for EU visitors, CCPA for California visitors) based on the user's location.

Geo-targeting: Choose who sees the banner:

•

None — All visitors see the banner

•

GDPR — Only visitors from EU/EEA countries see the banner (useful if your audience is primarily outside the EU)

Additional Domains

Available on Pro Large and Business plans. Additional Domains lets you load the same banner on up to 5 extra domains you own — useful for staging environments, regional domains, or multi-brand setups.

To add an additional domain:

1. Open your website's configuration page in the dashboard.

2. Go to the General Settings tab.

3. Scroll to the Additional Domains card.

4. Click Add domain and enter the bare hostname (e.g., staging.example.com or mybrand.de) — no https:// prefix or trailing slashes.

5. Repeat for up to 5 domains, then save your configuration.

ℹ

If the Additional Domains section appears locked despite having a Pro Large or Business plan, contact support — your subscription may not yet be correctly applied to this website.

Consent Mode

FitConsent supports two consent mode configurations that control how Google tags behave before and after a user interacts with the banner.

Advanced Mode (Recommended)

Advanced Mode is the default and recommended configuration. Google tags load immediately but operate with restricted data collection until consent is given.

•

Before consent: Tags send anonymous "cookieless pings" — no identifying cookies are set, but aggregated signals are sent.

•

After consent: Full data collection is enabled based on the user's choices.

•

Key benefit: Enables Google's Conversion Modeling, which recovers lost attribution data from users who decline cookies. This is essential for maintaining advertising effectiveness while respecting privacy.

Advanced Mode complies with GDPR and the EU Digital Markets Act (DMA). No changes to your Google tags are needed beyond the standard FitConsent installation.

Basic Mode (Strict Blocking)

Basic Mode completely blocks all Google and tracking scripts until the user actively grants consent.

•

Before consent: No scripts run. Zero data is sent to Google, Meta, or any other platform.

•

After consent: Scripts load and run normally.

•

Trade-off: All data from users who do not consent (including anonymous modeling data) is lost.

To enable Basic Mode, set your FitConsent configuration to "basic" and modify your tracking script tags:

HTML
<!-- Standard Google Tag (DO NOT USE in Basic Mode) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>

<!-- Blocked Google Tag for Basic Mode -->
<script
  type="text/plain"
  data-cookieconsent="analytics"
  async
  src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX">
</script>

Category mapping for data-cookieconsent:

•

analytics → Google Analytics (GA4), Microsoft Clarity

•

marketing → Google Ads, Meta Pixel, LinkedIn Insight

•

functional → Chatbots, personalization tools

FeatureBasic ModeAdvanced Mode
Google TagsBlocked until consentLoad immediately (restricted)
Pre-consent DataZero data collectedCookieless pings (modeling)
Privacy LevelStrictestGDPR / DMA compliant
ImplementationRequires manual tag changesSimple copy-paste
Conversion ModelingNot availableAvailable

Debug Mode

Add ?fitconsent_debug=true to your URL to verify your installation:

•

Advanced Mode: Console shows "✅ Consent defaults loaded before Google tags."

•

Basic Mode: Console tracks when blocked scripts are unblocked after consent.

Appearance

Customize the visual presentation of your consent banner to match your brand.

Layout & Animation

•

Type: Banner (horizontal bar) or Dialog (centered overlay)

•

Position: Bottom, Top, Bottom-Left, Bottom-Right, Top-Left, Top-Right, Center

•

Animation Style: Spring (bouncy, default), Slide (directional motion), Fade (opacity transition), None

•

Border Accent: None, Top (thin border on top edge), Left (colored left stripe), Gradient (animated gradient border)

Typography

•

Font Family: Inter, DM Sans, Plus Jakarta Sans, Nunito, Outfit, Lato, Poppins, Raleway, Merriweather, Playfair Display, Source Code Pro

•

Title Alignment: Left, Center, Right

Shape & Elevation

•

Border Radius: None, SM, MD, LG, XL, 2XL (applies to the banner container)

•

Button Border Radius: None, SM, MD, LG, XL, Full

•

Elevation (shadow depth): None, SM, MD, LG, XL

Button Layout

•

Layout: Row (buttons side by side) or Column (buttons stacked vertically)

•

Alignment: Left, Center, Right, Space-Between

Colors

Every color field supports both light mode and dark mode values, so your banner adapts to the visitor's system theme:

•

Text Color

•

Title Color

•

Background Color

•

Button Color

•

Button Text Color

•

Button Border Color

•

Divider Color (between banner sections)

•

Active Tab Color (selected tab in preferences modal)

•

Inactive Tab Color (unselected tabs)

Logo & Background Image

•

Logo URL: Enter a URL to display your company logo on the banner.

•

Background Image: Set separate images for Desktop Light, Desktop Dark, Mobile Light, and Mobile Dark modes for a fully branded experience.

Content & Languages

Edit all text displayed in the banner and preferences modal. Every text field supports multiple languages — add translations for each language your website serves.

Configurable text fields:

•

Banner heading

•

Banner message (supports Markdown: bold, *italic*, [link text](url))

•

Accept All button label

•

Decline button label

•

Manage Preferences button label

•

Preferences modal title

•

Preferences modal description

•

Save Preferences button label

•

Consent tab label

•

Preferences tab label

•

Storage Declaration tab label

To add a language, click the language selector in the "Selected Languages" field and choose from 100+ supported languages. FitConsent automatically detects the visitor's preferred language and shows the correct translation.

Behavior Settings

Buttons

•

Enable Decline Button: Show or hide the "Decline" option (required for GDPR strictness).

•

Enable Manage Button: Show or hide the "Manage Preferences" option.

Consent Categories

Choose which tracking categories to present to users. The "Necessary" category is always enabled and cannot be disabled by users. You can also add custom categories.

•

Necessary (always on): Essential cookies for the site to function

•

Analytics: Website analytics and performance tracking

•

Marketing: Advertising and remarketing

•

Functional: Personalization and enhanced functionality

•

Sale of Data (auto-added when "Sale of Data" is enabled for CCPA/LGPD/UCPA/CTDPA): Signals data sale opt-out

Floating Trigger Button

A small persistent button that remains visible after the banner is dismissed, allowing users to update their preferences at any time.

•

Enable: Toggle the floating trigger on or off.

•

Position: Bottom-Left or Bottom-Right.

•

Colors: Set background color and icon color independently for light and dark modes.

Branding

Remove the "Powered by FitConsent" badge from the banner. This feature is available on premium plans.

Cookie Declaration

•

Enabled: Show a Storage Declaration tab inside the Manage Preferences modal.

•

Position: Inline (displayed within the modal) or Modal (opens in a separate full-screen dialog).

CCPA-Specific Settings

Available when the CCPA, Auto, CTDPA, LGPD, or UCPA framework is selected:

•

Do Not Sell Link: URL to your "Do Not Sell My Personal Information" page.

•

Limit Use Link: URL to your "Limit the Use of My Sensitive Personal Information" page.

•

Sale of Data: Toggle whether your website sells or shares personal data with third parties. When enabled, a "Sale of Data" consent category is automatically added.

AI-Powered Optimizer

Available on Pro+ plans. The AI optimizer analyses your website's content, branding, and target audience to suggest:

•

Optimal color combinations proven to increase consent rates

•

Recommended banner copy tailored to your industry

•

Layout and position improvements

Access the optimizer by clicking the "Optimize with AI" button in your configuration page header.

Storage Declaration

FitConsent can display an auto-updating table of all cookies, localStorage, sessionStorage, and other storage items your website uses. This is typically embedded on your Privacy Policy page to provide full transparency to users.

Standard HTML

Add this snippet to any page where you want the cookie table to appear. The script automatically injects the table into the <div> with the ID fitconsent-declaration.

HTML
<div id="fitconsent-declaration"></div>
<script async defer src="https://app.fitconsent.com/api/declaration?websiteId=YOUR_WEBSITE_ID"></script>

React & Next.js

To prevent hydration errors in React-based frameworks, load the declaration script client-side using a useEffect hook.

Step 1: Create a Client Component

Create a new component file, for example StorageDeclarationEmbed.tsx:

TypeScript / React
'use client';

import { useEffect } from 'react';

type Props = {
  websiteId: string;
};

export function StorageDeclarationEmbed({ websiteId }: Props) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = `https://app.fitconsent.com/api/declaration.js?websiteId=${websiteId}`;
    script.async = true;
    script.defer = true;

    const container = document.getElementById('fitconsent-declaration');
    if (container) {
      container.appendChild(script);
    }

    return () => {
      if (container && container.contains(script)) {
        container.removeChild(script);
      }
    };
  }, [websiteId]);

  return <div id="fitconsent-declaration"></div>;
}

Step 2: Use the Component on Your Page

Import and use the component on your privacy policy page:

TypeScript / React
import { StorageDeclarationEmbed } from '@/components/StorageDeclarationEmbed';

export default function PrivacyPolicyPage() {
  return (
    <div>
      <h1>Privacy Policy</h1>

      <h2>Cookie & Storage Declaration</h2>
      <p>
        For full transparency, the following is an automatically updated list
        of all cookies and storage items our website may place on your device.
      </p>

      <StorageDeclarationEmbed websiteId="YOUR_WEBSITE_ID" />
    </div>
  );
}
ℹ

This approach ensures the script is loaded and executed safely on the client side, avoiding any conflicts with the React rendering lifecycle.

Advanced Usage

Using Consent Data on Your Website

After a user interacts with the banner, FitConsent stores their choices in a cookie named fitconsent_given. You can read this cookie on the client side or server side to tailor the user experience.

Cookie Structure

The cookie contains a JSON object with two keys: choices and geo.

JSON
{
  "choices": {
    "necessary": true,
    "analytics": true,
    "marketing": false
  },
  "geo": {
    "country": "US",
    "state": "CA"
  }
}
•

choices: An object where each key is a consent category and the value is true (accepted) or false (declined).

•

geo: An object containing the user's geographic location at the time of consent (country code and state/region where available).

Reading Consent on the Client

JavaScript
function getFitConsentChoices() {
  const cookie = document.cookie
    .split('; ')
    .find(row => row.startsWith('fitconsent_given='));

  if (!cookie) return null;

  try {
    return JSON.parse(decodeURIComponent(cookie.split('=')[1]));
  } catch {
    return null;
  }
}

// Example: Load analytics only if user consented
const consent = getFitConsentChoices();

if (consent?.choices?.analytics) {
  // Initialize your analytics script
}

// Example: Show CCPA notice only to California users who haven't opted out
if (consent?.geo?.state === 'CA' && !consent?.choices?.marketing) {
  // Show California-specific content or notice
}

Automatic Language Detection

The FitConsent banner automatically detects the user's preferred language and displays the appropriate translation. The detection follows this priority order:

1. The lang attribute on the <html> tag (e.g., <html lang="fr">). This is the most reliable method.

2. The browser's navigator.language setting.

3. Falls back to English (en) or the first language in your configured list.

ℹ

For best results on multilingual websites, ensure your <html lang="..."> attribute accurately reflects the current page language at all times.

Diagnostic Tool

Use the built-in Diagnostic Tool in your FitConsent configuration page to verify that the banner is correctly installed and configured. The tool scans your website and reports:

•

Whether the FitConsent banner script is detected

•

Consent Mode defaults status (Advanced or Basic)

•

Google tag integration status

•

Any detected issues with specific recommendations to fix them

To run a diagnostic, go to your website's configuration page in the dashboard and click the "Diagnostic" tab.

Migration: Advanced → Basic Mode

If you are switching from Advanced Mode to Basic Mode:

1. Change your FitConsent configuration to "basic".

2. Remove the "Consent Default" script block from your website's <head>.

3. Add type="text/plain" and data-cookieconsent="..." to all your tracking script tags.

4. Clear your browser cookies and re-test to confirm no scripts fire before consent.

⚠

After switching to Basic Mode, you will lose all pre-consent data including anonymous conversion modeling. This cannot be recovered retroactively.

Ready to simplify your compliance?

Implement a reliable Consent Management Platform (CMP) today and ensure you stay compliant with all global regulations.

Start Your Free Trial
FitConsent CMP Documentation | FitConsent