Docs / Configuration

Configuration

This page is the config. Flip an option, watch the live preview react, copy the generated code. Every option shows its config key — the same names you’ll find in ConsentLoopConfig and the JSON schema.

Categories

Consent categories categories

necessary is always present and required. Add any custom categories you like — these three are just the convention.

functionality
analytics
marketing
Per-service toggles categories.*.services

Let visitors accept Google Analytics but reject Hotjar. Services render as an expandable list inside their category — open the preferences in the preview to see it.

Appearance

Banner layout ui.layout

box is a compact card, cloud a centered pill, bar a full-width strip.

Position ui.position

Nine positions for box & cloud; bar snaps to a top or bottom strip. Everything is position: fixed — zero layout shift by construction.

Preferences surface ui.preferences

The second layer: a centered modal or a right-side drawer. Click “Preferences” in the preview.

Theme ui.theme

auto follows prefers-color-scheme. All colors are CSS tokens you can override.

Design tokens ui.tokens

Override any --cl-* token: accent, radius, spacing, border, font, shadow… Here: accent, corner radius and border.

Buttons & extras

ui.showRejectAll keeps a one-click Reject right next to Accept — no hunting through settings (keep it on under GDPR — it’s the law, and it’s the decent thing). ui.floatingButton shows a reopen bubble after consent. ui.branding toggles the small credit in the banner and preferences. ui.scrollLock freezes page scrolling while a layer is open. ui.trapFocus keeps keyboard focus inside the preferences dialog (leave on for WCAG).

showRejectAll
showPreferences
floatingButton
branding
scrollLock
trapFocus

Behavior

Regulation preset regulation

gdpr: opt-in, nothing runs before consent. us-optout: category defaults apply immediately (CCPA-style), the banner offers opting out, Esc dismisses. none: opt-in UI, dismissable.

Google Consent Mode v2 googleConsentMode

Pushes gtag('consent', 'default', …) before Google tags load and update after every choice. See the mapping →

Storage storage

Where consent lives (cookie is visible to your server; localStorage stays client-side), how long it’s valid, and a revision you bump to re-prompt everyone after a policy change.

Content

Language & texts content

Auto-detected from <html lang>, overridable per visitor. 58 ready-made locale packs ship with the npm package (consentloop/locales/*.json) and lazy-load on demand. Any missing key falls back to built-in English. Full guide: Languages →

Show title
💡 Options not shown here — hooks, adapter, manage, autoScripts, per-category autoClear — are covered in the API and Managed guides. The full type contract lives in consentloop/dist/index.d.ts.
yoursite.com