Consenti

UI Widget — Configuration

new ConsentiSetup(config) accepts a single ConsentiConfig object. All top-level keys are optional — the widget works with an empty config object, auto-detecting the compliance group from the browser. This page covers the handful of options most sites need.

Minimal config to get started

This is all you need for a fully working consent banner. Everything below is optional.

main.ts
ts
import { ConsentiSetup } from '@consenti/ui'

// Auto-detects compliance from browser locale (GDPR, CCPA, etc.)
const widget = new ConsentiSetup({})

// Or pin a specific compliance group:
// new ConsentiSetup({ compliance: { type: 'opt-in' } })   // GDPR
// new ConsentiSetup({ compliance: { type: 'opt-out' } })  // CCPA

The options you'll change first

KeyDefaultWhat it does
compliance.typeauto-detectedPin one of the 8 built-in compliance groups instead of geo-detecting — see the Jurisdiction Coverage Map for every country and its assigned group.
core.locale'en'BCP 47 locale code for banner/modal text, e.g. 'fr', 'fr-CA'.
core.themebuilt-in blue themeColours, fonts, and border radius via CSS custom properties.
api.enabledfalseConnect to a running @consenti/api backend for server-recorded consent and admin-managed profiles.
profileOverrideundefinedPatch banner copy, buttons, or position without defining a full profile — see below.

To tweak copy, buttons, or position without defining a full profile, use profileOverride:

ts
new ConsentiSetup({
  compliance: { type: 'opt-in' },
  profileOverride: {
    mainBanner: {
      heading: 'We value your privacy',
      htmlText: 'We use cookies to improve your experience.',
      buttons: {
        'accept-all': { text: 'Accept All',     style: 'primary',   action: 'custom', cookies: '*' },
        'reject-optional': { text: 'Reject Optional',style: 'primary', action: 'custom', cookies: '!' },
        'customize': { text: 'Customize',      style: 'secondary', action: 'manage' },
      },
    },
  },
})

Setting a key to null instead of a value deletes it from the merged result (removing a single category or parameter from a keyed map, for example) — see profileOverride in the Advanced Configuration reference for the full deep-merge and delete semantics.

ℹ️This page covers the common cases. For every field — core, api, utils.gtm, plugins, theming tokens, TCF, age gate, and more — see the Advanced Configuration reference.