@c15t/react 3.0.0-alpha.2 → 3.0.0-alpha.4

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 (248) hide show
  1. package/AGENTS.md +91 -67
  2. package/README.md +21 -17
  3. package/SKILL.md +34 -0
  4. package/dist/aggregate-components.js +1 -1
  5. package/dist/chunk-warming.js +1 -1
  6. package/dist/component-hooks/use-headless-consent-ui.js +1 -1
  7. package/dist/component-hooks/use-headless-iab-consent-ui.js +1 -1
  8. package/dist/component-hooks/use-panel-trigger.js +1 -1
  9. package/dist/components/consent-gate/atoms.js +1 -1
  10. package/dist/components/consent-gate/consent-gate.js +1 -1
  11. package/dist/components/consent-preferences-link/consent-preferences-link.js +1 -1
  12. package/dist/components/iab-panel/atoms/card.js +1 -1
  13. package/dist/components/iab-panel/atoms/feature-item.js +2 -0
  14. package/dist/components/iab-panel/atoms/header.js +1 -1
  15. package/dist/components/iab-panel/atoms/purpose-item.js +1 -1
  16. package/dist/components/iab-panel/atoms/stack-item.js +1 -1
  17. package/dist/components/iab-panel/iab-panel.js +1 -1
  18. package/dist/components/iab-panel/index.js +1 -1
  19. package/dist/components/iab-prompt/atoms/overlay.js +1 -1
  20. package/dist/components/iab-prompt/atoms/root.js +1 -1
  21. package/dist/components/panel/atoms/card.js +1 -1
  22. package/dist/components/panel/atoms/overlay.js +1 -1
  23. package/dist/components/panel/atoms/root.js +1 -1
  24. package/dist/components/panel/index.js +1 -1
  25. package/dist/components/panel/panel.js +1 -1
  26. package/dist/components/panel-trigger/atoms/button.js +1 -1
  27. package/dist/components/panel-trigger/atoms/icon.js +1 -1
  28. package/dist/components/panel-trigger/atoms/root.js +1 -1
  29. package/dist/components/panel-trigger/atoms/toolbar.js +1 -1
  30. package/dist/components/panel-trigger/atoms/trigger-icons.js +1 -0
  31. package/dist/components/panel-trigger/panel-trigger-toolbar.js +1 -1
  32. package/dist/components/preferences/atoms/accordion.js +1 -1
  33. package/dist/components/preferences/atoms/root.js +1 -1
  34. package/dist/components/preferences/atoms/vendor-list.js +1 -1
  35. package/dist/components/preferences/index.js +1 -1
  36. package/dist/components/prompt/atoms/overlay.js +1 -1
  37. package/dist/components/prompt/atoms/root.js +1 -1
  38. package/dist/components/prompt/components.js +1 -1
  39. package/dist/components/prompt/policy-actions.js +1 -1
  40. package/dist/components/shared/libs/compose-refs.js +1 -0
  41. package/dist/components/shared/libs/slot.js +1 -1
  42. package/dist/components/shared/primitives/button.js +1 -1
  43. package/dist/components/shared/ui/accordion/accordion.js +1 -1
  44. package/dist/components/shared/ui/collapsible/collapsible.js +1 -1
  45. package/dist/components/shared/ui/dialog/dialog.js +1 -1
  46. package/dist/components/shared/ui/icon.js +1 -1
  47. package/dist/components/shared/ui/logo.js +1 -1
  48. package/dist/components/shared/ui/preference-item/preference-item.js +1 -1
  49. package/dist/components/shared/ui/switch/switch.js +1 -1
  50. package/dist/components/shared/ui/tabs/tabs.js +1 -1
  51. package/dist/consent-theme.js +1 -0
  52. package/dist/context/consent-tracking-context.js +1 -1
  53. package/dist/devtools.js +1 -1
  54. package/dist/draft.js +1 -1
  55. package/dist/external-iab-context.js +1 -1
  56. package/dist/headless.js +1 -1
  57. package/dist/hooks/use-committed-ref.js +2 -0
  58. package/dist/hooks/use-focus-trap.js +1 -1
  59. package/dist/hooks.js +1 -1
  60. package/dist/iab/styles.tw3.css +5 -45
  61. package/dist/iab-context.js +1 -1
  62. package/dist/index.js +1 -1
  63. package/dist/kernel-selector.js +1 -0
  64. package/dist/module-hooks/iframe-blocker.js +1 -1
  65. package/dist/module-hooks/network-blocker.js +1 -1
  66. package/dist/module-hooks/network-hold.js +2 -0
  67. package/dist/module-hooks/persistence.js +1 -1
  68. package/dist/panel.js +1 -1
  69. package/dist/postcss-tailwind3.js +1 -0
  70. package/dist/preferences.js +1 -2
  71. package/dist/provider.js +1 -1
  72. package/dist/server/fetch-ssr-data.js +1 -1
  73. package/dist/server/headers.js +1 -1
  74. package/dist/server/normalize-url.js +1 -1
  75. package/dist/styles.tw3.css +16 -61
  76. package/dist/transports/offline.js +1 -1
  77. package/dist/ui-save.js +1 -1
  78. package/dist/utils/deferred-module.js +1 -1
  79. package/dist/utils/merge-slot-props.js +1 -1
  80. package/dist/utils/theme-utils.js +1 -1
  81. package/dist/version.js +1 -1
  82. package/dist-types/chunk-warming.d.ts +41 -8
  83. package/dist-types/component-hooks/use-headless-consent-ui.d.ts +1 -1
  84. package/dist-types/component-hooks/use-headless-iab-consent-ui.d.ts +1 -1
  85. package/dist-types/components/iab-panel/atoms/feature-item.d.ts +28 -0
  86. package/dist-types/components/iab-panel/atoms/purpose-item.d.ts +4 -1
  87. package/dist-types/components/iab-panel/atoms/stack-item.d.ts +6 -1
  88. package/dist-types/components/iab-panel/iab-panel.d.ts +2 -2
  89. package/dist-types/components/iab-panel/index.d.ts +6 -2
  90. package/dist-types/components/iab-panel/use-iab-translations.d.ts +4 -0
  91. package/dist-types/components/iab-prompt/iab-prompt.d.ts +2 -2
  92. package/dist-types/components/iab-prompt/index.d.ts +2 -2
  93. package/dist-types/components/panel/atoms/card.d.ts +1 -0
  94. package/dist-types/components/panel/index.d.ts +1 -0
  95. package/dist-types/components/panel/panel.d.ts +1 -1
  96. package/dist-types/components/panel-trigger/atoms/trigger-icons.d.ts +20 -0
  97. package/dist-types/components/preferences/index.d.ts +1 -0
  98. package/dist-types/components/prompt/components.d.ts +6 -0
  99. package/dist-types/components/shared/libs/compose-refs.d.ts +20 -0
  100. package/dist-types/components/shared/ui/accordion/accordion.d.ts +1 -0
  101. package/dist-types/components/shared/ui/collapsible/collapsible.d.ts +1 -0
  102. package/dist-types/components/shared/ui/icon.d.ts +2 -1
  103. package/dist-types/components/shared/ui/logo.d.ts +0 -10
  104. package/dist-types/components/shared/ui/preference-item/preference-item.d.ts +14 -0
  105. package/dist-types/components/shared/ui/switch/switch.d.ts +1 -0
  106. package/dist-types/components/shared/ui/tabs/tabs.d.ts +1 -0
  107. package/dist-types/consent-theme.d.ts +38 -0
  108. package/dist-types/context/consent-tracking-context.d.ts +10 -0
  109. package/dist-types/context/theme-context.d.ts +2 -2
  110. package/dist-types/context.d.ts +6 -0
  111. package/dist-types/devtools.d.ts +13 -2
  112. package/dist-types/draft.d.ts +50 -7
  113. package/dist-types/headless.d.ts +0 -1
  114. package/dist-types/hooks/use-committed-ref.d.ts +24 -0
  115. package/dist-types/hooks/use-focus-trap.d.ts +3 -1
  116. package/dist-types/hooks.d.ts +56 -13
  117. package/dist-types/iab.d.ts +1 -1
  118. package/dist-types/index.d.ts +4 -3
  119. package/dist-types/kernel-selector.d.ts +66 -0
  120. package/dist-types/module-hooks/iframe-blocker.d.ts +27 -0
  121. package/dist-types/module-hooks/network-blocker.d.ts +23 -0
  122. package/dist-types/module-hooks/network-hold.d.ts +47 -0
  123. package/dist-types/panel.d.ts +13 -1
  124. package/dist-types/postcss-tailwind3.d.ts +21 -0
  125. package/dist-types/preferences.d.ts +12 -1
  126. package/dist-types/provider.d.ts +62 -12
  127. package/dist-types/server/headers.d.ts +14 -4
  128. package/dist-types/server/normalize-url.d.ts +14 -7
  129. package/dist-types/server/types.d.ts +12 -1
  130. package/dist-types/transports/offline.d.ts +7 -16
  131. package/dist-types/ui-config-context.d.ts +9 -1
  132. package/dist-types/ui-save.d.ts +21 -1
  133. package/dist-types/utils/deferred-module.d.ts +3 -1
  134. package/dist-types/utils/merge-slot-props.d.ts +15 -1
  135. package/dist-types/utils/theme-utils.d.ts +17 -2
  136. package/dist-types/version.d.ts +1 -1
  137. package/docs/README.md +91 -67
  138. package/docs/assets/v3/bottom-bar.png +0 -0
  139. package/docs/assets/v3/brand-card.png +0 -0
  140. package/docs/assets/v3/brand-preferences.png +0 -0
  141. package/docs/assets/v3/choice-wall.png +0 -0
  142. package/docs/assets/v3/headless-bar-html.png +0 -0
  143. package/docs/assets/v3/headless-bar-mobile.png +0 -0
  144. package/docs/assets/v3/headless-bar.png +0 -0
  145. package/docs/assets/v3/slim-bar.png +0 -0
  146. package/docs/concepts/choose-your-setup.md +87 -0
  147. package/docs/{frameworks/react/concepts → concepts}/consent-categories.md +30 -8
  148. package/docs/concepts/consent-state.md +357 -0
  149. package/docs/{guides → concepts}/data-fetching.md +31 -27
  150. package/docs/concepts/how-consent-works.md +123 -0
  151. package/docs/{frameworks/react/concepts/policy-presets.md → concepts/policies.md} +7 -59
  152. package/docs/customization/class-names.md +202 -0
  153. package/docs/customization/dark-mode.md +157 -0
  154. package/docs/customization/motion.md +119 -0
  155. package/docs/customization/overview.md +67 -33
  156. package/docs/customization/recipes.md +839 -47
  157. package/docs/customization/slots.md +216 -35
  158. package/docs/customization/stylesheets.md +147 -0
  159. package/docs/customization/tailwind.md +842 -0
  160. package/docs/customization/tokens.md +166 -36
  161. package/docs/customization/translations.md +61 -3
  162. package/docs/frameworks/react/callbacks.md +118 -0
  163. package/docs/frameworks/react/clear-on-revocation.md +106 -0
  164. package/docs/frameworks/react/components/consent-banner.md +42 -28
  165. package/docs/frameworks/react/components/consent-dialog-link.md +13 -11
  166. package/docs/frameworks/react/components/consent-dialog-trigger.md +81 -76
  167. package/docs/frameworks/react/components/consent-dialog.md +100 -55
  168. package/docs/frameworks/react/components/consent-gate.md +45 -24
  169. package/docs/frameworks/react/components/consent-provider.md +126 -0
  170. package/docs/frameworks/react/components/consent-widget.md +32 -20
  171. package/docs/frameworks/react/components/dev-tools.md +52 -84
  172. package/docs/frameworks/react/components.md +105 -0
  173. package/docs/frameworks/react/compose.md +354 -0
  174. package/docs/frameworks/react/content-security-policy.md +126 -0
  175. package/docs/frameworks/react/customize.md +250 -0
  176. package/docs/frameworks/react/embeds.md +89 -0
  177. package/docs/frameworks/react/hooks.md +65 -0
  178. package/docs/frameworks/react/iab.md +222 -0
  179. package/docs/frameworks/react/network-blocker.md +140 -0
  180. package/docs/frameworks/react/quickstart.md +139 -101
  181. package/docs/frameworks/react/rendering.md +128 -0
  182. package/docs/frameworks/react/scripts.md +115 -0
  183. package/docs/frameworks/react/translations.md +155 -0
  184. package/docs/frameworks/react/troubleshooting.md +92 -47
  185. package/docs/frameworks/react/vendor-consent.md +170 -0
  186. package/docs/guides/banner-experiments.md +654 -0
  187. package/docs/guides/troubleshooting.md +120 -47
  188. package/docs/guides/verify-consent.md +81 -49
  189. package/docs/integrations/adobe-analytics.md +168 -160
  190. package/docs/integrations/ahrefs-analytics.md +153 -155
  191. package/docs/integrations/amplitude.md +163 -157
  192. package/docs/integrations/building-integrations.md +136 -37
  193. package/docs/integrations/clearbit.md +155 -155
  194. package/docs/integrations/cloudflare-web-analytics.md +157 -157
  195. package/docs/integrations/cloudflare-zaraz.md +210 -262
  196. package/docs/integrations/crisp.md +165 -159
  197. package/docs/integrations/databuddy.md +158 -174
  198. package/docs/integrations/fathom-analytics.md +159 -157
  199. package/docs/integrations/front-chat.md +322 -0
  200. package/docs/integrations/google-maps.md +119 -84
  201. package/docs/integrations/google-tag-manager.md +179 -164
  202. package/docs/integrations/google-tag.md +164 -161
  203. package/docs/integrations/heap.md +164 -156
  204. package/docs/integrations/hightouch.md +162 -158
  205. package/docs/integrations/hotjar.md +160 -156
  206. package/docs/integrations/intercom.md +184 -154
  207. package/docs/integrations/klaviyo.md +486 -0
  208. package/docs/integrations/linkedin-insights.md +175 -151
  209. package/docs/integrations/logrocket.md +161 -157
  210. package/docs/integrations/matomo-analytics.md +189 -179
  211. package/docs/integrations/meta-pixel.md +189 -151
  212. package/docs/integrations/microsoft-clarity.md +164 -156
  213. package/docs/integrations/microsoft-uet.md +149 -155
  214. package/docs/integrations/mixpanel-analytics.md +156 -161
  215. package/docs/integrations/one-dollar-stats.md +306 -0
  216. package/docs/integrations/openai-pixel.md +205 -302
  217. package/docs/integrations/overview.md +143 -83
  218. package/docs/integrations/pinterest-tag.md +329 -0
  219. package/docs/integrations/pirsch.md +170 -160
  220. package/docs/integrations/plausible-analytics.md +173 -159
  221. package/docs/integrations/posthog.md +227 -242
  222. package/docs/integrations/promptwatch.md +155 -155
  223. package/docs/integrations/reddit-pixel.md +186 -158
  224. package/docs/integrations/rudderstack.md +202 -187
  225. package/docs/integrations/rybbit-analytics.md +172 -161
  226. package/docs/integrations/segment.md +183 -155
  227. package/docs/integrations/snapchat-pixel.md +187 -157
  228. package/docs/integrations/tiktok-pixel.md +172 -151
  229. package/docs/integrations/umami-analytics.md +164 -159
  230. package/docs/integrations/vercel-analytics.md +167 -158
  231. package/docs/integrations/x-pixel.md +177 -151
  232. package/docs/integrations/youtube.md +122 -87
  233. package/docs/upgrade-v3.md +490 -354
  234. package/package.json +15 -9
  235. package/dist/component-hooks/use-manager.js +0 -2
  236. package/dist-types/component-hooks/use-manager.d.ts +0 -45
  237. package/docs/assets/v3/brand-bar.png +0 -0
  238. package/docs/assets/v3/mobile-card.png +0 -0
  239. package/docs/assets/v3/preferences.png +0 -0
  240. package/docs/frameworks/react/components/consent-manager-provider.md +0 -75
  241. package/docs/frameworks/react/hooks/use-consent-manager/overview.md +0 -58
  242. package/docs/frameworks/react/iab/overview.md +0 -53
  243. package/docs/frameworks/react/script-loader.md +0 -63
  244. package/docs/frameworks/react/styling/overview.md +0 -217
  245. package/docs/guides/consent-state.md +0 -60
  246. package/docs/guides/deployment-modes.md +0 -75
  247. package/docs/integrations/clear-on-revocation.md +0 -167
  248. package/docs/integrations/granular-consent.md +0 -208
