Bootstrap Cookie Consent Manager for GDPR-compliant Cookie Preferences

bootstrap-cookie-consent-manager is a Bootstrap 5 JavaScript library that adds a cookie consent banner and category preferences modal to a website.

Your visitors can accept all categories, reject optional categories, or choose individual permissions before analytics, advertising, personalization, and related consent states are updated.

The library uses the latest Bootstrap framework for the layout, modal, form switches, buttons, and confirmation toast. It stores the visitor’s choices in localStorage and integrates those choices with Google Consent Mode v2 and Google Tag Manager.

Features:

• Bootstrap 5 banner, preferences modal, switches, buttons, and confirmation toast.
• Accept All, Reject All, and category-level consent controls.
• Google Consent Mode v2 updates for advertising, analytics, functionality, personalization, and security storage.
• Google Tag Manager events after consent changes.
• Persistent consent preferences in localStorage.
• Required and optional consent categories with configurable initial switch states.
• Custom callbacks for category acceptance and rejection.
• Configurable text, Bootstrap classes, modal behavior, and toast placement.
• ESM, CommonJS, and browser-global distributions.

How To Use It:

Browser Setup

Load the latest Bootstrap framework before initializing the consent manager. The browser build is available as dist/index.global.js and exposes BootstrapCookieConsentManager.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css">
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<script src="/path/to/index.global.js"></script>

Basic Usage

Define the consent categories first, then pass them to CookieConsentManager. A required category should start checked because its switch is disabled in the preferences modal. Optional categories can start unchecked.

<script>
  const { CookieConsentManager } = BootstrapCookieConsentManager;
  const consentTypes = [
    {
      id: 'essential',
      title: 'Essential',
      description: 'Required for core site and privacy features.',
      required: true,
      onByDefault: true,
      permissionType: 'functionality'
    },
    {
      id: 'analytics',
      title: 'Analytics',
      description: 'Measures visits and site usage.',
      permissionType: 'analytics'
    },
    {
      id: 'advertising',
      title: 'Advertising',
      description: 'Controls advertising and conversion measurement.',
      permissionType: 'ad'
    }
  ];
  const consentManager = new CookieConsentManager(consentTypes, {
    bannerTitle: 'Cookie preferences',
    bannerText: 'Choose which optional cookies this site may use.',
    toastText: 'Your preferences were saved.'
  });
  consentManager.init();
</script>

npm and TypeScript

Install the library and its Bootstrap peer dependency:

npm install bootstrap-cookie-consent-manager bootstrap

The package exports ESM, CommonJS, and TypeScript declarations.

import {
  CookieConsentManager,
  type ConsentType,
  type CookieConsentManagerConfigs
} from 'bootstrap-cookie-consent-manager';
const consentTypes: ConsentType[] = [
  {
    id: 'essential',
    title: 'Essential',
    description: 'Required for account and privacy features.',
    required: true,
    onByDefault: true,
    permissionType: 'functionality'
  },
  {
    id: 'analytics',
    title: 'Analytics',
    description: 'Measures site usage.',
    permissionType: 'analytics'
  }
];
const config: CookieConsentManagerConfigs = {
  bannerTitle: 'Privacy choices',
  toastPosition: 'bottom-right'
};
const consentManager = new CookieConsentManager(
  consentTypes,
  config
);
consentManager.init();

Define Consent Categories

Each object in the first constructor argument represents one consent category.

• id (string): Unique lowercase identifier used in storage keys and category event names.
• title (string): Category title displayed in the preferences modal.
• description (string): Category description displayed in the modal. HTML is accepted.
• enabled (boolean): Set to false to exclude the category from the enabled consent list and generated preference controls.
• required (boolean): Marks a category as required. Reject All keeps required categories granted.
• onByDefault (boolean): Controls the initial checked state of the preference switch.
• permissionType (string): Maps the category to Google Consent Mode storage keys.
• onAccept (function): Runs when this consent category is accepted.
• onReject (function): Runs when this consent category is rejected.

permissionType accepts five values:

A category callback can connect the preference change to application code:

const consentTypes = [
  {
    id: 'analytics',
    title: 'Analytics',
    description: 'Measures how visitors use this site.',
    permissionType: 'analytics',
    onAccept: function () {
      startLocalAnalyticsFeatures();
    },
    onReject: function () {
      stopLocalAnalyticsFeatures();
    }
  }
];

Google Tag Manager and Consent Mode v2

Initialize the consent manager before the GTM container.

init() writes the initial Consent Mode state into dataLayer. Functionality and security begin as granted. Advertising, analytics, and personalization states begin as denied.

<script src="/assets/bootstrap.bundle.min.js"></script>
<script src="/assets/index.global.js"></script>
<script>
  const { CookieConsentManager } = BootstrapCookieConsentManager;
  const consentManager = new CookieConsentManager([
    {
      id: 'essential',
      title: 'Essential',
      description: 'Required site features.',
      required: true,
      onByDefault: true,
      permissionType: 'functionality'
    },
    {
      id: 'analytics',
      title: 'Analytics',
      description: 'Site measurement.',
      permissionType: 'analytics'
    }
  ]);
  consentManager.init();
