Untitled

Policy packs configure how c15t handles regional consent — which model (opt-in, opt-out, none), which categories, and what UI to show. The backend resolves the right policy automatically based on the visitor's location.

For most apps, you just need a ConsentManagerProvider pointing at your backend with presets configured there. The frontend receives the resolved policy via the /init response — no client-side policy config required.

When a backend isn't available — local development, static previews, Storybook, automated tests, or as a resilience fallback during a temporary outage — you can pass policies directly to the provider via offlinePolicy.policyPacks and c15t resolves them locally.

Hosted Mode (Recommended)

When using inth.com or a self-hosted backend, the provider connects automatically. No policy configuration is needed on the frontend:

<ConsentManagerProvider
  options={{
    backendURL: 'https://your-instance.c15t.dev',
  }}
>
  <ConsentBanner />
  <ConsentDialog />
  {children}
</ConsentManagerProvider>;

The backend resolves the correct policy based on the visitor's geo data and returns it in the /init response. Configure your presets on the backend side.

Offline Presets (Development and Fallback)

Use offline presets mainly for local development, Storybook, deterministic tests, or temporary backend outages:

import { policyPackPresets } from '@c15t/react';

offlinePolicy: {
  i18n: {
    defaultProfile: 'default',
    messages: {
      default: {
        translations: {
          en: { cookieBanner: { title: 'Privacy choices' } },
        },
      },
      eu: {
        fallbackLanguage: 'en',
        translations: {
          en: { cookieBanner: { title: 'EU GDPR Consent' } },
          fr: { cookieBanner: { title: 'Consentement RGPD' } },
          de: { cookieBanner: { title: 'GDPR-Einwilligung' } },
        },
      },
    },
  },
  policyPacks: [
    {
      ...policyPackPresets.europeOptIn(),
      i18n: { messageProfile: 'eu' },
    },
    policyPackPresets.californiaOptOut(),
    policyPackPresets.worldNoBanner(),
  ],
}

Available presets:

Provider Shape

Configure packs through offlinePolicy.policyPacks. Add offlinePolicy.i18n when you want local previews or fallback behavior to mirror hosted policy-profile language behavior:

<ConsentManagerProvider
  options={{
    mode: 'offline',
    offlinePolicy: {
      i18n: {
        defaultProfile: 'default',
        messages: {
          default: {
            translations: {
              en: { cookieBanner: { title: 'Privacy choices' } },
            },
          },
          qc: {
            fallbackLanguage: 'fr',
            translations: {
              en: { cookieBanner: { title: 'Quebec Privacy Settings' } },
              fr: { cookieBanner: { title: 'Paramètres de confidentialité du Québec' } },
            },
          },
        },
      },
      policyPacks: [
        {
          id: 'qc_opt_in',
          match: { regions: [{ country: 'CA', region: 'QC' }] },
          i18n: { messageProfile: 'qc' },
          consent: { model: 'opt-in', expiryDays: 365 },
          ui: { mode: 'banner' },
        },
        {
          id: 'default',
          match: { isDefault: true },
          consent: { model: 'none' },
          ui: { mode: 'none' },
        },
      ],
    },
    overrides: { country: 'CA', region: 'QC' },
  }}
>

With that setup, offline mode resolves language the same way as hosted mode:

• the active policy profile defines the allowed language set
• each profile can define its own fallbackLanguage
• built-in translations only fill missing keys for the selected language

Fallback Behavior

Omitting the option gives you a safe opt-in default for local development and outage scenarios. Providing it tells c15t you want deterministic preview or fallback behavior exactly as configured.

QA and Debugging

The best way to test regional consent behavior is with the c15t DevTools. The DevTools Policy panel lets you simulate different countries, regions, and GPC signals against your real backend — no code changes needed.

For deeper inspection:

• Read policy and policyDecision from useConsentManager() to see the resolved config
• Open the DevTools Policy panel to inspect matcher resolution and fingerprints
• Compare your frontend preview with the backend /init response before shipping

If you need fully deterministic resolution without a backend during testing or preview work (for example, in automated tests or Storybook), pair offlinePolicy.policyPacks with overrides:

options={{
  mode: 'offline',
  offlinePolicy: {
    policyPacks: [
      policyPackPresets.europeOptIn(),
      policyPackPresets.californiaOptOut(),
      policyPackPresets.worldNoBanner(),
    ],
  },
  overrides: {
    country: 'US',
    region: 'CA',
    language: 'en-US',
    gpc: true, // Simulate Global Privacy Control
  },
}}