@c15t/nextjs 2.2.1 → 3.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (221) hide show
  1. package/AGENTS.md +103 -142
  2. package/README.md +4 -4
  3. package/dist/api.js +1 -0
  4. package/dist/config.js +1 -0
  5. package/dist/devtools.js +2 -0
  6. package/dist/headers.js +1 -0
  7. package/dist/iab/styles.css +1 -1
  8. package/dist/iab/styles.tw3.css +27 -19
  9. package/dist/index.js +1 -1
  10. package/dist/middleware.js +1 -0
  11. package/dist/node-bridge.js +1 -0
  12. package/dist/pages.js +1 -0
  13. package/dist/proxy.js +1 -0
  14. package/dist/root.js +2 -0
  15. package/dist/server.js +1 -0
  16. package/dist/static.js +1 -0
  17. package/dist/styles.css +1 -1
  18. package/dist/styles.tw3.css +67 -29
  19. package/dist/version.js +1 -1
  20. package/dist-types/api.d.ts +88 -0
  21. package/dist-types/config.d.ts +110 -0
  22. package/dist-types/devtools.d.ts +1 -0
  23. package/dist-types/headers.d.ts +4 -0
  24. package/dist-types/index.d.ts +28 -10
  25. package/dist-types/middleware.d.ts +15 -0
  26. package/dist-types/node-bridge.d.ts +57 -0
  27. package/dist-types/pages.d.ts +88 -0
  28. package/dist-types/proxy.d.ts +34 -0
  29. package/dist-types/root.d.ts +92 -0
  30. package/dist-types/server.d.ts +164 -0
  31. package/dist-types/static.d.ts +42 -0
  32. package/dist-types/types.d.ts +5 -36
  33. package/dist-types/version.d.ts +1 -1
  34. package/docs/README.md +103 -142
  35. package/docs/assets/v3/brand-bar.png +0 -0
  36. package/docs/assets/v3/brand-card.png +0 -0
  37. package/docs/assets/v3/choice-wall.png +0 -0
  38. package/docs/assets/v3/mobile-card.png +0 -0
  39. package/docs/assets/v3/preferences.png +0 -0
  40. package/docs/customization/overview.md +45 -0
  41. package/docs/customization/recipes.md +79 -0
  42. package/docs/customization/slots.md +55 -0
  43. package/docs/customization/tokens.md +76 -0
  44. package/docs/customization/translations.md +49 -0
  45. package/docs/frameworks/next/api-reference/data-fetching.md +416 -0
  46. package/docs/frameworks/next/app-router.md +403 -0
  47. package/docs/frameworks/next/client-side.md +118 -0
  48. package/docs/frameworks/next/components/consent-banner.md +251 -211
  49. package/docs/frameworks/next/components/consent-dialog-link.md +96 -35
  50. package/docs/frameworks/next/components/consent-dialog-trigger.md +74 -149
  51. package/docs/frameworks/next/components/consent-dialog.md +189 -134
  52. package/docs/frameworks/next/components/consent-manager-provider.md +68 -318
  53. package/docs/frameworks/next/components/consent-widget.md +172 -114
  54. package/docs/frameworks/next/components/dev-tools.md +199 -40
  55. package/docs/frameworks/next/components/frame.md +137 -42
  56. package/docs/frameworks/next/concepts/consent-categories.md +24 -89
  57. package/docs/frameworks/next/concepts/policy-presets.md +142 -0
  58. package/docs/frameworks/next/content-security-policy.md +189 -0
  59. package/docs/frameworks/next/data-fetching.md +74 -0
  60. package/docs/frameworks/next/geography-headers.md +251 -0
  61. package/docs/frameworks/next/headless.md +95 -185
  62. package/docs/frameworks/next/hooks/use-consent-manager/overview.md +42 -163
  63. package/docs/frameworks/next/iab/overview.md +37 -107
  64. package/docs/frameworks/next/optimization.md +158 -194
  65. package/docs/frameworks/next/pages-router.md +296 -0
  66. package/docs/frameworks/next/quickstart.md +31 -132
  67. package/docs/frameworks/next/script-loader.md +140 -465
  68. package/docs/frameworks/next/server-side.md +97 -130
  69. package/docs/frameworks/next/static-export.md +164 -0
  70. package/docs/frameworks/next/styling/overview.md +174 -248
  71. package/docs/frameworks/next/troubleshooting.md +134 -144
  72. package/docs/guides/consent-state.md +60 -0
  73. package/docs/guides/data-fetching.md +163 -0
  74. package/docs/guides/deployment-modes.md +63 -0
  75. package/docs/guides/troubleshooting.md +68 -0
  76. package/docs/guides/verify-consent.md +62 -0
  77. package/docs/integrations/adobe-analytics.md +239 -105
  78. package/docs/integrations/ahrefs-analytics.md +238 -104
  79. package/docs/integrations/amplitude.md +219 -157
  80. package/docs/integrations/building-integrations.md +32 -224
  81. package/docs/integrations/clear-on-revocation.md +167 -0
  82. package/docs/integrations/clearbit.md +247 -86
  83. package/docs/integrations/cloudflare-web-analytics.md +250 -84
  84. package/docs/integrations/crisp.md +251 -97
  85. package/docs/integrations/databuddy.md +259 -153
  86. package/docs/integrations/fathom-analytics.md +239 -96
  87. package/docs/integrations/google-maps.md +328 -207
  88. package/docs/integrations/google-tag-manager.md +248 -96
  89. package/docs/integrations/google-tag.md +261 -90
  90. package/docs/integrations/heap.md +222 -149
  91. package/docs/integrations/hightouch.md +225 -131
  92. package/docs/integrations/hotjar.md +239 -90
  93. package/docs/integrations/intercom.md +239 -98
  94. package/docs/integrations/linkedin-insights.md +243 -113
  95. package/docs/integrations/logrocket.md +241 -123
  96. package/docs/integrations/matomo-analytics.md +256 -111
  97. package/docs/integrations/meta-pixel.md +197 -324
  98. package/docs/integrations/microsoft-clarity.md +233 -114
  99. package/docs/integrations/microsoft-uet.md +245 -110
  100. package/docs/integrations/mixpanel-analytics.md +252 -87
  101. package/docs/integrations/openai-pixel.md +441 -0
  102. package/docs/integrations/overview.md +95 -133
  103. package/docs/integrations/pirsch.md +249 -96
  104. package/docs/integrations/plausible-analytics.md +241 -100
  105. package/docs/integrations/posthog.md +353 -214
  106. package/docs/integrations/promptwatch.md +251 -81
  107. package/docs/integrations/reddit-pixel.md +226 -173
  108. package/docs/integrations/rudderstack.md +244 -187
  109. package/docs/integrations/rybbit-analytics.md +244 -91
  110. package/docs/integrations/segment.md +238 -92
  111. package/docs/integrations/snapchat-pixel.md +240 -110
  112. package/docs/integrations/tiktok-pixel.md +249 -81
  113. package/docs/integrations/umami-analytics.md +242 -95
  114. package/docs/integrations/vercel-analytics.md +242 -90
  115. package/docs/integrations/x-pixel.md +238 -104
  116. package/docs/integrations/youtube.md +354 -142
  117. package/docs/upgrade-v3.md +334 -0
  118. package/iab/styles.css +1 -1
  119. package/iab/styles.tw3.css +1 -1
  120. package/package.json +106 -65
  121. package/readme.json +3 -3
  122. package/src/iab/styles.css +1 -1
  123. package/src/iab/styles.tw3.css +1 -1
  124. package/src/styles.css +1 -1
  125. package/src/styles.tw3.css +1 -1
  126. package/styles.css +1 -1
  127. package/styles.tw3.css +1 -1
  128. package/client/components/consent-dialog-link.js +0 -3
  129. package/client/components/integrations.js +0 -3
  130. package/dist/components/integrations/index.cjs +0 -1
  131. package/dist/components/integrations/index.js +0 -1
  132. package/dist/headless.cjs +0 -1
  133. package/dist/index.cjs +0 -1
  134. package/dist/libs/browser-initial-data.cjs +0 -1
  135. package/dist/libs/browser-initial-data.js +0 -1
  136. package/dist/libs/initial-data.cjs +0 -1
  137. package/dist/libs/initial-data.js +0 -1
  138. package/dist/types.cjs +0 -1
  139. package/dist/version.cjs +0 -1
  140. package/dist-types/components/integrations/index.d.ts +0 -1
  141. package/dist-types/libs/browser-initial-data.d.ts +0 -9
  142. package/dist-types/libs/initial-data.d.ts +0 -33
  143. package/docs/frameworks/next/building-headless-components.md +0 -379
  144. package/docs/frameworks/next/callbacks.md +0 -186
  145. package/docs/frameworks/next/concepts/client-modes.md +0 -177
  146. package/docs/frameworks/next/concepts/consent-models.md +0 -117
  147. package/docs/frameworks/next/concepts/cookie-management.md +0 -122
  148. package/docs/frameworks/next/concepts/glossary.md +0 -24
  149. package/docs/frameworks/next/concepts/initialization-flow.md +0 -149
  150. package/docs/frameworks/next/concepts/policy-packs.md +0 -230
  151. package/docs/frameworks/next/hooks/use-color-scheme.md +0 -41
  152. package/docs/frameworks/next/hooks/use-consent-manager/checking-consent.md +0 -96
  153. package/docs/frameworks/next/hooks/use-consent-manager/location-info.md +0 -97
  154. package/docs/frameworks/next/hooks/use-consent-manager/setting-consent.md +0 -94
  155. package/docs/frameworks/next/hooks/use-draggable.md +0 -59
  156. package/docs/frameworks/next/hooks/use-focus-trap.md +0 -42
  157. package/docs/frameworks/next/hooks/use-reduced-motion.md +0 -37
  158. package/docs/frameworks/next/hooks/use-ssr-status.md +0 -32
  159. package/docs/frameworks/next/hooks/use-text-direction.md +0 -50
  160. package/docs/frameworks/next/hooks/use-translations.md +0 -55
  161. package/docs/frameworks/next/iab/consent-banner.md +0 -91
  162. package/docs/frameworks/next/iab/consent-dialog.md +0 -129
  163. package/docs/frameworks/next/iab/use-gvl-data.md +0 -21
  164. package/docs/frameworks/next/iframe-blocking.md +0 -106
  165. package/docs/frameworks/next/internationalization.md +0 -207
  166. package/docs/frameworks/next/network-blocker.md +0 -140
  167. package/docs/frameworks/next/policy-packs.md +0 -248
  168. package/docs/frameworks/next/styling/classnames.md +0 -94
  169. package/docs/frameworks/next/styling/color-scheme.md +0 -84
  170. package/docs/frameworks/next/styling/css-variables.md +0 -53
  171. package/docs/frameworks/next/styling/slots.md +0 -94
  172. package/docs/frameworks/next/styling/tailwind.md +0 -137
  173. package/docs/frameworks/next/styling/tokens.md +0 -156
  174. package/docs/shared/concepts/client-modes.md +0 -103
  175. package/docs/shared/concepts/consent-categories.md +0 -41
  176. package/docs/shared/concepts/consent-models.md +0 -72
  177. package/docs/shared/concepts/cookie-management.md +0 -88
  178. package/docs/shared/concepts/glossary.md +0 -24
  179. package/docs/shared/concepts/initialization-flow.md +0 -105
  180. package/docs/shared/concepts/policy-packs.md +0 -225
  181. package/docs/shared/react/components/consent-banner.md +0 -242
  182. package/docs/shared/react/components/consent-dialog-link.md +0 -45
  183. package/docs/shared/react/components/consent-dialog-trigger.md +0 -185
  184. package/docs/shared/react/components/consent-dialog.md +0 -119
  185. package/docs/shared/react/components/consent-manager-provider.md +0 -225
  186. package/docs/shared/react/components/consent-widget.md +0 -121
  187. package/docs/shared/react/components/dev-tools.md +0 -81
  188. package/docs/shared/react/components/frame.md +0 -52
  189. package/docs/shared/react/guides/building-headless-components.md +0 -110
  190. package/docs/shared/react/guides/callbacks.md +0 -89
  191. package/docs/shared/react/guides/headless.md +0 -31
  192. package/docs/shared/react/guides/iframe-blocking.md +0 -65
  193. package/docs/shared/react/guides/internationalization.md +0 -123
  194. package/docs/shared/react/guides/network-blocker.md +0 -72
  195. package/docs/shared/react/guides/optimization.md +0 -44
  196. package/docs/shared/react/guides/policy-packs.md +0 -173
  197. package/docs/shared/react/guides/script-loader.md +0 -311
  198. package/docs/shared/react/hooks/use-color-scheme.md +0 -31
  199. package/docs/shared/react/hooks/use-consent-manager/checking-consent.md +0 -95
  200. package/docs/shared/react/hooks/use-consent-manager/location-info.md +0 -96
  201. package/docs/shared/react/hooks/use-consent-manager/overview.md +0 -74
  202. package/docs/shared/react/hooks/use-consent-manager/setting-consent.md +0 -93
  203. package/docs/shared/react/hooks/use-draggable.md +0 -30
  204. package/docs/shared/react/hooks/use-focus-trap.md +0 -20
  205. package/docs/shared/react/hooks/use-reduced-motion.md +0 -33
  206. package/docs/shared/react/hooks/use-ssr-status.md +0 -16
  207. package/docs/shared/react/hooks/use-text-direction.md +0 -38
  208. package/docs/shared/react/hooks/use-translations.md +0 -15
  209. package/docs/shared/react/iab/consent-banner.md +0 -60
  210. package/docs/shared/react/iab/consent-dialog.md +0 -76
  211. package/docs/shared/react/iab/overview.md +0 -80
  212. package/docs/shared/react/iab/use-gvl-data.md +0 -21
  213. package/docs/shared/react/styling/classnames.md +0 -93
  214. package/docs/shared/react/styling/color-scheme.md +0 -35
  215. package/docs/shared/react/styling/css-variables.md +0 -53
  216. package/docs/shared/react/styling/overview.md +0 -261
  217. package/docs/shared/react/styling/slots.md +0 -93
  218. package/docs/shared/react/styling/stylesheet-entrypoint.md +0 -8
  219. package/docs/shared/react/styling/tailwind.md +0 -88
  220. package/docs/shared/react/styling/tokens.md +0 -155
  221. package/docs/shared/troubleshooting.md +0 -82