</script>
<!-- Load Google Tag Manager after this point -->

Create a GTM Custom Event trigger for:

cookie_consent_update

The manager also pushes one event for each enabled category:

cookie_consent_accept_analytics
cookie_consent_reject_analytics

Important Consent Mode Behavior

Accept All calls a fixed Consent Mode update that grants all seven supported storage states:

ad_personalization
ad_storage
ad_user_data
analytics_storage
functionality_storage
personalization_storage
security_storage

Reject All also uses a fixed payload. Functionality and security stay granted, while the remaining states become denied.

These two handlers do not build their Consent Mode payload from the consent categories passed to the constructor. Check this behavior carefully if your site defines only a subset of the five permissionType categories.

Saving customized preferences follows a different path. The library builds that Consent Mode update from the enabled categories and their stored values.

Customize The Banner And Modal

Text and Bootstrap class options handle most visual customization.

const config = {
  bannerTitle: 'Your privacy choices',
  bannerText:
    'We use optional analytics cookies. Read our <a href="/privacy">privacy policy</a> for details.',
  modalTitle: 'Manage cookie preferences',
  acceptAllButtonText: 'Accept optional cookies',
  rejectAllButtonText: 'Reject optional cookies',
  customizeButtonText: 'Choose categories',
  saveButtonText: 'Save choices',
  acceptAllButtonClass: 'btn btn-success',
  rejectAllButtonClass: 'btn btn-outline-danger',
  customizeButtonClass: 'btn btn-outline-secondary',
  modalAcceptAllButtonClass: 'btn btn-success me-sm-2',
  modalRejectAllButtonClass: 'btn btn-outline-danger me-sm-2',
  modalSaveButtonClass: 'btn btn-primary'
};

Configure The Confirmation Toast

The confirmation toast appears after accept, reject, or save actions when showToast remains enabled.

const config = {
  showToast: true,
  toastText: 'Privacy settings saved',
  toastPosition: 'bottom-right',
  toastBackgroundClass: 'text-bg-primary',
  toastAutohide: true,
  toastDelay: 2500
};

Supported positions are:

top-left
top-center
top-right
middle-left
middle-center
middle-right
bottom-left
bottom-center
bottom-right

Configuration Reference:

Storage And Consent State

• prefix (string): Prefix for every storage key. Default: cookieConsent.
• consentTypePrefix (string): Prefix used for category storage keys. Default: consentType.
• setName (string): Storage-key suffix that records whether consent has been set. Default: isSet.
• positiveValue (string): Stored granted value. Default: true.
• negativeValue (string): Stored rejected value. Default: false.
• versionName (string): Storage-key suffix for the consent configuration version. Default: version.
• version (number): Value written to the consent version storage entry. Default: 2.3.

The version setting belongs to the saved consent state. It is independent from the npm package version.

Event Names

• cookieConsentAcceptEventName (string): Base name for individual accepted-category events. Default: cookie_consent_accept.
• cookieConsentRejectEventName (string): Base name for individual rejected-category events. Default: cookie_consent_reject.
• cookieConsentUpdateEventName (string): General event pushed after consent changes. Default: cookie_consent_update.

Modal

• modalId (string): ID of the generated preferences modal. Default: cookie-consent-manager-modal.
• modalTitle (string): Modal title. HTML is accepted. Default: Customize the cookies.
• centered (boolean): Vertically centers the Bootstrap modal. Default: true.
• scrollable (boolean): Uses Bootstrap’s scrollable modal layout. Default: true.
• animation (boolean): Applies the Bootstrap fade animation. Default: true.
• staticBackground (boolean): Prevents backdrop clicks from dismissing the modal. Default: true.
• showCloseButtonOnModal (boolean): Displays the modal header close button. Default: false.
• modalAcceptAllButtonClass (string): Classes for the modal Accept All button. Default: btn btn-outline-primary me-sm-2.
• modalRejectAllButtonClass (string): Classes for the modal Reject All button. Default: btn btn-outline-primary me-sm-2.
• modalSaveButtonClass (string): Classes for the modal Save button. Default: btn btn-primary.
• useLocalStorage (boolean): Storage-mode flag. Default: true.

Cookie-backed storage is not implemented. Keep useLocalStorage set to true.

Banner And Buttons

