cookie_consent

A lightweight, dependency-free cookie consent script with a drop-in banner, a preference modal, consent change events, translations, and simple styling hooks.

Drop cookie-consent.js into your project, include it with a script tag, and add a cookie settings link so users can reopen preferences later.

Quick Start

<script src="/path/to/cookie-consent.js"></script>

<a href="#" id="open-cookie-settings">Cookie settings</a>

<script>
  document.getElementById("open-cookie-settings").addEventListener("click", function(event) {
    event.preventDefault();
    if (window.CookieConsent && typeof window.CookieConsent.showSettings === "function") {
      window.CookieConsent.showSettings();
    }
  });
</script>

Minimal config:

<script>
  window.CookieConsentConfig = {
    cookieMaxAge: 15768000
  };
</script>
<script src="/path/to/cookie-consent.js"></script>

Main Options

• cookieMaxAge Consent cookie lifetime in seconds. Default: 15768000 seconds, about six months.
• language Sets the default language key for the current page. cc_lang overrides it on page load.
• translations Defines language blocks for banner, modal, accessibility, and category copy.
• text Legacy single-language override for banner, modal, accessibility, and category copy.
• audit.enabled Stores consent audit records in local storage under cookie_consent when true.
• debugMode Development override for consent behavior. 0 = normal, 1 = allow all optional consent, 2 = deny all optional consent.

Public API

The script exposes window.CookieConsent:

• getConsent()
• getChoices()
• getStatus()
• hasValidConsentBitmask()
• getConsentDebugMode()
• getLanguage()
• isCategoryEnabled(categoryName)
• isAnalyticsEnabled()
• isMarketingEnabled()
• isNecessaryEnabled()
• setLanguage(languageKey)
• showBanner(options)
• showSettings(options)
• reset()

Language can also be overridden in JavaScript with showBanner({ language }), showSettings({ language }), or setLanguage(languageKey).

Events

The script dispatches cookieconsent:change whenever consent is applied or updated.

Storage

The script uses:

• Cookie: consent_status
• Cookie: gpc_popup_shown for the GPC acknowledgement popup
• Local storage: cookie_consent when audit.enabled is true

The consent cookie stores a 3-bit mask for necessary, analytics, and marketing.

Examples

Working examples live in examples/.

• Start with examples/index.html for the main example hub.
• Use examples/full-integration.html for a complete reference implementation.
• Use the feature pages for focused examples of translations, styling overrides, events, audit storage, GPC handling, debug mode, and public API usage.

Compliance

This project supports common website consent flows and integration patterns. You are responsible for configuring it correctly for your site, tags, policies, and legal obligations.

Browser Support

• Intended for modern browsers
• Uses crypto.randomUUID() when available and falls back when it is not
• Uses CustomEvent, DOM APIs, local storage, and cookies
• Checks navigator.globalPrivacyControl when available