Consent Pro JavaScript API Reference

Consent Pro provides a comprehensive JavaScript API that allows you to interact with the consent management system programmatically. This API enables you to listen for consent changes, access consent states, and integrate with your existing analytics and marketing tools for full GDPR and CCPA compliance.

Table of Contents

• Quick Start
• API Methods
• Event Listeners
• Integration Examples
• Best Practices

Quick Start

To access the Consent Pro API, use the global window.FinsweetConsentPro object:

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

      // Access the current consent state
      const store = instance.getStore();
      console.log('Current consents:', store.consents);
    },
  ]);
</script>

API Methods

instance.getStore()

Returns the current state of the consent system.

const store = instance.getStore();
console.log(store);

Response Structure:

{
  mode: 'opt-in' | 'opt-out' | 'informational',
  cookieMaxAge: number,                    // Cookie expiration in days
  endpoint: string | null,                 // API endpoint for consent logging
  componentsSource: string | null,         // External source URL for components
  domain: string | null,                   // Cookie domain scope
  confirmed: boolean,                      // Whether user has made consent choices
  consents: {
    essential: boolean,                    // Always true
    analytics: boolean,                    // Analytics consent status
    marketing: boolean,                    // Marketing consent status
    personalization: boolean,              // Personalization consent status
    uncategorized: boolean                 // Uncategorized cookies consent
  },
  bannerText: string,                      // Text content from banner element
  scripts: ScriptData[],                   // Controlled script elements
  iFrames: IFrameData[],                   // Controlled iframe elements
  allConsents: Consents                    // Final computed consent state
}

Script Data Structure:

{
  type: 'script',
  categories: ['analytics', 'marketing'],   // Required consent categories
  element: HTMLScriptElement,              // The script element
  active: boolean                          // Whether script is activated
}

IFrame Data Structure:

{
  type: 'iframe',
  categories: ['marketing'],               // Required consent categories
  element: HTMLIFrameElement,             // The iframe element
  src: string,                            // Original source URL
  active: boolean,                        // Whether iframe is activated
  placeholder?: HTMLElement               // Optional placeholder element
}

instance.activateAllElements()

Activates all stored scripts and iframes regardless of current consent state. Use with caution.

Returns: Promise<void>

await instance.activateAllElements();

instance.destroy()

Destroys the Consent Pro instance, removes event listeners, and cleans up DOM elements.

Returns: void

instance.destroy();

Global API Methods

window.FinsweetConsentPro.push()

Adds callbacks to be executed when Consent Pro is loaded.

window.FinsweetConsentPro.push([
  'consent',
  (instance) => {
    // Your callback function here
  },
]);

window.FinsweetConsentPro.destroy()

Destroys all loaded Consent Pro modules.

window.FinsweetConsentPro.destroy();

Consent Categories

Consent Pro supports the following consent categories:

Category	Description	GTM Consent Mode Mapping
essential	Always required, cannot be disabled	security_storage
analytics	Web analytics and performance tracking	analytics_storage
marketing	Advertising and marketing cookies	ad_storage, ad_user_data, ad_personalization
personalization	User preferences and personalization	functionality_storage, personalization_storage
uncategorized	Third-party cookies not in other categories	-

Events

Consent Pro fires several events that you can listen to for integration with your application.

Custom DOM Events

fs-consent-consentModeUpdate

Fired whenever consent preferences are updated.

document.addEventListener('fs-consent-consentModeUpdate', (event) => {
  console.log('Consent updated:', event.detail);

  const { consents, consentModes } = event.detail;

  // consents contains the user's consent choices
  console.log('User consents:', consents);

  // consentModes contains GTM-compatible consent mode values
  console.log('GTM consent modes:', consentModes);
});

Event Detail Structure:

{
  consents: {
    essential: boolean,
    analytics: boolean,
    marketing: boolean,
    personalization: boolean,
    uncategorized: boolean
  },
  consentModes: {
    ad_storage: 'granted' | 'denied',
    ad_user_data: 'granted' | 'denied',
    ad_personalization: 'granted' | 'denied',
    analytics_storage: 'granted' | 'denied',
    functionality_storage: 'granted' | 'denied',
    personalization_storage: 'granted' | 'denied'
  }
}

Google Tag Manager Events

Consent Pro automatically fires GTM events when consents are granted:

• analytics-activated - Fired when analytics consent is granted
• marketing-activated - Fired when marketing consent is granted
• personalization-activated - Fired when personalization consent is granted
• essential-activated - Fired when essential consent is granted

Google Consent Mode V2 Integration

Consent Pro automatically manages Google Consent Mode V2 settings. The consent mode is updated whenever user preferences change:

// This is handled automatically by Consent Pro
gtag('consent', 'update', {
  ad_storage: 'granted',
  ad_user_data: 'granted',
  ad_personalization: 'granted',
  analytics_storage: 'granted',
  functionality_storage: 'granted',
  personalization_storage: 'granted',
});

Legacy Compatibility

Consent Pro maintains backward compatibility with legacy callback patterns from Finsweet Components:

// Legacy fsComponents pattern (still supported)
window.fsComponents = window.fsComponents || [];
window.fsComponents.push(['consent', callback]);

// Legacy FsComponents pattern (still supported)
window.FsComponents = window.FsComponents || [];
window.FsComponents.push(['consent', callback]);

Best Practices

1. Always Check for Instance Availability

window.FinsweetConsentPro.push([
  'consent',
  (instance) => {
    if (!instance) {
      console.warn('Consent Pro instance not available');
      return;
    }

    // Use the instance
    const store = instance.getStore();
  },
]);

2. Handle Async Operations

window.FinsweetConsentPro.push([
  'consent',
  async (instance) => {
    try {
      await instance.activateAllElements();
      console.log('All elements activated');
    } catch (error) {
      console.error('Failed to activate elements:', error);
    }
  },
]);

Debugging

To enable debug mode for the Consent Pro, append the following query parameter to your site URL:

?fs-consent=debugger

Example:

https://yoursite.com?fs-consent=debugger

When debug mode is enabled, the service will:

• Show detailed console logs
• Display consent state changes
• Highlight consent-related DOM elements or events
• Show activation of scripts and iframes

Next Steps

• HTML Attributes - Complete guide to HTML attributes
• Changelog - View recent changes and updates