@@ -1,75 +0,0 @@
1
- ---
2
- title: Choose a deployment mode
3
- description: Choose who runs your consent backend, then select manifest, init or
4
- offline resolution for your deployment.
5
- group: guides
6
- ---
7
-
8
- ## Use Inth for managed policy and records
9
-
10
- Start with [Inth](https://inth.com) unless you need to operate the consent
11
- service yourself or deliberately need only local browser records. Configure
12
- policy rules and trusted origins in the project, then use its exact backend
13
- endpoint in your framework setup.
14
-
15
- | Backend ownership | Policy source | Record storage | Use when |
16
- | ------------------------- | ------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------- |
17
- | Inth hosted service | Centrally managed policy through a manifest or `/init` | Browser records plus backend submissions | You want managed policy and consent records |
18
- | Self-hosted c15t | Your backend's manifest or `/init` | Browser records plus your database | You need to operate the service and its infrastructure |
19
- | Browser-only offline mode | Bundled `policyRules` | Browser persistence | Local development and tests. Not recommended for production environments. |
20
-
21
- Hosted and self-hosted c15t use the same transport protocol. Switching who runs
22
- the backend does not require switching from manifests to `/init`.
23
-
24
- ## Choose data fetching separately
25
-
26
- For Next.js deployments with a runtime server, use the
27
- [manifest setup](https://c15t.com/docs/frameworks/next/data-fetching). It reuses public policy data
28
- in your application while consent writes still go to Inth. Regular backend
29
- `/init` is available when you want backend-owned request resolution or a simpler
30
- browser setup. See [data fetching and transports](./data-fetching.md) for
31
- the comparison, including custom transports and offline mode.
32
-
33
- Manifest resolution removes the per-visitor `/init` request, and with it the
34
- backend's only count of visitors. The server adapters replace it with a session
35
- report: after each resolution, on a server-rendered page or the same-origin
36
- init route, the host posts a small report to the backend's `POST /sessions`,
37
- server-to-server and detached from the response. The browser makes no request
38
- and the report stores no identity; the visitor's IP and user agent travel as
39
- forwarded headers under the backend's usual IP handling. Each report is one
40
- resolution; a page view can produce a `render` and a `route` report, and the
41
- consuming side groups them into sessions by address and user agent within a
42
- window. Static output resolves in the browser and sends none. Set `reportSessions: false` on an adapter to turn
43
- it off.
44
-
45
- ## Match initialization to your application output
46
-
47
- | Application output | Initial state | Required setup |
48
- | ------------------ | ------------------------- | ----------------------------------------------------------- |
49
- | Request SSR | Prepared for this visitor | Adapter request helper and matching client configuration |
50
- | Static HTML or SPA | Resolved in the browser | Reachable external URLs or deliberately bundled local rules |
51
-
52
- Request SSR can include the visitor's prompt in the initial HTML. Pass the
53
- prepared records and policy resolution through to hydration. Do not convert
54
- effective permissions into new stored choices.
55
-
56
- Static HTML is shared across visitors. It cannot contain a choice resolved from
57
- each visitor's cookies or geography at build time. A static site can still use
58
- Inth through browser requests. A same-origin `/api/c15t` URL only works if a
59
- service actually serves it; a Next.js static export does not run API routes.
60
-
61
- A manifest contains reusable public policy data. A resolved init response and
62
- personalized consent HTML belong to a request. Do not give them the same shared
63
- cache treatment.
64
-
65
- ## Handle initialization and storage failures
66
-
67
- While no policy resolves, optional permissions stay denied and the stock
68
- consent UI stays hidden. No banner can mean pending or failed initialization.
69
- It does not mean permission to load analytics. Observe errors before changing
70
- presentation, and do not silently switch to offline policy after a hosted
71
- request fails.
72
-
73
- Browser storage can also be unavailable. A working in-memory interaction does
74
- not prove the choice survives reload. Use
75
- [verification](./verify-consent.md) to test the actual deployment.
@@ -1,167 +0,0 @@
1
- ---
2
- title: Clear on revocation
3
- description: Remove configured first-party cookies and Web Storage keys when
4
- their consent category is denied.
5
- group: integrations
6
- ---
7
-
8
- ## Configure cleanup
9
-
10
- Add `clearOnRevocation` to your provider or runtime options. Declare only the
11
- data owned by each optional category:
12
-
13
- ```ts
14
- import { hosted, type ClearOnRevocationConfig } from 'c15t';
15
- import { createConsentRuntime } from 'c15t/runtime';
16
-
17
- const clearOnRevocation = {
18
- measurement: {
19
- cookies: ['_ga', '_ga_*'],
20
- localStorage: ['analytics:*'],
21
- },
22
- marketing: {
23
- cookies: ['_fbp'],
24
- sessionStorage: ['campaign-id'],
25
- },
26
- } satisfies ClearOnRevocationConfig;
27
-
28
- const runtime = createConsentRuntime({
29
- mode: hosted({ url: '/api/c15t' }),
30
- clearOnRevocation,
31
- });
32
-
33
- // Start in the browser after mount. The endpoint must serve your c15t backend.
34
- runtime.start();
35
-
36
- // Call runtime.dispose() when the app no longer needs consent management.
37
- ```
38
-
39
- For React, pass the same configuration through `ConsentProvider.options`:
40
-
41
- ```tsx
42
- import type { ReactNode } from 'react';
43
- import { ConsentProvider, hosted } from 'c15t/react';
44
-
45
- const mode = hosted({ url: '/api/c15t' });
46
-
47
- export function Consent({ children }: { children: ReactNode }) {
48
- return (
49
- <ConsentProvider
50
- options={{
51
- mode,
52
- clearOnRevocation: {
53
- measurement: { cookies: ['_ga', '_ga_*'] },
54
- },
55
- }}
56
- >
57
- {children}
58
- </ConsentProvider>
59
- );
60
- }
61
- ```
62
-
63
- The same option is available in Next.js and TanStack Start `ConsentRoot` props, Vue and
64
- Nuxt configuration, Svelte providers, and Astro integration options. Solid and
65
- other headless integrations can use `createConsentRuntime` as shown above.
66
- Every adapter uses the same cleanup module.
67
-
68
- Omitting `clearOnRevocation` leaves cleanup disabled. The provider option is
69
- initial-only. Remount the provider to replace its cleanup configuration. For
70
- a shared runtime, configure the runtime owner rather than a borrowing provider.
71
-
72
- ## Matching names and cookie scopes
73
-
74
- Use an exact string or a nonempty prefix followed by `*`. `_ga_*` matches
75
- `_ga_ABC123`; it does not match `_ga`. Regular expressions, wildcards in other
76
- positions, and a bare `*` are unsupported. Web Storage keys may contain spaces,
77
- Unicode, and punctuation. Cookie names use their raw spelling, without URL
78
- decoding.
79
-
80
- Cookies can share a name while having different domains or paths. Cleanup
81
- tries the current host and its parent domains, and the current path and its
82
- ancestors. To target a specific scope, use an object:
83
-
84
- ```ts
85
- const clearOnRevocation = {
86
- measurement: {
87
- cookies: [
88
- { name: 'analytics-id', domain: 'example.com', path: '/' },
89
- { name: 'checkout-metrics', domain: '', path: '/checkout' },
90
- { name: 'partitioned-metrics', partitioned: true },
91
- ],
92
- },
93
- };
94
- ```
95
-
96
- An empty `domain` means host-only. Explicit domains and paths replace the
97
- automatic attempts for that field. Exact names can be deleted at a configured
98
- path even when the current page cannot read that cookie. Prefix matching can
99
- only discover cookie names visible to the current page, so use an exact name
100
- for a cookie on another path.
101
-
102
- Partitioned cookies require `partitioned: true`; ordinary targets remove
103
- unpartitioned cookies. Cookie deletion preserves the browser's `__Secure-`
104
- and `__Host-` prefix requirements. c15t protects its own consent, notice,
105
- privacy, pending-save, and IAB consent records in cookies and localStorage,
106
- including configured custom storage keys, even if your patterns match them.
107
- c15t does not store consent in sessionStorage, so targeted entries there are
108
- removed even when their names match consent storage keys.
109
-
110
- ## When cleanup runs
111
-
112
- The runtime attaches cleanup after persistence and the script loader. Cleanup
113
- waits while the policy is pending. On the first settled snapshot, it removes
114
- configured data for every denied category. This includes a new opt-in visitor
115
- who has not made a choice and a returning visitor whose permission expired.
116
-
117
- After that first pass, cleanup runs when a category changes from allowed to
118
- denied. Saving a refusal, expiry, a policy change, Global Privacy Control,
119
- or synchronized records can cause that transition. Under an opt-out policy,
120
- an expired grant that remains effectively allowed does not trigger deletion.
121
- The `necessary` category cannot be configured for cleanup.
122
-
123
- Cleanup keeps waiting if a failed initial request leaves the policy pending.
124
- If a previously settled policy falls back to denial after an initialization
125
- failure, cleanup removes its configured data. A later successful retry cannot
126
- restore deleted data.
127
-
128
- Runtime construction, server rendering, draft checkbox edits, opening the
129
- dialog, and disposal do not clear data. Cleanup does not poll storage or repeat
130
- on unrelated UI updates.
131
-
132
- ## Use an existing kernel
133
-
134
- For a manually assembled integration, attach the module in the browser after
135
- persistence hydration and script-loader setup:
136
-
137
- ```ts
138
- import { createClearOnRevocation } from 'c15t/modules/clear-on-revocation';
139
-
140
- const cleanup = createClearOnRevocation({
141
- kernel,
142
- config: { measurement: { cookies: ['_ga', '_ga_*'] } },
143
- storageConfig,
144
- });
145
-
146
- // Stop observing consent when this integration is torn down.
147
- cleanup.dispose();
148
- ```
149
-
150
- Here `kernel` is your existing consent kernel. Pass the same `storageConfig`
151
- used by persistence so cleanup protects custom record keys. Attaching the
152
- module can immediately clear denied categories if the policy is already
153
- settled. Do not also attach it when your provider or runtime owns cleanup.
154
-
155
- ## Browser limits
156
-
157
- Cleanup can remove JavaScript-accessible first-party cookies and keys in the
158
- current origin's `localStorage` and `sessionStorage`. It cannot remove
159
- `HttpOnly` cookies or another origin's data. Keep `HttpOnly` protections and
160
- use your server to expire cookies that require server access. Cookie deletion
161
- must match the cookie's scope. See the
162
- [browser cookie documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cookies).
163
-
164
- Browser restrictions can prevent reads or deletions. Cleanup failures do not
165
- block consent updates. A running SDK may write data again after a sweep, so
166
- keep script gating and the integration's consent-change or teardown behavior
167
- configured. Deleting a script element cannot undo JavaScript it already ran.
@@ -1,208 +0,0 @@
1
- ---
2
- title: Granular consent
3
- description: Let visitors grant a category and still turn one vendor off,
4
- without adopting IAB TCF.
5
- group: integrations
6
- ---
7
-
8
- Granular consent is choice below the category level: a visitor grants
9
- marketing and still turns Meta off. The unit of that choice is a vendor, so
10
- the API names them `vendors`, `vendor` and `data-vendor`, and the hooks
11
- `useVendorAllowed` and `useVendorDraft`. Everything else stays as it is:
12
- categories, policies, and the preference center gain vendor rows rather than
13
- a second consent model.
14
-
15
- ## Declare vendors
16
-
17
- Add `vendors` to your runtime options. Each vendor sits inside a category
18
- condition and needs a name and a privacy policy URL so the preference surface
19
- can list it. The React provider takes the same option once its preference
20
- center renders vendor rows; scripts, rules and iframes are gated the same way
21
- whichever place declares it:
22
-
23
- ```ts
24
- import { hosted, type Vendor } from 'c15t';
25
- import { createConsentRuntime } from 'c15t/runtime';
26
-
27
- const vendors = [
28
- {
29
- id: 'meta-pixel',
30
- name: 'Meta Pixel',
31
- category: 'marketing',
32
- privacyPolicyUrl: 'https://www.facebook.com/privacy/policy/',
33
- description: 'Ad conversion measurement and audiences.',
34
- },
35
- {
36
- id: 'google-analytics',
37
- name: 'Google Analytics',
38
- category: 'measurement',
39
- privacyPolicyUrl: 'https://policies.google.com/privacy',
40
- },
41
- ] satisfies Vendor[];
42
-
43
- const runtime = createConsentRuntime({
44
- mode: hosted({ url: '/api/c15t' }),
45
- vendors,
46
- scripts: [
47
- {
48
- id: 'meta-pixel',
49
- category: 'marketing',
50
- vendor: 'meta-pixel',
51
- src: 'https://connect.facebook.net/en_US/fbevents.js',
52
- },
53
- ],
54
- });
55
-
56
- // Start in the browser after mount. The endpoint must serve your c15t backend.
57
- runtime.start();
58
- ```
59
-
60
- The `id` is a lowercase slug of up to 64 characters. Reuse it as the `vendor`
61
- field on scripts and network rules and as the `data-vendor` attribute on
62
- iframes. Integrations from `@c15t/scripts` already set `vendor` to their
63
- manifest slug, so `gtag()` and `metaPixel()` need no extra wiring.
64
-
65
- A backend can also declare vendors. Add `vendors` and an optional
66
- `vendorListVersion` to the manifest configuration; `/init` returns them and the
67
- client merges them with the vendors declared in code. When both declare the
68
- same id, the copy declared in code wins, and the backend copy comes back if the
69
- code declaration is removed later. A slug used by a script, rule or iframe
70
- but declared nowhere still gates loading. It is hidden from the preference surface, and the
71
- runtime warns about it outside production.
72
-
73
- ## How a vendor is gated
74
-
75
- A target loads when its category condition passes and the visitor has not
76
- turned its vendor off:
77
-
78
- ```text
79
- loads = category condition satisfied AND vendor not denied
80
- ```
81
-
82
- The category is evaluated first, so an unknown category still throws as a
83
- configuration error. A vendor toggle never grants a category on its own: with
84
- marketing denied, `meta-pixel` stays blocked whatever its own switch says.
85
- A script with `alwaysLoad` still mounts, as it does for a denied category;
86
- its callbacks receive the vendor result in `info.vendor.granted` so a
87
- self-managing SDK can honor it.
88
-
89
- Under an `iab` policy the `vendor` slug is inert. Vendor consent then comes from
90
- the TC string through `vendorId`, and the vendor rows are not shown.
91
-
92
- The same rule applies to the three gates:
93
-
94
- | Surface | Field |
95
- | --------------- | ------------------------------- |
96
- | Script loader | `Script.vendor` |
97
- | Network blocker | `NetworkBlockerRule.vendor` |
98
- | Iframe blocker | `data-vendor` on the `<iframe>` |
99
-
100
- An iframe with `data-vendor` and no `data-category` is gated on the vendor
101
- alone. An unknown `data-vendor` value is granted rather than thrown: a vendor
102
- the visitor never saw cannot have been turned off. Such a frame has no
103
- category to follow, so a denial the visitor recorded earlier holds even while
104
- nothing declares the slug, for example before the backend's vendor list has
105
- arrived on a cold start.
106
-
107
- A script, rule or frame keeps its slug declared for as long as it is
108
- configured. If a backend list or a provider update drops the entry, the
109
- loader or blocker puts it back, so a stored denial keeps gating it. A slug
110
- several modules share stays under every category they name it with, whichever
111
- module updates last, and drops a category only once no module names it there.
112
- Disposing a loader or blocker, or removing a gated frame from the page, drops
113
- what only it named, so a vendor no live module owns stops being toggleable.
114
-
115
- ## Record a vendor choice
116
-
117
- Vendor grants travel with the save. Stage them and confirm with the next save,
118
- or pass them next to the categories:
119
-
120
- ```ts
121
- // Stage from a toggle handler; nothing changes until save({}) runs. The
122
- // empty patch confirms no category, so only the staged vendor is recorded;
123
- // save() with no input would reconfirm every displayed category too.
124
- runtime.stageVendorConsent('meta-pixel', false);
125
- await runtime.kernel.commands.save({});
126
-
127
- // Or confirm categories and vendors in one action.
128
- await runtime.kernel.commands.save({
129
- marketing: true,
130
- measurement: true,
131
- vendors: { 'meta-pixel': false },
132
- });
133
- ```
134
-
135
- `stageVendorConsent` stages a vendor slug for the next save; it is not the
136
- IAB handle's `setVendorConsent`, which sets a TCF vendor by numeric id and
137
- takes effect at once. The grants can also travel in the save context as
138
- `{ vendors }`, which wins when both are given.
139
-
140
- Only the vendors the visitor turned off are stored. Accept all and reject all
141
- both clear that list, so vendors follow their category on a bulk action. A bulk
142
- action narrowed to the displayed categories only lifts the denials of vendors
143
- those categories decide on their own; a vendor another granted category would
144
- still load keeps its denial. A
145
- vendor that is not declared, or is declared with `disabled: true`, is ignored.
146
- Under an opt-out policy every vendor starts on and the stored list is the
147
- do-not-sell list.
148
-
149
- A vendor-only change records without touching category receipts. The kernel
150
- emits `vendors:recorded` rather than `choice:recorded`, writes the
151
- `<storageKey>-vendors` cookie and localStorage entry, and sends the complete
152
- grant map to the backend as `vendorChoice`. Category confirmation times are not
153
- renewed. The vendor entry also carries the subject id, so a visitor whose first
154
- act only decided vendors keeps the same subject after a reload even though no
155
- category record exists yet.
156
-
157
- Scripts see the vendor result in their callbacks. `ScriptCallbackInfo.vendor`
158
- carries `{ id, granted }` outside IAB mode. Integrations that send Google
159
- Consent Mode or RudderStack signals send every category as denied while their
160
- vendor is off, so the vendor's own consent API cannot re-enable tracking.
161
-
162
- ## Show vendors in the preference center
163
-
164
- The `ConsentWidget` and `ConsentDialog` in React, Vue and Svelte list vendors
165
- under their category when the provider declares them. Pass the same `vendors`
166
- array to `ConsentProvider`, to the `vendors` prop of `ConsentRoot` in
167
- [Next.js](https://c15t.com/docs/frameworks/next/script-loader#granular-consent) and
168
- [TanStack Start](https://c15t.com/docs/frameworks/tanstack-start/quickstart#granular-consent),
169
- to the Nuxt module or Vue plugin config next to `scripts`, or to
170
- `ConsentManagerProvider` options in Svelte:
171
-
172
- ```tsx
173
- import { ConsentProvider, hosted } from 'c15t/react';
174
-
175
- <ConsentProvider options={{ mode: hosted({ url: '/api/c15t' }), vendors }}>
176
- {children}
177
- </ConsentProvider>;
178
- ```
179
-
180
- Each category row expands to one card per vendor with its own switch. The
181
- switches disable while the category is off in the draft, and Save records the
182
- vendors the visitor moved. A custom control uses `useVendorDraft()` from
183
- `c15t/react` to read and stage the same grants, with `isStale` and `reset` for
184
- a draft the policy or vendor list changed under, and `useVendorAllowed(id)` to
185
- read one vendor's effective result. Copy comes from
186
- `consentManagerDialog.vendors.{title, privacyPolicy, disabledByCategory,
187
- switchLabel}` in the translations. In Vue, `useConsentDraft()` returns the
188
- same `vendors` map and `setVendor`; in Svelte, `getConsentManager()` exposes
189
- `selectedVendors`, `setSelectedVendor` and `getDisplayedVendors(category)`.
190
- The three frameworks render the same cards, and the parity suite compares
191
- their markup, accessibility tree, computed styles and geometry.
192
-
193
- ## What a denial does not do
194
-
195
- Turning a vendor off blocks future loads and requests. It does not delete the
196
- cookies that vendor already set, and
197
- [clear on revocation](./clear-on-revocation.md) does not help here:
198
- it runs when a category is denied, and the category stays granted when only one
199
- of its vendors is off. Remove that vendor's cookies yourself from an
200
- `onConsentChange` callback that checks `info.vendor.granted`.
201
-
202
- A vendor denial has no expiry and no policy basis. It stays until the visitor
203
- changes it or a bulk action clears it, including across a policy change that
204
- requires the category choice again.
205
-
206
- Adding a vendor to the list does not reopen consent. New vendors default to on
207
- inside a granted category. Use the policy rule's `copyRevision` when a new
208
- vendor should prompt the visitor again.