Documentation

Consent Manager Provider

ConsentManagerProvider is the root component for the c15t consent system. It initializes the consent store, detects the user's jurisdiction, resolves translations, and provides consent state to all child components via React context.

Every other c15t component and hook must be rendered inside this provider.

Options Reference

Warning: ExtractedTypeTable: Could not extract "CommonInlineStoreOptions" from "./packages/ui/src/theme/options.ts" using base path "/vercel/path0/apps/c15t-docs/.leadtype/c15t". Verify the path/name and that the file is included by your tsconfig.

Property

Types

No properties found matching your criteria.

Loading…

Warning: ExtractedTypeTable: Could not extract "ConsentManagerContentOptions" from "./packages/ui/src/theme/options.ts" using base path "/vercel/path0/apps/c15t-docs/.leadtype/c15t". Verify the path/name and that the file is included by your tsconfig.

Property

Types

No properties found matching your criteria.

Loading…

Warning: ExtractedTypeTable: Could not extract "UIOptions" from "./packages/ui/src/theme/types.ts" using base path "/vercel/path0/apps/c15t-docs/.leadtype/c15t". Verify the path/name and that the file is included by your tsconfig.

Property

Types

No properties found matching your criteria.

Loading…

Content Security Policy

c15t injects a <style id="c15t-theme"> element for your theme tokens, and the script loader injects a <script> element per consented vendor. Under a nonce-based Content Security Policy, both are blocked unless they carry your nonce.

Pass it once through the nonce option and c15t applies it to everything it injects:

<ConsentManagerProvider
  options={{
    mode: 'offline',
    nonce: yourRequestNonce,
  }}
>
  {children}
</ConsentManagerProvider>

A nonce set on an individual script definition still wins, so you can override a single vendor without changing the provider.

Info

Browsers hide the nonce content attribute once a policy is active. Inspecting the element shows no nonce="", but element.nonce still returns the value — this is expected and not a sign that c15t dropped it.

Inline style attributes

The nonce option covers the elements c15t injects. It cannot cover inline style="..." attributes, which several components rely on — a nonce never authorizes a style attribute, because nonces apply to elements only.

Style attributes are governed by style-src-attr, and when that directive is absent CSP falls back to style-src. A nonce-based style policy therefore blocks them:

style-src 'self' 'nonce-abc123';

To keep the nonce requirement for stylesheets while still allowing style attributes, set style-src-attr explicitly:

style-src 'self' 'nonce-abc123';
style-src-attr 'unsafe-inline';

Warning

'unsafe-inline' on style-src-attr permits any inline style attribute on the page. That is weaker than a nonce, but far narrower than replacing your nonce-based style-src with 'unsafe-inline', which would additionally authorize arbitrary injected <style> elements. Note that adding 'unsafe-inline' alongside a nonce achieves nothing — a directive that specifies a nonce ignores it. If your threat model does not allow this, expect components that use inline styles to render unstyled.

Legal Links

legalLinks defines the URLs shown in consent UI text (banner, dialog, and widget where applicable). Configure only the links you want to expose.

<ConsentManagerProvider
  options={{
    backendURL: 'https://your-instance.c15t.dev',
    legalLinks: {
      privacyPolicy: {
        href: '/privacy',
        target: '_self',
      },
      cookiePolicy: {
        href: '/cookies',
        target: '_self',
      },
      termsOfService: {
        href: 'https://example.com/terms',
        target: '_blank',
        rel: 'noopener noreferrer',
        label: 'Terms of Service',
      },
    },
  }}
>

Notes:

Omitting a key (for example termsOfService) hides that link.
label overrides the translated text for that single link.
Use _self for internal pages and _blank + rel="noopener noreferrer" for external pages.
Control which of the configured links render in each component via the component's legalLinks prop.

Overrides

overrides lets you force location/language signals instead of browser or network detection. This is useful for QA, local development, and preview environments.

<ConsentManagerProvider
  options={{
    backendURL: 'https://your-instance.c15t.dev',
    overrides: {
      country: 'DE',
      region: 'BY',
      language: 'de-DE',
    },
  }}
>

You can also override Global Privacy Control (GPC) behavior during testing:

<ConsentManagerProvider
  options={{
    backendURL: 'https://your-instance.c15t.dev',
    overrides: {
      gpc: true,
    },
  }}
>

Warning

Treat overrides as an environment/testing tool. Avoid hard-coding production overrides unless that behavior is intentional for your deployment.

Policy Packs

In hosted mode (recommended), the backend resolves the correct policy automatically — no frontend policy config needed:

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

Fallback: Offline Policies

When no backend is available, ConsentManagerProvider accepts offlinePolicy.policyPacks for local policy resolution during development, testing, previews, or temporary backend outages:

<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_world',
          match: { isDefault: true },
          consent: { model: 'none' },
          ui: { mode: 'none' },
        },
      ],
    },
    overrides: {
      country: 'CA',
      region: 'QC',
    },
  }}
>

Notes:

offlinePolicy is only used in offline mode.
Treat offline policies as a development/testing tool or resilience fallback, not the primary production source of truth.
offlinePolicy.i18n lets offline mode mirror hosted messageProfile and profile-local fallbackLanguage behavior.
Omitting offlinePolicy.policyPacks uses the built-in synthetic opt-in fallback banner. Hosted network fallback uses the same opt-in banner.
offlinePolicy: { policyPacks: [] } is explicit no-banner mode.
In hosted mode, backend policyPacks remain the source of truth — frontend offline policies never override a live backend decision.

Read the full guide at Policy Packs and the conceptual model at Policy Packs Concept.

Props

Warning: ExtractedTypeTable: Could not extract "ConsentManagerProviderProps" from "./packages/react/src/types/consent-manager.ts" using base path "/vercel/path0/apps/c15t-docs/.leadtype/c15t". Verify the path/name and that the file is included by your tsconfig.

Property

Types

No properties found matching your criteria.

Loading…