Appearance

Consent Pro V2 Documentation ​

Welcome to Consent Pro V2, a complete rewrite of our cookie consent management platform featuring enhanced performance, improved developer experience, and powerful new features.

What's New in V2 ​

Consent Pro V2 introduces major improvements and new features:

Core Improvements ​

  • Multi-Region Targeting — Configure region-specific consent banners that automatically adapt based on the user’s location.
  • Intelligent Auto-Blocking — Automatically block scripts and iframes with advanced third-party detection.
  • Smart Dynamic Placeholders — Display contextual placeholders for blocked iframes and embedded content.
  • Enhanced Localization — Full compatibility with Webflow Localization for seamless multi-language experiences and improved internationalization (i18n) handling.
  • Do Not Sell Compliance — Built-in support for CCPA “Do Not Sell My Information” requirements.
  • Tracker & Cookie Insights — Detect and display active trackers and cookies to users for full transparency.
  • Reactive State Engine — Predictable, efficient state management with automatic propagation of consent changes.
  • Performance Boosts — Smaller bundle size, faster initialization, and minimal DOM manipulation for optimal load times.
  • Advanced Event Lifecycle — Rich event hooks with detailed context for complete integration control.
  • Visibility Control API — Programmatic access to banner and preferences visibility states.
  • Unified Storage API — Simplified, consistent browser storage and cookie management.
  • Analytics-Ready — Native integration with Google Consent Mode V2 and automatic consent signal updates.

Quick Start ​

Basic Implementation ​

The recommended way to interact with Consent Pro is using the callback approach. This ensures your code runs after the API is fully loaded:

html
<script>
  window.FinsweetConsentPro = window.FinsweetConsentPro || [];
  window.FinsweetConsentPro.push([
    'consent',
    async (instance) => {
      console.log('Consent Pro V2 initialized successfully!', instance);

      // Access the current consent state
      const consent = instance.getConsent();
      console.log('Current consent:', consent);

      // Listen to consent changes
      instance.on('consent-updated', (data) => {
        console.log('Consent updated:', data.choices);

        if (data.choices.analytics) {
          // Initialize analytics
          initializeAnalytics();
        }
      });

      // Listen to banner events
      instance.on('banner-shown', (data) => {
        console.log('Banner is now visible', data);
      });
    },
  ]);
</script>

Working with the API ​

javascript
window.FinsweetConsentPro = window.FinsweetConsentPro || [];
window.FinsweetConsentPro.push([
  'consent',
  async (instance) => {
    // Get current consent
    const consent = instance.getConsent();
    console.log(consent);

    // Update consent programmatically
    await instance.updateConsent({
      analytics: true,
      marketing: false,
      personalization: true,
    });

    // Show banner manually
    await instance.showBanner();

    // Work with specific instances
    const euBanner = instance.getInstance('eu-banner');
    if (euBanner) {
      await euBanner.showPreferences();
    }
  },
]);

Note: For advanced use cases, you can also access the API directly via window.FinsweetConsentProAPI. See the API Reference for details.

Core Concepts ​

Reactive State ​

V2 uses a reactive state system that automatically propagates changes:

javascript
window.FinsweetConsentPro = window.FinsweetConsentPro || [];
window.FinsweetConsentPro.push([
  'consent',
  async (instance) => {
    // Subscribe to all state changes
    const unsubscribe = instance.subscribe((event, data) => {
      console.log(`Event: ${event}`, data);
    });

    // Get current state
    const state = instance.getState();
    console.log(state.global); // Global state
    console.log(state.instances); // All instance states
  },
]);

Multi-Instance Support ​

V2 supports multiple banner instances for different regions:

javascript
window.FinsweetConsentPro = window.FinsweetConsentPro || [];
window.FinsweetConsentPro.push([
  'consent',
  async (instance) => {
    // Get specific instance
    const euInstance = instance.getInstance('eu-banner');

    if (euInstance) {
      // Show banner for specific instance
      await euInstance.showBanner();

      // Get instance-specific consent
      const consent = euInstance.getConsent();
      console.log('EU consent:', consent);
    }
  },
]);

V2 supports three consent modes:

  • opt-in: Users must actively accept (GDPR default)
  • opt-out: Cookies active by default, users can reject (US default)
  • informational: Notify users without requiring action

Browser Support ​

Consent Pro V2 supports all modern browsers:

  • Chrome/Edge 90+
  • Firefox 88+
  • Safari 14+
  • Opera 76+

Bundle Size ​

V2 is optimized for performance:

  • Core bundle: ~90KB

Migration from V1 ​

Migrating from V1? See our Migration Guide for detailed instructions.

Documentation Structure ​

Getting Help ​

Next Steps ​

  1. Read the API Documentation to understand available methods
  2. Learn about the Event System for integration
  3. Review Migration Guide if upgrading from V1