UI Widget — Advanced Configuration

import { ConsentiSetup } from '@consenti/ui'

const widget = new ConsentiSetup({
  // ── Compliance group (optional) ──────────────────────────────────────────────
  compliance: {
    type: 'opt-in',              // see Compliance groups table below
    geoDataProvider: undefined,  // custom function to resolve visitor country
    // Age gate is a per-profile dashboard setting now, not a widget config option —
    // see "UI Widget — Age Gate" guide. The widget reads it off the resolved profile automatically.
    tcf: {                       // see "TCF v2.3 Implementation Guide"; cmpId/cmpVersion
      enabled: false,            // must match the backend's tcf config
      cmpId: 0,
      cmpVersion: 1,
    },
    gpp: {                       // IAB GPP (US National section); must match the backend's gpp config
      enabled: false,
      cmpId: 0,
      cmpVersion: 1,
      mspaCoveredTransaction: false,
      mspaOptOutOptionMode: 0,   // 0 = not applicable | 1 = yes | 2 = no
      mspaServiceProviderMode: 0,
    },
  },

  // ── Core behaviour (optional) ───────────────────────────────────────────────
  core: {
    tenantId: 'my-site',         // logical identifier for this installation
    locale: 'en',                // BCP 47; falls back to language prefix, then 'en'
    dir: 'auto',                 // 'ltr' | 'rtl' | 'auto' — 'auto' derives from locale
    storage: 'cookie',           // 'cookie' | 'localStorage'
    cookieName: 'consenti_data', // cookie/localStorage key name; default: 'consenti_data'
    cookieDomains: '.example.com',
    cookieSigningKey: undefined, // set to HMAC-sign the consent cookie; unset = unsigned
    allowReceipt: true,
    disableCssTemplate: false,
    userId: 'server-assigned-uuid', // authenticated users only
    usePrebuiltProfiles: 'all',  // 'all' | [ComplianceGroupId, ...] — load pre-built profiles instead of resolving via the API
    cacheResolvedProfiles: true, // cache resolved profile in sessionStorage (1h TTL)
    console: ['error', 'warn'],  // log levels to emit; 'error' | 'warn' | 'info' | 'debug'
    theme: {
      colorBg: '#ffffff',
      colorText: '#1a1a1a',
      colorTextMuted: '#6b7280',
      colorPrimary: '#1565c0',
      colorPrimaryText: '#ffffff',
      colorSecondary: '#f0f4f8',
      colorSecondaryText: '#1a3460',
      colorBorder: '#e2e8f0',
      colorSecondaryBorder: '#1a3460',
      colorOverlay: '#04111f',
      colorAccent: '#d32f2f',
      colorAccentText: '#ffffff',
      fontFamily: 'system-ui, sans-serif',
      fontFamilyMono: 'ui-monospace, monospace',
      fontSizeBase: '14px',
      fontSizeHeading: '18px',
      fontSizeMultiplier: '1',
      fontWeightHeading: '600',
      lineHeight: '1.5',
      spacingXs: '5px',
      spacingSm: '8px',
      spacingMd: '16px',
      spacingLg: '24px',
      borderRadius: '8px',
      borderRadiusBtn: '4px',
      shadow: '0 4px 24px rgba(21, 101, 192, 0.14)',
      toggleBgOn: '#1565c0',
      toggleBgPartial: '#97c098',
      toggleBgOff: '#cccccc',
      toggleKnob: '#ffffff',
      toggleWidth: '52px',
      toggleHeight: '28px',
      zBanner: '9999',
      zOverlay: '9998',
      zModal: '10000',
    },
  },

  // ── Mount point (optional) ───────────────────────────────────────────────────
  rootEl: '#consenti-root', // CSS selector or HTMLElement; omit to use document.body

  // ── Dark mode (optional) ─────────────────────────────────────────────────────
  darkMode: false,               // true = apply dark colour tokens to the widget

  // ── Auto Initialize widget (optional) ────────────────────────────────────────
  autoInit: true,

  // ── Hide Powered By Consenti text from banner/modal (optional) ───────────────
  hidePoweredBy: true,

  // ── Backend API (optional) ──────────────────────────────────────────────────
  api: {
    enabled: true,
    baseUrl: 'https://your-site.com',
    authToken: '',
    tenantId: 'my-site',         // tenant identifier sent with API requests
    complianceGroup: 'opt-in',   // skip auto-resolution; always fetch this group's profile
    trustDomain: false,          // bypass domain allowlist check (dev/test only)
  },

  // ── Integrations (optional) ─────────────────────────────────────────────────
  utils: {
    gtm: {
      containerId: 'GTM-XXXXXX',
      dataLayer: 'dataLayer',
      events: [],             // [] = all events
      urlPassthrough: true,
      adsDataRedaction: false,
    },
  },

  // ── Frontend plugins (optional) ─────────────────────────────────────────────
  plugins: [],

  // ── Runtime profile overrides (optional) ────────────────────────────────────
  profileOverride: {
    mainBanner: { position: 'top' },
  },
})