@@ -1,177 +0,0 @@
1
- ---
2
- title: Client Modes
3
- description: Choose how c15t connects to its backend - full hosted integration,
4
- offline-only, or bring your own backend.
5
- group: frameworks
6
- ---
7
- c15t supports three client modes that determine how consent data is stored and synchronized. Choose the mode that matches your infrastructure:
8
-
9
- * **Hosted mode** - Recommended for production. Backend-backed consent with geolocation, centralized policy resolution, audit history, and offline fallback.
10
- * **Offline mode** - Browser-only storage with no network requests. Best for local development, demos, static deployments, or controlled fallback scenarios.
11
- * **Custom mode** - Bring your own backend with custom endpoint handlers
12
-
13
- > ⚠️ **Warning:**
14
- > If you need durable consent records, server-side enforcement, or automatic jurisdiction detection, use hosted mode. Offline mode cannot provide those guarantees because consent lives only in the browser.
15
-
16
- <span id="c15t-mode" />
17
-
18
- ## Hosted Mode (Recommended)
19
-
20
- The default mode. Connects to a c15t backend for full consent lifecycle management. We recommend using [inth.com](https://inth.com) for a fully managed experience, but you can [self-host](/docs/self-host) as well.
21
-
22
- > ℹ️ **Info:**
23
- > mode: 'hosted' is the preferred value. The legacy alias mode: 'c15t' is still supported for backward compatibility.
24
-
25
- **What happens:**
26
-
27
- 1. On page load, the client calls `/init` to fetch geolocation, jurisdiction, localized translation strings
28
- 2. When the user grants or changes consent, it is saved locally before being synced to the backend.
29
- 3. If the backend is unreachable, it falls back to Offline mode and re-syncs with the backend when it's available
30
-
31
- **Configuration:**
32
-
33
- * `backendURL` (required) - API endpoint path
34
-
35
- **Why it is the default for production:**
36
-
37
- * The backend stays the source of truth for policy, translations, and jurisdiction logic
38
- * Consent decisions can be stored beyond the current browser session for audit and support workflows
39
- * Server-side systems can preload consent-aware behavior instead of waiting for client-only storage
40
- * If the backend is temporarily unavailable, c15t can fall back locally and re-sync later
41
-
42
- **Best for:** Production apps that need geolocation-based jurisdiction detection, consent record storage, and compliance audit trails.
43
-
44
- ```tsx
45
- import { type ReactNode } from 'react';
46
- import { ConsentManagerProvider, ConsentBanner } from '@c15t/nextjs';
47
-
48
- export function ConsentManager({ children }: { children: ReactNode }) {
49
- return (
50
- <ConsentManagerProvider
51
- options={{
52
- mode: 'hosted',
53
- backendURL: '/api/c15t',
54
- }}
55
- >
56
- <ConsentBanner />
57
- {children}
58
- </ConsentManagerProvider>
59
- );
60
- }
61
- ```
62
-
63
- ## Offline Mode
64
-
65
- No network requests. Consent is stored entirely in the browser using localStorage and cookies.
66
-
67
- **What happens:**
68
-
69
- 1. Default jurisdiction is GDPR unless manually set via `overrides`
70
- 2. Consent preferences persist locally only
71
- 3. No server-side consent records or analytics
72
-
73
- > ℹ️ **Info:**
74
- > Important: Offline mode still stores consent locally (cookie + localStorage). It only skips backend storage and sync.
75
-
76
- ### Consequences of Browser-Only Storage
77
-
78
- If consent is not stored at all (for example, storage is blocked or frequently cleared):
79
-
80
- * Users are treated as new visitors and must re-consent repeatedly
81
- * Preferences are lost across browser resets, private sessions, and device changes
82
- * You have no reliable audit evidence to prove prior consent choices
83
- * Support and compliance teams have no centralized visibility into consent history by default
84
- * Server-side systems cannot apply prior consent decisions before client initialization
85
-
86
- **Trade-offs:**
87
-
88
- * No automatic geolocation or jurisdiction detection
89
- * No consent audit trail
90
- * No centralized policy or translation updates without shipping frontend changes
91
- * No cross-device sync
92
- * No server-side visibility before client initialization
93
- * Works without any backend infrastructure
94
-
95
- **Best for:** Local development, Storybook/static demos, resilience fallback, or simpler sites that explicitly accept browser-only consent storage.
96
-
97
- ```tsx
98
- import { type ReactNode } from 'react';
99
- import { ConsentManagerProvider, ConsentBanner } from '@c15t/nextjs';
100
-
101
- export function ConsentManager({ children }: { children: ReactNode }) {
102
- return (
103
- <ConsentManagerProvider
104
- options={{
105
- mode: 'offline',
106
- overrides: {
107
- country: 'DE', // Override country to trigger GDPR jurisdiction
108
- },
109
- }}
110
- >
111
- <ConsentBanner />
112
- {children}
113
- </ConsentManagerProvider>
114
- );
115
- }
116
- ```
117
-
118
- ## Custom Mode
119
-
120
- Bring your own backend. You provide handler functions for each consent endpoint, and c15t calls them instead of making HTTP requests.
121
-
122
- **What happens:**
123
-
124
- 1. On page load, the client calls your endpoint handler to fetch geolocation, jurisdiction, localized translation strings
125
- 2. When the user grants or changes consent, it is saved locally before being synced to the backend.
126
- 3. If one of your handlers fails, c15t returns a handler error and keeps local consent state, but automatic offline fallback and retry queue behavior is not provided for custom handlers by default
127
-
128
- This lets you integrate c15t with any existing API - your CRM, your own consent database, or a third-party compliance service.
129
-
130
- **Best for:** Teams with existing consent infrastructure that want c15t's frontend without its backend.
131
-
132
- ```tsx
133
- import { type ReactNode } from 'react';
134
- import { ConsentManagerProvider, ConsentBanner } from '@c15t/nextjs';
135
-
136
- export function ConsentManager({ children }: { children: ReactNode }) {
137
- return (
138
- <ConsentManagerProvider
139
- options={{
140
- mode: 'custom',
141
- endpointHandlers: {
142
- async init() {
143
- const res = await fetch('/my-api/consent/init');
144
- const data = await res.json();
145
- return { data, response: res, error: null };
146
- },
147
- async setConsent(options) {
148
- const res = await fetch('/my-api/consent', {
149
- method: 'POST',
150
- headers: { 'Content-Type': 'application/json' },
151
- body: JSON.stringify(options?.body),
152
- });
153
- return { data: await res.json(), response: res, error: null };
154
- },
155
- },
156
- }}
157
- >
158
- <ConsentBanner />
159
- {children}
160
- </ConsentManagerProvider>
161
- );
162
- }
163
- ```
164
-
165
- ## Choosing a Mode
166
-
167
- |Feature|Hosted|Offline|Custom|
168
- |--|--|--|--|
169
- |Geolocation|Automatic|Manual via overrides|Your implementation|
170
- |Policy source of truth|Backend-managed|Bundled into the frontend|Your implementation|
171
- |Consent sync|API|Local only|Your implementation|
172
- |Audit trail|Backend records|Not available|Your implementation|
173
- |Server-side consent awareness|Supported|Not available|Your implementation|
174
- |SSR data|Supported|Not available|Your implementation|
175
- |Analytics|Built-in|Not available|Your implementation|
176
- |Infrastructure|c15t backend|None|Your backend|
177
- |Setup effort|Minimal|Zero|Moderate|
@@ -1,117 +0,0 @@
1
- ---
2
- title: Consent Models
3
- description: How c15t determines consent behavior based on legal jurisdiction.
4
- group: frameworks
5
- ---
6
- c15t supports four consent models that control how consent defaults, banner visibility, and category gating behave:
7
-
8
- |Model|Philosophy|Banner|Categories default to|
9
- |--|--|--|--|
10
- |`opt-in`|Explicit consent required|Blocking banner|`false` (except `necessary`)|
11
- |`opt-out`|Processing allowed by default|Non-blocking notice|`true` (all granted)|
12
- |`iab`|IAB TCF 2.3 for programmatic ads|TCF banner|Managed by TCF framework|
13
- |`null`|No regulation detected|No banner|`true` (all auto-granted)|
14
-
15
- There are two ways c15t determines which model applies:
16
-
17
- 1. **Policy packs** (recommended) — you explicitly set the model per region in a `PolicyConfig`. This gives you full control over which regions get which model. See [Policy Packs](/docs/frameworks/react/concepts/policy-packs).
18
-
19
- 2. **Automatic jurisdiction mapping** (legacy default) — when no policy pack is configured, c15t detects the visitor's jurisdiction via geolocation and maps it to a model using the table below. This still works but gives you less control over categories, UI, and scope.
20
-
21
- > ℹ️ **Info:**
22
- > When using policy packs, the consent.model field in each policy directly sets the model — the automatic jurisdiction mapping is bypassed for that request.
23
-
24
- Read the current consent model from the hook:
25
-
26
- ```tsx
27
- 'use client';
28
-
29
- import { useConsentManager } from '@c15t/nextjs';
30
-
31
- function ConsentStatus() {
32
- const { model, policy } = useConsentManager();
33
-
34
- return (
35
- <p>
36
- Current consent model: {model ?? 'detecting...'}
37
- {policy && ` (from policy: ${policy.id})`}
38
- </p>
39
- );
40
- }
41
- ```
42
-
43
- ## The Four Models
44
-
45
- ### Opt-in
46
-
47
- The strictest consent model, used for GDPR and similar regulations that require explicit, affirmative consent before any non-essential data processing occurs. All consent categories except `necessary` default to `false`. A consent banner must be shown before any tracking scripts load.
48
-
49
- Applies to: EU (GDPR), UK (UK GDPR), Switzerland, Brazil (LGPD), Japan (APPI), South Korea (PIPA), Quebec (Law 25). Also the fallback for unknown jurisdiction codes.
50
-
51
- ### Opt-out
52
-
53
- Used for CCPA-style regulations where data processing is permitted by default until the user exercises their right to opt out. All consent categories default to `true`. A blocking banner is not required — the typical pattern is a non-intrusive notice or footer link.
54
-
55
- Applies to: California (CCPA), Canada (PIPEDA), Australia.
56
-
57
- When the policy has `consent.gpc: true`, the browser's Global Privacy Control signal (`Sec-GPC: 1` or `navigator.globalPrivacyControl`) is respected — `marketing` and `measurement` are denied while other categories remain granted. The built-in California presets enable this by default. See [Policy Packs — GPC](/docs/frameworks/react/concepts/policy-packs#gpc) for details.
58
-
59
- ### IAB
60
-
61
- IAB Transparency and Consent Framework (TCF) 2.3 mode for programmatic advertising compliance. Only activates when two conditions are met: the jurisdiction is `GDPR` or `UK_GDPR`, and `iab.enabled` is `true` in your configuration.
62
-
63
- When active, IAB mode generates TC strings, registers the `__tcfapi` CMP API, and works with the Global Vendor List (GVL) for machine-readable consent signals. If `iab.enabled` is not set, GDPR jurisdictions fall back to standard opt-in.
64
-
65
- ### null
66
-
67
- Returned when no jurisdiction is detected (`NONE` or `null`). No banner is displayed. On first visit, all categories are auto-granted.
68
-
69
- ## Jurisdiction Mapping
70
-
71
- When no policy pack is configured, c15t maps jurisdictions to models automatically:
72
-
73
- |Jurisdiction Code|Region|Consent Model|
74
- |--|--|--|
75
- |`GDPR`|European Union|opt-in|
76
- |`UK_GDPR`|United Kingdom|opt-in|
77
- |`CH`|Switzerland|opt-in|
78
- |`BR`|Brazil (LGPD)|opt-in|
79
- |`APPI`|Japan|opt-in|
80
- |`PIPA`|South Korea|opt-in|
81
- |`PIPEDA`|Canada (excl. Quebec)|opt-out|
82
- |`QC_LAW25`|Quebec, Canada|opt-in|
83
- |`CCPA`|California, USA|opt-out|
84
- |`AU`|Australia|opt-out|
85
- |`NONE`|No jurisdiction|null|
86
- |*(unknown)*|Any other|opt-in|
87
-
88
- **IAB override:** If `iab.enabled: true` and the jurisdiction is `GDPR` or `UK_GDPR`, the model becomes `'iab'` instead of `'opt-in'`. This override only applies to those two jurisdictions.
89
-
90
- > ℹ️ **Info:**
91
- > With policy packs, you set the model explicitly per policy — the automatic mapping above is only used as a fallback when no policy pack is configured, or for non-policy-pack features like auto-granting in opt-out jurisdictions.
92
-
93
- Override the detected jurisdiction for testing:
94
-
95
- ```tsx
96
- 'use client';
97
-
98
- import { useConsentManager } from '@c15t/nextjs';
99
-
100
- function JurisdictionTester() {
101
- const { setOverrides } = useConsentManager();
102
-
103
- return (
104
- <div>
105
- <button onClick={() => setOverrides({ country: 'DE' })}>
106
- Test as EU visitor
107
- </button>
108
- <button onClick={() => setOverrides({ country: 'US', region: 'CA' })}>
109
- Test as California visitor
110
- </button>
111
- </div>
112
- );
113
- }
114
- ```
115
-
116
- > ℹ️ **Info:**
117
- > For full control over which model applies where — plus UI customization, category scoping, and re-prompting — see Policy Packs.
@@ -1,122 +0,0 @@
1
- ---
2
- title: Cookie Management
3
- description: How c15t manages cookies through script, iframe, and network gating
4
- group: frameworks
5
- ---
6
- Cookie management is the most commonly misunderstood part of consent. A critical distinction: **c15t does not manage all cookies on your site.** It controls what scripts, iframes, and network requests are allowed to load - and those third-party resources are what set most cookies.
7
-
8
- Understanding this distinction is key to building a compliant consent flow: c15t gates the sources of cookies, not the cookies themselves.
9
-
10
- ## What Actually Sets Cookies
11
-
12
- There are four sources of cookies on a typical website:
13
-
14
- **1. c15t itself**
15
- c15t stores the user's consent state in a `c15t` cookie (and mirrors it to localStorage). This cookie records which categories the user consented to, when they consented, and their subject ID. This is a strictly necessary cookie - it exists so the site remembers the user's consent choice.
16
-
17
- **2. Third-party scripts**
18
- When you load a tracking script (Google Analytics, Meta Pixel, etc.), that script sets its own cookies. Google Analytics creates `_ga` and `_gid` cookies. Meta creates `_fbp` and `_fbc`. These cookies are set by the script's code running in the browser - c15t prevents them by not loading the script until the user consents.
19
-
20
- **3. Embedded iframes**
21
- YouTube embeds, social media widgets, and other iframes can set cookies via their embedded content. c15t's iframe blocker replaces iframes with placeholders until consent is granted, preventing these cookies from being set.
22
-
23
- **4. Network requests**
24
- Server responses can include `Set-Cookie` headers. If your page makes requests to third-party APIs or CDNs, those responses may set cookies. c15t's network blocker can intercept `fetch` and `XMLHttpRequest` calls to prevent these requests from happening without consent.
25
-
26
- > ⚠️ **Warning:**
27
- > Don't list these cookies in your banner. The cookie names above (\_ga, \_gid, \_fbp, \_fbc) are implementation details — they matter for developers understanding how tracking works, but they should not be exposed to end users in your consent UI. Users don't know what \_ga means, and listing it doesn't help them make an informed choice. Instead, use purpose-based consent categories like "measurement" or "marketing" that communicate why data is collected, not how it is stored.
28
-
29
- ## Why Revoking Consent Requires a Page Reload
30
-
31
- When a user revokes consent for a category (e.g., turns off "measurement" after previously granting it), c15t reloads the page by default. This is not a limitation - it's the only reliable approach.
32
-
33
- **Why you can't just delete third-party cookies from JavaScript:**
34
-
35
- * **`httpOnly` cookies** - Many tracking cookies are set with the `httpOnly` flag, which prevents JavaScript from reading or deleting them. Only the server that set them can remove them.
36
- * **Domain restrictions** - Cookies set on `.google.com` or `.facebook.com` can only be deleted by those domains. Your JavaScript running on `yourdomain.com` has no access.
37
- * **Alternative storage** - Some scripts also write to `localStorage`, `sessionStorage`, `IndexedDB`, or even Web Workers. Cleaning up all possible storage locations is impractical.
38
- * **In-memory state** - A loaded script has already executed. Its event listeners, timers, and in-memory data persist until the page unloads. You can't "unrun" JavaScript.
39
-
40
- **The reliable solution: don't load the scripts in the first place.** A page reload creates a fresh execution context. On the fresh page, c15t reads the updated consent state and simply never loads the scripts that lost consent. No script means no cookies, no tracking, no in-memory state.
41
-
42
- **When reload does NOT happen:**
43
-
44
- * When a user is declining consent for the **first time** (no prior consent existed, so no scripts were loaded to clean up)
45
- * When `reloadOnConsentRevoked` is set to `false`
46
- * When the user is only **adding** consent (no revocations)
47
-
48
- Configure reload behavior in the provider:
49
-
50
- ```tsx
51
- import { type ReactNode } from 'react';
52
- import { ConsentManagerProvider } from '@c15t/nextjs';
53
-
54
- function ConsentManager({ children }: { children: ReactNode }) {
55
- return (
56
- <ConsentManagerProvider
57
- options={{
58
- mode: 'hosted',
59
- backendURL: '/api/c15t',
60
- reloadOnConsentRevoked: true, // default: true
61
- callbacks: {
62
- onBeforeConsentRevocationReload: ({ preferences }) => {
63
- // Run cleanup before the page reloads
64
- // e.g., flush pending analytics events
65
- console.log('Reloading due to consent revocation:', preferences);
66
- },
67
- },
68
- }}
69
- >
70
- {children}
71
- </ConsentManagerProvider>
72
- );
73
- }
74
- ```
75
-
76
- > ℹ️ **Info:**
77
- > The reload and deferred sync are part of the broader initialization flow. See Initialization Flow for the full sequence.
78
- >
79
- > ⚠️ **Warning:**
80
- > Setting reloadOnConsentRevoked: false means previously-loaded scripts will continue running after consent is revoked. Only disable this if you have a specific strategy for handling script cleanup.
81
-
82
- ## The Revocation Flow
83
-
84
- When a user revokes consent, the following sequence occurs:
85
-
86
- **Simplified**
87
-
88
- 1. **User revokes consent** — e.g. turns off "measurement" in the consent dialog
89
- 2. **New consent saved** — updated preferences are written to cookies and localStorage
90
- 3. **Pending sync stored** — the API update is deferred to localStorage (`c15t:pending-consent-sync`)
91
- 4. **Page reloads** — a fresh execution context ensures revoked scripts never load
92
- 5. **Fresh init** — c15t reads updated consent; scripts without consent are never loaded
93
- 6. **Deferred API sync** — the pending consent change is sent to the backend and cleared from localStorage
94
-
95
- **Sequence Diagram**
96
-
97
- ```mermaid
98
- sequenceDiagram
99
- participant User
100
- participant UI as Consent UI
101
- participant Store as Consent Store
102
- participant Storage as Cookie + localStorage
103
- participant API as c15t Backend
104
- participant Browser
105
-
106
- User->>UI: Revokes "measurement" consent
107
- UI->>Store: saveConsents({ type: 'custom' })
108
- Store->>Store: shouldReloadOnConsentChange() → true
109
- Store->>Storage: Save new consent state
110
- Store->>Storage: Store PendingConsentSync in localStorage
111
- Store->>Browser: onBeforeConsentRevocationReload callback
112
- Store->>Browser: window.location.reload()
113
- Browser->>Browser: Fresh page load
114
- Browser->>Storage: Read consent state
115
- Browser->>Store: Initialize with updated consents
116
- Note over Store: Scripts without consent are never loaded
117
- Store->>Storage: Read PendingConsentSync
118
- Store->>API: Sync consent to backend
119
- Store->>Storage: Clear PendingConsentSync
120
- ```
121
-
122
- **Key detail:** The API sync happens *after* the reload, not before. This ensures the page reloads as fast as possible. The pending sync data is stored in localStorage under the key `c15t:pending-consent-sync` and is picked up by the fresh page's initialization.
@@ -1,24 +0,0 @@
1
- ---
2
- title: Glossary
3
- description: Key terms used throughout the c15t documentation.
4
- group: frameworks
5
- ---
6
- ### Core Terms
7
-
8
- |Term|Definition|
9
- |--|--|
10
- |`subjectId`|Client-generated device/browser identifier (`sub_xxx`). Stored in the `c15t` cookie. Created on first consent save.|
11
- |`externalId`|Your authenticated user's ID (from Clerk, Auth0, etc.), linked via `identifyUser()`. Connects a device to a user account.|
12
- |`consents`|The **saved** consent state — `Record<string, boolean>` mapping categories to granted/denied. Used for gating scripts, iframes, and network requests.|
13
- |`selectedConsents`|**Unsaved** toggle state — what the user has toggled in the dialog but hasn't submitted yet. Becomes `consents` after save.|
14
- |`mode`|Client operating mode: `'hosted'` (full backend), `'offline'` (local only), or `'custom'` (bring your own handlers). Legacy alias: `'c15t'`. Set once in provider config. See [Client Modes](/docs/frameworks/react/concepts/client-modes).|
15
- |`model`|Consent regulatory model derived from jurisdiction: `'opt-in'`, `'opt-out'`, `'iab'`, or `null`. See [Consent Models](/docs/frameworks/react/concepts/consent-models).|
16
-
17
- ### Regulatory Terms
18
-
19
- |Term|Definition|
20
- |--|--|
21
- |`jurisdiction`|A privacy regulation code (e.g., `GDPR`, `CCPA`, `PIPEDA`, `QC_LAW25`) detected from the user's geolocation. Maps to a consent model. See [Consent Models](/docs/frameworks/react/concepts/consent-models) for the full mapping table.|
22
- |GPC|Global Privacy Control — a browser signal (`Sec-GPC: 1`) indicating the user opts out of data sale/sharing. Honored when a policy sets `consent.gpc: true` (enabled by default in California presets).|
23
- |TCF|IAB Transparency and Consent Framework (v2.3) — a standard for programmatic advertising consent in GDPR jurisdictions. See [IAB TCF](/docs/frameworks/react/iab/overview).|
24
- |GVL|Global Vendor List — an IAB-maintained registry of ad-tech vendors and their declared purposes, used by the TCF consent flow.|
@@ -1,149 +0,0 @@
1
- ---
2
- title: Initialization Flow
3
- description: What happens from provider mount to first render — the full consent lifecycle.
4
- group: frameworks
5
- ---
6
- When the consent provider mounts, it creates a cached consent runtime, reads any stored consent from the browser, fetches the resolved policy from the backend (or uses SSR/offline data), and decides whether to show the banner. This entire sequence completes before the first meaningful consent-aware render.
7
-
8
- ## Lifecycle Sequence
9
-
10
- **Simplified**
11
-
12
- 1. **Provider mounts** — creates (or retrieves from cache) a consent runtime and store
13
- 2. **Check stored consent** — reads existing consent from cookies / localStorage; if found and the policy fingerprint hasn't changed, the banner stays hidden
14
- 3. **Fetch init data** — calls the backend `GET /init` (or uses SSR/offline data) for the resolved policy, location, and translations
15
- 4. **Apply resolved policy** — the backend resolves the policy from your [policy pack](/docs/frameworks/react/concepts/policy-packs) based on visitor geo (region → country → fallback → default). The response includes the consent model, categories, UI mode, and a material fingerprint. If no policy pack is configured, the legacy jurisdiction-to-model mapping is used instead.
16
- 5. **Decide banner visibility** — shows the banner only if no prior consent exists, the resolved policy requires it (`ui.mode` is `banner` or `dialog`), or the policy fingerprint changed since last consent
17
- 6. **Gating enforced** — scripts, iframes, and network requests tagged with a consent category are blocked until that category is granted
18
- 7. **User interacts** — choices are persisted to storage, synced to the backend (with `policySnapshotToken` if configured), and blocked scripts/iframes load immediately after consent is granted
19
-
20
- **Sequence Diagram**
21
-
22
- ```mermaid
23
- sequenceDiagram
24
- participant Provider as ConsentManagerProvider
25
- participant Store as Consent Store
26
- participant Storage as localStorage / Cookie
27
- participant API as c15t Backend
28
- participant UI as Banner / Dialog
29
- participant Scripts as Script Loader
30
-
31
- Provider->>Store: getOrCreateConsentRuntime()
32
- Store->>Storage: getStoredConsent()
33
- alt Stored consent exists
34
- Storage-->>Store: consentInfo + consents
35
- Store->>Store: activeUI = 'none'
36
- else No stored consent
37
- Store->>Store: isLoadingConsentInfo = true
38
- end
39
-
40
- Store->>Store: initConsentManager()
41
- Store->>Storage: Check pending consent sync
42
- opt Pending sync from revocation reload
43
- Store->>API: Deferred setConsent() (non-blocking)
44
- end
45
-
46
- alt SSR data provided
47
- Store->>Store: tryUseSSRData()
48
- else No SSR data
49
- Store->>API: GET /init
50
- API-->>Store: policy, policyDecision, location, translations
51
- end
52
-
53
- Store->>Store: Apply resolved policy (model, categories, ui.mode)
54
- Store->>Store: Check fingerprint change → re-prompt if needed
55
- Store->>Store: Set activeUI, auto-grant if opt-out/none
56
-
57
- alt User has no prior consent or policy changed
58
- UI->>UI: Banner / Dialog appears (per policy ui.mode)
59
- UI->>Store: saveConsents({ type })
60
- Store->>Storage: Persist consent + subjectId + fingerprint
61
- Store->>Scripts: updateScripts(), updateIframes(), updateNetwork()
62
- Store->>API: POST /subjects + policySnapshotToken (non-blocking)
63
- end
64
- ```
65
-
66
- ## How It Works
67
-
68
- **Mount** — When the provider renders, it creates (or retrieves from cache) a consent runtime and store. Any existing consent is read from localStorage/cookies immediately. If consent already exists and the policy fingerprint matches, the banner stays hidden and gating rules apply right away. See [Client Modes](/docs/frameworks/react/concepts/client-modes) for how the mode affects runtime creation.
69
-
70
- **Init** — The store fetches the resolved policy, location, and translation data. In hosted mode this calls `GET /init` on your backend; in offline mode it resolves from `offlinePolicy.policyPacks` locally. If SSR data was passed to the provider, the network fetch is skipped entirely. See [Server-Side Utilities](/docs/frameworks/react/server-side) for SSR setup.
71
-
72
- **Policy resolution** — When [policy packs](/docs/frameworks/react/concepts/policy-packs) are configured, the backend resolves the right policy for the visitor based on their geo-location (region → country → fallback → default). The resolved policy determines the consent model (`opt-in`, `opt-out`, `iab`, or `none`), which categories are in scope, and what UI to show. For `opt-out` and `none` models, all categories are auto-granted — unless the resolved policy has `consent.gpc: true` and the browser sends a Global Privacy Control signal, in which case `marketing` and `measurement` are denied. If no policy pack is configured, the legacy jurisdiction-to-model mapping is used instead. See [Consent Models](/docs/frameworks/react/concepts/consent-models) for details.
73
-
74
- **Re-prompting** — If the resolved policy's material fingerprint differs from the fingerprint stored with the user's last consent, the banner is shown again. This happens automatically when you change consent-affecting fields (model, categories, scope mode, allowed actions). Presentation-only changes do not trigger re-prompts. See [Policy Packs — Re-Prompting](/docs/frameworks/react/concepts/policy-packs#re-prompting) for details.
75
-
76
- **Save** — When the user interacts with the banner or dialog, their choices are persisted to localStorage/cookies and synced to the backend (along with the `policySnapshotToken` if snapshot signing is configured). Script, iframe, and network gating rules update immediately based on the new consent state. See the [Script Loader](/docs/frameworks/react/script-loader), [Iframe Blocking](/docs/frameworks/react/iframe-blocking), and [Network Blocker](/docs/frameworks/react/network-blocker) guides for gating details.
77
-
78
- **Revocation** — If a user revokes a previously granted category, the page reloads by default to ensure a clean execution environment. The API sync is deferred to the fresh page load. See [Cookie Management](/docs/frameworks/react/concepts/cookie-management) for revocation and persistence details.
79
-
80
- ## When Does the Banner Show?
81
-
82
- The banner appears when any of these conditions are true:
83
-
84
- 1. **No existing consent** — the user has never consented (or their consent was cleared), **and** the resolved policy requires a UI (`ui.mode` is `banner` or `dialog`, or the model is `opt-in` or `iab`)
85
- 2. **Policy changed** — the material policy fingerprint differs from the fingerprint stored with the user's last consent (re-prompting)
86
- 3. **Storage is accessible** — the browser allows localStorage (not blocked in private mode)
87
-
88
- If the resolved model is `none` or `opt-out` (and `ui.mode` is `none`), consents are auto-granted and the banner never appears. See [Consent Models](/docs/frameworks/react/concepts/consent-models) and [Policy Packs](/docs/frameworks/react/concepts/policy-packs) for details.
89
-
90
- ## Debugging the Lifecycle
91
-
92
- Use the DevTools panel and callbacks to inspect each step of the initialization flow. `onConsentSet` is the broad lifecycle signal; `onConsentChanged` and `subscribeToConsentChanges()` are the change-only signals for explicit post-init saves.
93
-
94
- |Step|DevTools Panel|Callback|What to check|
95
- |--|--|--|--|
96
- |Init / SSR hydration|Location|`onBannerFetched`|jurisdiction, countryCode, regionCode populated?|
97
- |Policy resolution|Policy|`onBannerFetched`|`policyId`, `matchedBy`, `fingerprint` in policyDecision|
98
- |Model resolution|Location|`onBannerFetched`|`model` value matches the resolved policy|
99
- |Banner visibility|Consents|—|`activeUI` in store state; does policy `ui.mode` require it?|
100
- |Re-prompting|Policy|—|Fingerprint mismatch between stored and resolved policy?|
101
- |Consent save|Consents + Events|`onConsentSet`|`preferences` object in callback payload|
102
- |Change-only integrations|Events|`onConsentChanged` or `subscribeToConsentChanges()`|`allowedCategories`, `deniedCategories`, and previous values only when a real save changed preferences|
103
- |Script loading|Scripts|`onConsentSet`|Script IDs and their load/blocked status|
104
- |Reload on revocation|Events|`onBeforeConsentRevocationReload`|Fires before reload; check localStorage for `c15t:pending-consent-sync`|
105
- |Deferred sync|Events|`onError` (if sync fails)|After reload, check Events panel for successful API call|
106
-
107
- Configure callbacks in the provider to log lifecycle events, and add DevTools for a visual inspector:
108
-
109
- ```tsx
110
- import { type ReactNode } from 'react';
111
- import { ConsentManagerProvider, ConsentBanner, ConsentDialog } from '@c15t/nextjs';
112
- import { DevTools } from '@c15t/dev-tools/react';
113
-
114
- export default function ConsentManager({ children }: { children: ReactNode }) {
115
- return (
116
- <ConsentManagerProvider
117
- options={{
118
- mode: 'hosted',
119
- backendURL: '/api/c15t',
120
- callbacks: {
121
- onBannerFetched: ({ jurisdiction, location }) => {
122
- console.log('Init complete:', { jurisdiction, location });
123
- },
124
- onConsentSet: ({ preferences }) => {
125
- console.log('Broad consent lifecycle event:', preferences);
126
- },
127
- onConsentChanged: ({ allowedCategories, deniedCategories }) => {
128
- console.log('Explicit consent change:', {
129
- allowedCategories,
130
- deniedCategories,
131
- });
132
- },
133
- onBeforeConsentRevocationReload: ({ preferences }) => {
134
- console.log('Reloading due to revocation:', preferences);
135
- },
136
- onError: ({ error }) => {
137
- console.error('Consent error:', error);
138
- },
139
- },
140
- }}
141
- >
142
- <ConsentBanner />
143
- <ConsentDialog />
144
- {process.env.NODE_ENV !== 'production' && <DevTools />}
145
- {children}
146
- </ConsentManagerProvider>
147
- );
148
- }
149
- ```