docmd includes an accessible, zero-dependency GDPR cookie consent banner built directly into the UI engine. It stores user preferences in localStorage with configurable TTL and emits a custom DOM event for analytics script triggers.

Quick Setup

Enable cookie consent in your docmd.config.json manifest:

{
  "cookie": {
    "enabled": true,
    "message": "We use cookies to ensure you get the best experience.",
    "policyUrl": "/privacy",
    "position": "bottom-right"
  }
}

The banner displays on initial visit. Choice preferences are persisted in local browser storage across page loads.

Configuration Reference

Position Modes

Localisation (i18n)

All user-facing strings support docmd’s translation system. Override consent keys in your translations/<locale>.json files:

{
  "cookieMessage": "Cette page utilise des cookies pour vous offrir la meilleure expérience.",
  "cookieAccept": "Accepter",
  "cookieDecline": "Refuser",
  "cookiePolicy": "Politique de confidentialité",
  "cookieConsent": "Consentement aux cookies"
}

Reacting to User Consent Events

A CustomEvent named docmd:cookie-consent is dispatched on the window object when a user accepts, declines, or dismisses the banner:

window.addEventListener('docmd:cookie-consent', (event) => {
  if (event.detail.value === 'accept') {
    // Initialise analytics, marketing, or tracking scripts
  }
});

The detail.value property returns "accept", "decline", or "dismissed".

Custom Styling & Themes

The banner uses BEM class naming prefixed with .docmd-cookie-banner. Customise styling via custom CSS rules:

.docmd-cookie-banner {
  --accent-color: #ff5a5f;
  border-radius: 16px;
}
.docmd-cookie-banner__btn--accept {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

Disabling Cookie Consent

To disable the cookie banner, omit or remove the cookie configuration block from docmd.config.json.