import type { WidgetCountryResolverFn } from '@consenti/ui'

// geoDataProvider only runs for compliance.type: 'auto' — a fixed type (e.g. 'opt-in')
// never calls it, since there's no group to detect.
const geoResolver: WidgetCountryResolverFn = async () => {
  const res = await fetch('/api/geo')
  const data = await res.json()
  return { country: data.country, region: data.region ?? null, confidence: data.confidence ?? 1 }
}

new ConsentiSetup({
  compliance: {
    type: 'auto',
    geoDataProvider: geoResolver,
  },
})

// Or skip the jurisdiction-map lookup entirely when your source already knows the group:
const consentModelResolver: WidgetCountryResolverFn = async () => {
  const res = await fetch('/api/geo')
  const data = await res.json()
  return {
    country: data.country,
    region: data.region ?? null,
    confidence: 1,
    complianceGroup: data.consentModel, // e.g. an operator-defined custom group id
  }
}

new ConsentiSetup({
  compliance: { type: 'opt-out-strict' },
  profileOverride: {
    gpcMode: 'strict', // deny silently, no banner shown
  },
})

import { buildSyncGpcSnippet } from '@consenti/ui'

// Server-side (e.g. a Next.js layout, or any template that renders <head>):
buildSyncGpcSnippet() // default dataLayer name
buildSyncGpcSnippet({ dataLayerName: 'myDataLayer' }) // custom dataLayer name

<head>
  <!-- 1. Sync GPC freeze — first, before anything else that loads tags -->
  <script>(function(){if(typeof navigator!=="undefined"&&navigator.globalPrivacyControl===true){window.dataLayer=window.dataLayer||[];if(typeof window.gtag!=="function"){window.gtag=function(){window.dataLayer.push(arguments)}}window.gtag("consent","default",{ad_storage:"denied",analytics_storage:"denied",ad_user_data:"denied",ad_personalization:"denied",functionality_storage:"granted",personalization_storage:"denied",security_storage:"granted",ads_data_redaction:"true",url_passthrough:"false"});window.__consentiGpcPreFrozen=true}})();</script>

  <!-- 2. GTM / gtag.js -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>

  <!-- 3. Consenti's own bundle, loaded normally -->
  <script src="https://cdn.jsdelivr.net/npm/@consenti/ui/dist/index.umd.js"></script>
</head>

new ConsentiSetup({
  compliance: { type: 'opt-in' },
  core: {
    theme: {
      colorPrimary: '#7c3aed',      // purple accent
      colorPrimaryText: '#ffffff',
      borderRadius: '12px',
      borderRadiusBtn: '999px',  // pill buttons
      fontFamily: 'Inter, sans-serif',
    },
  },
})