• acceptAllButtonText (string): Visible Accept All text. Default: Accept all.
• acceptAllButtonAccessibleText (string): Accessible Accept All label. Default: Accept all cookies.
• acceptAllButtonClass (string): Banner Accept All classes. Default: btn btn-primary.
• rejectAllButtonText (string): Visible Reject All text. Default: Reject all.
• rejectAllButtonAccessibleText (string): Accessible Reject All label. Default: Reject all cookies.
• rejectAllButtonClass (string): Banner Reject All classes. Default: btn btn-outline-primary.
• customizeButtonText (string): Visible Customize text. Default: Customize.
• customizeButtonAccessibleText (string): Accessible Customize label. Default: Customize cookies.
• customizeButtonClass (string): Customize button classes. Default: btn btn-outline-primary.
• saveButtonText (string): Visible Save text. Default: Save.
• saveButtonAccessibleText (string): Accessible Save label. Default: Save preferences.
• bannerTitle (string): Banner heading. HTML is accepted. Default: We respect your privacy.
• bannerText (string): Banner body content. HTML is accepted.
• showRejectAllButtonOnBanner (boolean): Controls the banner Reject All button. Default: true.
• freezeScrollingOnBanner (boolean): Adds overflow-hidden to the page while the banner is open. Default: true.

Toast

• showToast (boolean): Controls the confirmation toast. Default: true.
• toastText (string): Toast message. Default: Cookie consent saved successfully.
• toastPosition (string): Toast placement. Default: bottom-left.
• toastContainerId (string): Generated container ID. Default: toast-container.
• toastId (string): Generated toast ID. The default contains the current timestamp.
• toastBackgroundClass (string): Bootstrap background classes. Default: text-bg-success.
• toastShowCloseButton (boolean): Controls the toast close button. Default: true.
• toastEscapeHTML (boolean): Escapes markup in toastText. Default: true.
• toastAnimation (boolean): Controls Bootstrap toast animation. Default: true.
• toastAutohide (boolean): Hides the toast automatically. Default: true.
• toastDelay (number): Autohide delay in milliseconds. Default: 3500.

Callbacks And Data Layer Events:

onAccept and onReject are JavaScript callbacks attached to consent category objects. They are distinct from the GTM events placed in dataLayer.

The general event looks like this:

{
  event: 'cookie_consent_update'
}

Individual category events append the category ID:

{
  event: 'cookie_consent_accept_analytics'
}
{
  event: 'cookie_consent_reject_analytics'
}

Change the base names through the event configuration options:

const config = {
  cookieConsentUpdateEventName: 'privacy_changed',
  cookieConsentAcceptEventName: 'privacy_granted',
  cookieConsentRejectEventName: 'privacy_denied'
};

An analytics category then produces:

privacy_granted_analytics
privacy_denied_analytics

These are dataLayer entries. They are not DOM CustomEvent objects.

Public Methods:

Normal page setup only requires the constructor and init(). The class also exposes lower-level state, configuration, UI, event, and Consent Mode methods.

Initialization And Configuration

// Initialize consent handling.
consentManager.init();
// Read configured storage names and values.
consentManager.getPrefix();
consentManager.getConsentTypePrefix();
consentManager.getConsentSetName();
consentManager.getPositiveValue();
consentManager.getNegativeValue();
consentManager.getVersion();
consentManager.getVersionName();
// Read configuration objects.
consentManager.getDefaultConfigs();
consentManager.getUserConfigs();
consentManager.getConfigs();

Consent Types And Stored State

// Read registered consent categories.
consentManager.getDefaultConsentTypes();
consentManager.getUserConsentTypes();
consentManager.getConsentTypes();
consentManager.getEnabledConsentTypes();
consentManager.getRequiredConsentTypes();
// Check and write the stored consent state.
consentManager.isConsentSet();
consentManager.setConsent_acceptAll();
consentManager.setConsent_rejectAll();
consentManager.setConsent_saveCustomized();
consentManager.setConsentSet();

Generated UI

// Display the main consent banner.
consentManager.showBanner();
// Display the preferences modal.
consentManager.showModal();
// Display the configured confirmation toast.
consentManager.showToast();

Version State

// Read and compare the stored consent-version marker.
consentManager.getVersionFromLocalStorage();
consentManager.verifyVersionFromLocalStorage();
// Store the configured version value.
consentManager.setVersion();

GTM Events And Consent Mode

// Read configured event names.
consentManager.getCookieConsentAcceptEventName();
consentManager.getCookieConsentRejectEventName();
// Push consent events to dataLayer.
consentManager.fireCookieConsentUpdateEvent();
consentManager.fireCookieConsentIndividualEvents();
// Write Google Consent Mode states.
consentManager.setConsent_default();
consentManager.updateConsent_allGranted();
consentManager.updateConsent_allDenied();
consentManager.updateConsent_fromLocalStorage();

Action Handlers

// Run the same flows used by the generated controls.
consentManager.handleAcceptAllButtonClick();
consentManager.handleRejectAllButtonClick();
consentManager.handleSaveButtonClick();
consentManager.handleCustomizeButtonClick();

Alternatives:

• GDPR Cookie Banner With Category Consent API – Neiki’s Cookie Banner
• GDPR-Compliant Cookie Consent Banner/Modal in JavaScript
• Customizable GDPR Cookie Consent Popup In JavaScript – Cookify
• GDPR Compliant Cookie Consent Banner In JavaScript – GlowCookies