Cookie banner

First-party cookie consent modal for kuntarekry and kirkkorekry, with bundled fi, en, and sv content.

Examples

Usage

Cookie banner is published as a separate package: @duo/cookiebanner. It is not included in @duo/ui. It is an imperative API (not a custom element): call initCookieBanner from the host app.

It mounts the Duo consent modal in the light DOM. Load tokens (and optionally @duo/styles) so --duo-* variables resolve, then the banner CSS.

import "@duo/tokens/css";
import "@duo/cookiebanner/css";
import {
  initCookieBanner,
  getConsent,
  showPreferences,
  onCookieBannerEvent,
} from "@duo/cookiebanner";

await initCookieBanner({
  environment: "kuntarekry", // or "kirkkorekry"
  lang: "fi", // optional; defaults to "fi"
});

onCookieBannerEvent("consentChanged", ({ consent }) => {
  if (consent?.statistics) {
    // enable analytics
  }
});

Consent is stored in the first-party cookie talentech_consent. If it already exists, the modal stays closed and hasResponse is true. window.DuoCookieBanner exposes consent, hasResponse, renew, and showPreferences for host helpers.

Do

Pass environment (kuntarekry or kirkkorekry) and optional lang (fi, en, sv).
Gate tracking on getConsent()?.statistics (and the other category flags) after consentChanged.
Call showPreferences() from a footer “cookie settings” control so users can change their choice.
Edit shared chrome in content/ui.json and per-product cookies in content/<environment>.json.
Expect two footer actions at a time: Allow necessary plus either Allow all (default) or Allow selection once an optional category is on.

Don’t

Don’t mount a second consent manager on the same page.
Don’t treat first paint as consent — wait until the user responds or a stored cookie is applied.
Don’t expect automatic third-party script blocking; this is a consent gate only.

Environments

Environment	Cookie tables
`kuntarekry`	First-party cookies on kuntarekry.fi and kuntarekrytointi.fi.
`kirkkorekry`	First-party cookies on kirkkorekry.fi and kirkkorekrytointi.fi, plus extra necessary cookies.

UI strings (title, buttons, category labels) are shared. Invalid lang falls back to Finnish.

API

Export	Role
`initCookieBanner({ environment, lang? })`	Mounts the banner; shows it when there is no stored consent.
`getConsent()`	`{ necessary, preferences, statistics, marketing, method? }` or `null`.
`renew()` / `showPreferences()`	Reopen the dialog with the current selection.
`onCookieBannerEvent(type, handler)`	Subscribe; returns an unsubscribe function.
`destroyCookieBanner()`	Tear down DOM and module state (Storybook / tests).

Events

Prefer onCookieBannerEvent. The same lifecycle also fires on window:

Type	Window event	When
`ready`	`DuoCookieBannerReady`	Initialized
`accept`	`DuoCookieBannerAccept`	Allow all or Allow selection
`decline`	`DuoCookieBannerDecline`	Allow necessary only
`consentChanged`	`DuoCookieBannerConsentChanged` (and the events above)	Any consent lifecycle update