new ConsentiSetup({
  api: {
    enabled: true,
    baseUrl: 'https://consent.example.com', // API is on a subdomain
  },
  // compliance group resolved automatically per-visitor via /resolve-profile
})

new ConsentiSetup({
  compliance: { type: 'opt-in' },
  api: {
    enabled: true,
    baseUrl: 'https://consent.example.com',
    complianceGroup: 'opt-in', // always fetch the GDPR-model profile
  },
})

new ConsentiSetup({
  compliance: { type: 'opt-in' },
  utils: {
    gtm: {
      containerId: 'GTM-XXXXXX', // omit if you load GTM/gtag.js yourself
      urlPassthrough: true,      // cookieless conversion modelling
      adsDataRedaction: true,    // redact ad pings when consent denied
    },
  },
})

import { SegmentPlugin } from '@consenti/ui-plugin-segment'

new ConsentiSetup({
  compliance: { type: 'opt-in' },
  plugins: [
    new SegmentPlugin({ writeKey: 'YOUR_WRITE_KEY' }),
  ],
})

// Checkout page — move banner out of the way
new ConsentiSetup({
  compliance: { type: 'opt-in' },
  profileOverride: {
    mainBanner: { position: 'right-bottom' },
  },
})

new ConsentiSetup({
  compliance: { type: 'opt-in' },
  profileOverride: {
    mainBanner: {
      buttons: {
        'accept': { text: 'Accept',  style: 'primary',   action: 'custom', cookies: '*' },
        'decline': { text: 'Decline', style: 'primary', action: 'custom', cookies: '!' },
      },
    },
  },
})

new ConsentiSetup({
  compliance: { type: 'opt-in' },
  profileOverride: {
    preferenceModal: {
      categories: { marketing: null },   // deletes the 'marketing' category entirely
    },
  },
})

// HTML: <div id="consent-wrapper"></div>
new ConsentiSetup({
  compliance: { type: 'opt-in' },
  rootEl: '#consent-wrapper',   // CSS selector
  // rootEl: document.getElementById('consent-wrapper')!,  // or HTMLElement directly
})

new ConsentiSetup({
  compliance: { type: 'opt-in' },
  darkMode: true,
})

// Or detect the user's OS preference:
new ConsentiSetup({
  compliance: { type: 'opt-in' },
  darkMode: window.matchMedia('(prefers-color-scheme: dark)').matches,
})

const widget = new ConsentiSetup({
  compliance: { type: 'opt-in' },
  rootEl: '#consent-mount',
  autoInit: false,
})

// Later, once the mount point exists in the DOM:
await widget.init()
widget.onReady(() => console.log('Ready:', widget.hasConsent()))

new ConsentiSetup({ })

new ConsentiSetup({ compliance: { type: 'opt-in' } })

new ConsentiSetup({ compliance: { type: 'opt-out' } })

new ConsentiSetup({
  compliance: { type: 'opt-in' },
  core: {
    storage: 'cookie',
    cookieDomains: '.example.com', // shared across app.example.com, www.example.com, etc.
  },
})

// Server renders the page with the authenticated user's UUID
new ConsentiSetup({
  core: {
    userId: '{{ server_user_id }}',
  },
  api: { enabled: true },
})

new ConsentiSetup({
  compliance: { type: 'opt-in' },
  profileOverride: {
    gpcMode: 'strict', // deny silently, no banner shown
  },
  utils: {
    gtm: { containerId: 'GTM-XXXXXX', adsDataRedaction: true },
  },
})

import type {
  ConsentiConfig,          // top-level config object
  ComplianceWidgetConfig,  // compliance section
  TcfWidgetConfig,         // compliance.tcf section
  WidgetCountryResolverFn, // custom geo resolver function type
  CoreConfig,              // core section
  ApiConfig,               // api section
  UtilsConfig,             // utils section
  GtmConfig,               // utils.gtm section
  ThemeConfig,             // core.theme section
} from '@consenti/ui'