---
url: https://docs.consentpro.com/legacy/api.md
description: >-
  JavaScript API reference for the original Consent Pro runtime, including
  consent state, events, methods, and integration examples.
---

# Legacy 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](#quick-start)
* [API Methods](#api-methods)
* [Events](#events)
* [Best Practices](#best-practices)

## Quick Start

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

```html
<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.

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

**Response Structure:**

```javascript
{
  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:**

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

**IFrame Data Structure:**

```javascript
{
  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>`

```javascript
await instance.activateAllElements();
```

### instance.destroy()

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

**Returns:** `void`

```javascript
instance.destroy();
```

## Global API Methods

### window.FinsweetConsentPro.push()

Adds callbacks to be executed when Consent Pro is loaded.

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

### window.FinsweetConsentPro.destroy()

Destroys all loaded Consent Pro modules.

```javascript
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.

```javascript
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:**

```javascript
{
  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:

```javascript
// 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](https://finsweet.com/components):

```javascript
// 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

```javascript
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

```javascript
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](../attributes/) - Complete guide to HTML attributes
* [Changelog](/changelog/) - View recent changes and updates