@c15t/react 2.0.0-rc.9 → 2.0.0
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.
- package/README.md +3 -3
- package/dist/components/consent-banner/consent-banner.cjs +1 -1
- package/dist/components/consent-banner/consent-banner.js +1 -1
- package/dist/components/consent-dialog/atoms/card.cjs +1 -1
- package/dist/components/consent-dialog/atoms/card.js +1 -1
- package/dist/components/consent-widget/atoms/root.cjs +1 -1
- package/dist/components/consent-widget/atoms/root.js +1 -1
- package/dist/components/consent-widget/consent-widget.cjs +1 -1
- package/dist/components/consent-widget/consent-widget.js +1 -1
- package/dist/components/iab-consent-banner/iab-consent-banner.cjs +1 -1
- package/dist/components/iab-consent-banner/iab-consent-banner.js +1 -1
- package/dist/components/iab-consent-dialog/iab-consent-dialog.cjs +1 -1
- package/dist/components/iab-consent-dialog/iab-consent-dialog.js +1 -1
- package/dist/components/shared/ui/branding.cjs +1 -1
- package/dist/components/shared/ui/branding.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/version.cjs +1 -1
- package/dist/version.js +1 -1
- package/dist-types/components/consent-dialog/atoms/card.d.ts +1 -0
- package/dist-types/components/consent-dialog/index.d.ts +2 -1
- package/dist-types/components/consent-widget/atoms/root.d.ts +0 -5
- package/dist-types/components/shared/ui/branding.d.ts +5 -1
- package/dist-types/types/consent-manager.d.ts +2 -2
- package/dist-types/version.d.ts +1 -1
- package/docs/building-headless-components.md +118 -16
- package/docs/components/consent-banner.md +1 -30
- package/docs/components/consent-dialog.md +4 -3
- package/docs/components/consent-manager-provider.md +11 -11
- package/docs/components/consent-widget.md +1 -28
- package/docs/concepts/client-modes.md +1 -1
- package/docs/concepts/policy-packs.md +1 -1
- package/docs/hooks/use-consent-manager/overview.md +18 -2
- package/docs/iab/consent-banner.md +6 -4
- package/docs/iab/consent-dialog.md +6 -4
- package/docs/iab/overview.md +12 -11
- package/docs/iab/use-gvl-data.md +9 -197
- package/docs/internationalization.md +1 -1
- package/docs/optimization.md +35 -1
- package/docs/policy-packs.md +1 -1
- package/docs/quickstart.md +11 -8
- package/docs/styling/color-scheme.md +1 -1
- package/docs/styling/css-variables.md +1 -1
- package/docs/styling/overview.md +11 -4
- package/docs/styling/slots.md +7 -3
- package/docs/styling/tokens.md +3 -1
- package/package.json +7 -8
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import type { Branding } from 'c15t';
|
|
2
2
|
import type { SVGProps } from 'react';
|
|
3
|
+
import type { CSSPropertiesWithVars } from '../../../types/theme';
|
|
3
4
|
export type ResolvedBranding = 'c15t' | 'inth' | 'none';
|
|
4
5
|
export type BrandingVariant = 'footer' | 'dialog-tag' | 'banner-tag';
|
|
6
|
+
export type BrandingThemeKey = 'consentBannerTag' | 'consentDialogTag' | 'consentWidgetTag' | 'iabConsentBannerTag' | 'iabConsentDialogTag';
|
|
5
7
|
type BrandingProps = {
|
|
6
8
|
hideBranding: boolean;
|
|
7
9
|
variant?: BrandingVariant;
|
|
10
|
+
themeKey?: BrandingThemeKey;
|
|
8
11
|
className?: string;
|
|
12
|
+
style?: CSSPropertiesWithVars;
|
|
9
13
|
'data-testid'?: string;
|
|
10
14
|
};
|
|
11
15
|
type BrandingFullLogoProps = {
|
|
@@ -19,5 +23,5 @@ export declare function resolveBranding(branding: Branding | string): ResolvedBr
|
|
|
19
23
|
export declare function getBrandingHref(branding: Branding | string, refParam?: string): string;
|
|
20
24
|
export declare function BrandingFullLogo({ branding, className, }: BrandingFullLogoProps): import("react/jsx-runtime").JSX.Element;
|
|
21
25
|
export declare function BrandingCompactLogo({ branding, ...props }: BrandingCompactLogoProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
-
export declare function BrandingLink({ hideBranding, variant, className, 'data-testid': testId, }: BrandingProps): import("react/jsx-runtime").JSX.Element | null;
|
|
26
|
+
export declare function BrandingLink({ hideBranding, variant, themeKey, className, style, 'data-testid': testId, }: BrandingProps): import("react/jsx-runtime").JSX.Element | null;
|
|
23
27
|
export {};
|
|
@@ -16,7 +16,7 @@ export interface ReactUIOptions extends UIOptions {
|
|
|
16
16
|
* In offline mode this also includes `offlinePolicy` configuration for
|
|
17
17
|
* local policy previews.
|
|
18
18
|
*
|
|
19
|
-
* @see {@link https://
|
|
19
|
+
* @see {@link https://c15t.com/docs/frameworks/react/policy-packs}
|
|
20
20
|
*/
|
|
21
21
|
export type ConsentManagerOptions = BaseConsentManagerOptions & ReactUIOptions;
|
|
22
22
|
/**
|
|
@@ -33,7 +33,7 @@ export interface ConsentManagerProviderProps {
|
|
|
33
33
|
* Configuration options for the consent manager.
|
|
34
34
|
* This includes core, React, store, and translation settings.
|
|
35
35
|
*
|
|
36
|
-
* @see {@link https://
|
|
36
|
+
* @see {@link https://c15t.com/docs/frameworks/react/components/consent-manager-provider}
|
|
37
37
|
*/
|
|
38
38
|
options: ConsentManagerOptions;
|
|
39
39
|
}
|
package/dist-types/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const version = "2.0.0
|
|
1
|
+
export declare const version = "2.0.0";
|
|
@@ -4,11 +4,11 @@ description: Build policy-aware custom consent components in React using the hea
|
|
|
4
4
|
---
|
|
5
5
|
Building custom consent UI is easier now because c15t exposes multiple layers of policy-aware primitives instead of forcing you to reconstruct banner rules by hand.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Think of customization as a ladder:
|
|
8
8
|
|
|
9
9
|
* stock component props for the shortest path
|
|
10
|
-
* `ConsentBanner.PolicyActions` and `ConsentWidget.PolicyActions`
|
|
11
|
-
* `useHeadlessConsentUI()`
|
|
10
|
+
* `ConsentBanner.PolicyActions` and `ConsentWidget.PolicyActions` when you want custom structure but still want c15t to resolve policy-aware actions
|
|
11
|
+
* `useHeadlessConsentUI()` when you need fully manual action rendering, custom controls, or non-standard flow
|
|
12
12
|
|
|
13
13
|
> ⚠️ **Warning:**
|
|
14
14
|
> Headless is the last step in the customization ladder. Use this guide only when pre-built components, tokens, slots, compound components, and noStyle are no longer sufficient.
|
|
@@ -26,6 +26,29 @@ The split is intentional: `@c15t/ui` owns pure policy-action resolution, while t
|
|
|
26
26
|
> ℹ️ **Info:**
|
|
27
27
|
> This guide is about building your own components while still respecting resolved policy-pack behavior. For the general headless overview, see Headless Mode.
|
|
28
28
|
|
|
29
|
+
## Choose the Smallest Layer That Solves the Job
|
|
30
|
+
|
|
31
|
+
Start with the smallest API surface that still gives you the behavior you need:
|
|
32
|
+
|
|
33
|
+
* Stay with stock components when you only need theming, spacing, copy, or legal-link changes
|
|
34
|
+
* Use `ConsentBanner.PolicyActions` or `ConsentWidget.PolicyActions` when you want a custom compound-component layout but still want grouped actions, ordering, and primary emphasis to come from policy
|
|
35
|
+
* Add `renderAction` when the grouping is still correct but you want to remap actions to stock c15t button compounds
|
|
36
|
+
* Reach for `useHeadlessConsentUI()` only when you need custom button elements, need to map `actionGroups` yourself, wire non-button controls, or coordinate the consent UI with a more custom state machine
|
|
37
|
+
|
|
38
|
+
This order matters because every step down the ladder gives you more control, but also makes it easier for your UI to drift away from the resolved policy if you stop using the provided state.
|
|
39
|
+
|
|
40
|
+
## Before You Build Headless UI
|
|
41
|
+
|
|
42
|
+
Do not use headless mode for problems that are still inside the stock component model:
|
|
43
|
+
|
|
44
|
+
* Use `layout`, `direction`, `primaryButton`, and `legalLinks` before you rebuild banner markup
|
|
45
|
+
* Use `theme.consentActions` before you swap out stock actions
|
|
46
|
+
* Use tokens such as `colors.surface` and `colors.surfaceHover` before raw CSS overrides
|
|
47
|
+
* Use slots such as `consentBannerCard`, `consentBannerFooter`, and `consentDialogCard` before compound components
|
|
48
|
+
* Use `ConsentManagerProvider.options.i18n` before rebuilding UI just to change text
|
|
49
|
+
|
|
50
|
+
A good rule: if the stock banner or dialog structure is still correct, you probably do not need headless mode.
|
|
51
|
+
|
|
29
52
|
## What the Headless Tooling Gives You
|
|
30
53
|
|
|
31
54
|
The main win is that your custom UI can stay aligned with policy packs without duplicating policy logic in your components.
|
|
@@ -40,9 +63,63 @@ The main win is that your custom UI can stay aligned with policy packs without d
|
|
|
40
63
|
* UI profile and scroll-lock hints
|
|
41
64
|
* whether the banner or dialog should currently be visible
|
|
42
65
|
|
|
66
|
+
The hook also gives you the policy-aware action helpers you are expected to call:
|
|
67
|
+
|
|
68
|
+
* `performBannerAction('accept' | 'reject')`
|
|
69
|
+
* `performDialogAction('accept' | 'reject')`
|
|
70
|
+
* `saveCustomPreferences()` for the dialog `customize` action
|
|
71
|
+
* `openDialog()`, `openBanner()`, and `closeUI()` for surface visibility
|
|
72
|
+
|
|
43
73
|
That means your component mostly focuses on markup and design-system concerns instead of re-implementing policy interpretation.
|
|
44
74
|
|
|
45
|
-
For most compound-component layouts, start with `ConsentBanner.PolicyActions` or `ConsentWidget.PolicyActions`. They render stock c15t buttons and translations by default, and `renderAction` is only needed when you want to override
|
|
75
|
+
For most compound-component layouts, start with `ConsentBanner.PolicyActions` or `ConsentWidget.PolicyActions`. They render stock c15t buttons and translations by default, and `renderAction` is only needed when you want to override which stock compound renders for each action. Reach for manual `actionGroups` mapping when you need action rendering that no longer fits the stock button compounds.
|
|
76
|
+
|
|
77
|
+
## Policy-Aware Compound Components First
|
|
78
|
+
|
|
79
|
+
If your goal is "custom layout, same policy behavior", start here before dropping to manual `actionGroups` rendering:
|
|
80
|
+
|
|
81
|
+
```tsx
|
|
82
|
+
import { ConsentBanner } from '@c15t/react';
|
|
83
|
+
|
|
84
|
+
export function BannerShell() {
|
|
85
|
+
return (
|
|
86
|
+
<ConsentBanner.Root>
|
|
87
|
+
<ConsentBanner.Card>
|
|
88
|
+
<ConsentBanner.Header>
|
|
89
|
+
<ConsentBanner.Title />
|
|
90
|
+
<ConsentBanner.Description />
|
|
91
|
+
</ConsentBanner.Header>
|
|
92
|
+
<ConsentBanner.PolicyActions />
|
|
93
|
+
</ConsentBanner.Card>
|
|
94
|
+
</ConsentBanner.Root>
|
|
95
|
+
);
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
Use `renderAction` only when you want to remap actions to stock button compounds while keeping the same policy-driven grouping and ordering:
|
|
100
|
+
|
|
101
|
+
```tsx
|
|
102
|
+
import { ConsentBanner } from '@c15t/react';
|
|
103
|
+
|
|
104
|
+
export function BannerActionsWithCustomMapping() {
|
|
105
|
+
return (
|
|
106
|
+
<ConsentBanner.PolicyActions
|
|
107
|
+
renderAction={(action, props) => {
|
|
108
|
+
const { key, ...buttonProps } = props;
|
|
109
|
+
|
|
110
|
+
switch (action) {
|
|
111
|
+
case 'accept':
|
|
112
|
+
return <ConsentBanner.AcceptButton key={key} {...buttonProps} />;
|
|
113
|
+
case 'reject':
|
|
114
|
+
return <ConsentBanner.RejectButton key={key} {...buttonProps} />;
|
|
115
|
+
case 'customize':
|
|
116
|
+
return <ConsentBanner.CustomizeButton key={key} {...buttonProps} />;
|
|
117
|
+
}
|
|
118
|
+
}}
|
|
119
|
+
/>
|
|
120
|
+
);
|
|
121
|
+
}
|
|
122
|
+
```
|
|
46
123
|
|
|
47
124
|
> ℹ️ **Info:**
|
|
48
125
|
> For custom layouts built from c15t compound components, prefer ConsentBanner.PolicyActions and ConsentWidget.PolicyActions. The examples below intentionally use manual actionGroups mapping to show the fully headless escape hatch.
|
|
@@ -86,9 +163,20 @@ export function ConsentManager({ children }: { children: ReactNode }) {
|
|
|
86
163
|
import { useHeadlessConsentUI, useTranslations } from '@c15t/react/headless';
|
|
87
164
|
|
|
88
165
|
export function CustomConsentBanner() {
|
|
89
|
-
const { banner, openDialog,
|
|
166
|
+
const { banner, openDialog, performBannerAction } = useHeadlessConsentUI();
|
|
90
167
|
const translations = useTranslations();
|
|
91
168
|
|
|
169
|
+
function getActionLabel(action: (typeof banner.allowedActions)[number]) {
|
|
170
|
+
switch (action) {
|
|
171
|
+
case 'accept':
|
|
172
|
+
return translations.common.acceptAll;
|
|
173
|
+
case 'reject':
|
|
174
|
+
return translations.common.rejectAll;
|
|
175
|
+
case 'customize':
|
|
176
|
+
return translations.common.customize;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
|
|
92
180
|
if (!banner.isVisible) return null;
|
|
93
181
|
|
|
94
182
|
return (
|
|
@@ -111,14 +199,10 @@ export function CustomConsentBanner() {
|
|
|
111
199
|
openDialog();
|
|
112
200
|
return;
|
|
113
201
|
}
|
|
114
|
-
void
|
|
202
|
+
void performBannerAction(action);
|
|
115
203
|
}}
|
|
116
204
|
>
|
|
117
|
-
{action
|
|
118
|
-
? translations.common.acceptAll
|
|
119
|
-
: action === 'reject'
|
|
120
|
-
? translations.common.rejectAll
|
|
121
|
-
: translations.common.customize}
|
|
205
|
+
{getActionLabel(action)}
|
|
122
206
|
</button>
|
|
123
207
|
))}
|
|
124
208
|
</div>
|
|
@@ -149,6 +233,17 @@ export function CustomConsentDialog() {
|
|
|
149
233
|
} = useConsentManager();
|
|
150
234
|
const translations = useTranslations();
|
|
151
235
|
|
|
236
|
+
function getActionLabel(action: (typeof dialog.allowedActions)[number]) {
|
|
237
|
+
switch (action) {
|
|
238
|
+
case 'accept':
|
|
239
|
+
return translations.common.acceptAll;
|
|
240
|
+
case 'reject':
|
|
241
|
+
return translations.common.rejectAll;
|
|
242
|
+
case 'customize':
|
|
243
|
+
return translations.common.save;
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
|
|
152
247
|
if (!dialog.isVisible) return null;
|
|
153
248
|
|
|
154
249
|
const displayedTypes = consentTypes.filter(
|
|
@@ -197,11 +292,7 @@ export function CustomConsentDialog() {
|
|
|
197
292
|
void performDialogAction(action);
|
|
198
293
|
}}
|
|
199
294
|
>
|
|
200
|
-
{action
|
|
201
|
-
? translations.common.acceptAll
|
|
202
|
-
: action === 'reject'
|
|
203
|
-
? translations.common.rejectAll
|
|
204
|
-
: translations.common.save}
|
|
295
|
+
{getActionLabel(action)}
|
|
205
296
|
</button>
|
|
206
297
|
))}
|
|
207
298
|
</div>
|
|
@@ -212,6 +303,17 @@ export function CustomConsentDialog() {
|
|
|
212
303
|
}
|
|
213
304
|
```
|
|
214
305
|
|
|
306
|
+
## What Headless Is Not For
|
|
307
|
+
|
|
308
|
+
Headless mode is not the recommended path for:
|
|
309
|
+
|
|
310
|
+
* changing the banner footer background
|
|
311
|
+
* rounding the stock banner card
|
|
312
|
+
* restyling stock banner or dialog buttons
|
|
313
|
+
* changing consent copy
|
|
314
|
+
|
|
315
|
+
Those should stay in the pre-built stack with tokens, slots, `theme.consentActions`, and provider `i18n`.
|
|
316
|
+
|
|
215
317
|
## What a Policy-Aware Headless Component Should Respect
|
|
216
318
|
|
|
217
319
|
When you build custom banner or dialog components, make sure they use:
|
|
@@ -241,36 +241,7 @@ renderAction={(action, props) => {
|
|
|
241
241
|
/>
|
|
242
242
|
```
|
|
243
243
|
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
```tsx
|
|
247
|
-
import { ConsentBanner, useTranslations } from '@c15t/react';
|
|
248
|
-
|
|
249
|
-
export function CustomBannerActions() {
|
|
250
|
-
const { common } = useTranslations();
|
|
251
|
-
|
|
252
|
-
return (
|
|
253
|
-
<ConsentBanner.PolicyActions
|
|
254
|
-
renderAction={(action, props) => (
|
|
255
|
-
<button
|
|
256
|
-
key={props.key}
|
|
257
|
-
type="button"
|
|
258
|
-
className={props.isPrimary ? 'btn-primary' : 'btn-secondary'}
|
|
259
|
-
style={props.style}
|
|
260
|
-
>
|
|
261
|
-
{action === 'accept'
|
|
262
|
-
? common.acceptAll
|
|
263
|
-
: action === 'reject'
|
|
264
|
-
? common.rejectAll
|
|
265
|
-
: common.customize}
|
|
266
|
-
</button>
|
|
267
|
-
)}
|
|
268
|
-
/>
|
|
269
|
-
);
|
|
270
|
-
}
|
|
271
|
-
```
|
|
272
|
-
|
|
273
|
-
For maximum control, use `useHeadlessConsentUI()` and render `banner.actionGroups` manually.
|
|
244
|
+
`renderAction` is still meant for stock button compounds. If you want completely custom button elements and click handling, use `useHeadlessConsentUI()` and render `banner.actionGroups` manually instead of `ConsentBanner.PolicyActions`.
|
|
274
245
|
|
|
275
246
|
If you only need styling changes, stay with tokens and slots instead of rebuilding the banner layout.
|
|
276
247
|
|
|
@@ -75,7 +75,7 @@ Add a floating button that lets users re-open the dialog after dismissing the ba
|
|
|
75
75
|
|
|
76
76
|
## Branding
|
|
77
77
|
|
|
78
|
-
Hide the c15t branding
|
|
78
|
+
Hide the c15t branding tag:
|
|
79
79
|
|
|
80
80
|
```tsx
|
|
81
81
|
<ConsentDialog hideBranding />
|
|
@@ -84,7 +84,7 @@ Hide the c15t branding in the dialog footer:
|
|
|
84
84
|
## Styling First
|
|
85
85
|
|
|
86
86
|
> ℹ️ **Info:**
|
|
87
|
-
> If you are only changing visuals, stay with the stock dialog and use the theme system first. Start with tokens and slots such as consentDialogCard,
|
|
87
|
+
> If you are only changing visuals, stay with the stock dialog and use the theme system first. Start with tokens and slots such as consentDialogCard, consentWidgetFooter, and consentDialogTag. See Styling Overview.
|
|
88
88
|
|
|
89
89
|
```tsx
|
|
90
90
|
<ConsentManagerProvider
|
|
@@ -97,7 +97,8 @@ Hide the c15t branding in the dialog footer:
|
|
|
97
97
|
slots: {
|
|
98
98
|
consentDialogCard: 'rounded-[32px] shadow-xl',
|
|
99
99
|
consentDialogHeader: 'gap-3',
|
|
100
|
-
|
|
100
|
+
consentWidgetFooter: 'gap-3 pt-6',
|
|
101
|
+
consentDialogTag: 'shadow-none',
|
|
101
102
|
},
|
|
102
103
|
},
|
|
103
104
|
}}
|
|
@@ -36,15 +36,15 @@ export default function ConsentManager({ children }: { children: ReactNode }) {
|
|
|
36
36
|
|Property|Type|Description|Default|Required|
|
|
37
37
|
|:--|:--|:--|:--|:--:|
|
|
38
38
|
|enabled|boolean \|undefined|Whether c15t should be active.|true|Optional|
|
|
39
|
-
|callbacks|[Callbacks \|undefined](https://
|
|
40
|
-
|scripts|[Script \|undefined](https://
|
|
39
|
+
|callbacks|[Callbacks \|undefined](https://c15t.com/docs/frameworks/react/callbacks)|Event callbacks for consent actions.|-|Optional|
|
|
40
|
+
|scripts|[Script \|undefined](https://c15t.com/docs/frameworks/react/script-loader)|Dynamically load scripts based on consent state.|-|Optional|
|
|
41
41
|
|legalLinks|Object \|undefined|Configuration for the legal links.|-|Optional|
|
|
42
42
|
|storageConfig|StorageConfig \|undefined|Storage configuration for consent persistence.|-|Optional|
|
|
43
43
|
|user|User \|undefined|The user's information. Usually your own internal ID for the user from your auth provider.|-|Optional|
|
|
44
44
|
|overrides|Overrides \|undefined|Forcefully set values like country, region, language for the consent manager. These values will override the values detected from the browser.|-|Optional|
|
|
45
|
-
|networkBlocker|[NetworkBlockerConfig \|undefined](https://
|
|
46
|
-
|iab|[IABConfig \|undefined](https://
|
|
47
|
-
|ssrData|[Object \|undefined](https://
|
|
45
|
+
|networkBlocker|[NetworkBlockerConfig \|undefined](https://c15t.com/docs/frameworks/react/network-blocker)|Configuration for the network request blocker.|-|Optional|
|
|
46
|
+
|iab|[IABConfig \|undefined](https://c15t.com/docs/frameworks/react/iab/overview)|IAB TCF 2.3 configuration.|-|Optional|
|
|
47
|
+
|ssrData|[Object \|undefined](https://c15t.com/docs/frameworks/react/server-side)|SSR-prefetched data for hydration.|-|Optional|
|
|
48
48
|
|
|
49
49
|
#### `callbacks` Callbacks
|
|
50
50
|
|
|
@@ -171,8 +171,8 @@ SSR-prefetched data for hydration.
|
|
|
171
171
|
|Property|Type|Description|Default|Required|
|
|
172
172
|
|:--|:--|:--|:--|:--:|
|
|
173
173
|
|i18n|I18nConfig \|undefined|Preferred i18n configuration in c15t v2.|-|Optional|
|
|
174
|
-
|translations|[TranslationConfig \|undefined](https://
|
|
175
|
-
|consentCategories|[AllConsentNames \|undefined](https://
|
|
174
|
+
|translations|[TranslationConfig \|undefined](https://c15t.com/docs/frameworks/react/internationalization)|Translation configuration to seed the store with.|-|Optional|
|
|
175
|
+
|consentCategories|[AllConsentNames \|undefined](https://c15t.com/docs/frameworks/react/concepts/consent-categories)|Consent categories to show in the consent banner.|-|Optional|
|
|
176
176
|
|
|
177
177
|
#### `i18n` I18nConfig
|
|
178
178
|
|
|
@@ -198,12 +198,12 @@ Translation configuration to seed the store with.
|
|
|
198
198
|
|
|
199
199
|
|Property|Type|Description|Default|Required|
|
|
200
200
|
|:--|:--|:--|:--|:--:|
|
|
201
|
-
|theme|[Theme \|undefined](https://
|
|
201
|
+
|theme|[Theme \|undefined](https://c15t.com/docs/frameworks/react/styling/tokens)|Visual theme to apply.|-|Optional|
|
|
202
202
|
|disableAnimation|boolean \|undefined|Whether to disable animations.|false|Optional|
|
|
203
203
|
|scrollLock|boolean \|undefined|Whether to lock scroll when dialogs are open.|false|Optional|
|
|
204
204
|
|trapFocus|boolean \|undefined|Whether to trap focus within dialogs.|true|Optional|
|
|
205
|
-
|colorScheme|["light" \|"dark" \|"system" \|undefined](https://
|
|
206
|
-
|noStyle|[boolean \|undefined](https://
|
|
205
|
+
|colorScheme|["light" \|"dark" \|"system" \|undefined](https://c15t.com/docs/frameworks/react/styling/color-scheme)|Color scheme preference. With this option, you can force the theme to be light, dark or system. Otherwise, the theme will be detected if you have '.dark' classname in your document.|-|Optional|
|
|
206
|
+
|noStyle|[boolean \|undefined](https://c15t.com/docs/frameworks/react/headless)|Whether to disable default styles.|false|Optional|
|
|
207
207
|
|
|
208
208
|
#### `theme` Theme
|
|
209
209
|
|
|
@@ -392,7 +392,7 @@ Read the full guide at [Policy Packs](/docs/frameworks/react/policy-packs) and t
|
|
|
392
392
|
|Property|Type|Description|Default|Required|
|
|
393
393
|
|:--|:--|:--|:--|:--:|
|
|
394
394
|
|children|ReactNode|React children to render within the provider.|-|✅ Required|
|
|
395
|
-
|options|[ConsentManagerOptions](https://
|
|
395
|
+
|options|[ConsentManagerOptions](https://c15t.com/docs/frameworks/react/components/consent-manager-provider)|Configuration options for the consent manager. This includes core, React, store, and translation settings.|-|✅ Required|
|
|
396
396
|
|
|
397
397
|
#### `options` ConsentManagerOptions
|
|
398
398
|
|
|
@@ -117,34 +117,7 @@ renderAction={(action, props) => {
|
|
|
117
117
|
/>
|
|
118
118
|
```
|
|
119
119
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
```tsx
|
|
123
|
-
import { ConsentWidget, useTranslations } from '@c15t/react';
|
|
124
|
-
|
|
125
|
-
export function CustomWidgetActions() {
|
|
126
|
-
const { common } = useTranslations();
|
|
127
|
-
|
|
128
|
-
return (
|
|
129
|
-
<ConsentWidget.PolicyActions
|
|
130
|
-
renderAction={(action, props) => (
|
|
131
|
-
<button
|
|
132
|
-
key={props.key}
|
|
133
|
-
type="button"
|
|
134
|
-
className={props.isPrimary ? 'btn-primary' : 'btn-secondary'}
|
|
135
|
-
style={props.style}
|
|
136
|
-
>
|
|
137
|
-
{action === 'accept'
|
|
138
|
-
? common.acceptAll
|
|
139
|
-
: action === 'reject'
|
|
140
|
-
? common.rejectAll
|
|
141
|
-
: common.save}
|
|
142
|
-
</button>
|
|
143
|
-
)}
|
|
144
|
-
/>
|
|
145
|
-
);
|
|
146
|
-
}
|
|
147
|
-
```
|
|
120
|
+
`renderAction` is still meant for stock button compounds. If you want completely custom button elements and handlers, use `useHeadlessConsentUI()` and render `dialog.actionGroups` manually instead of `ConsentWidget.PolicyActions`.
|
|
148
121
|
|
|
149
122
|
For a fixed footer layout, render `ConsentWidget.Footer` and `ConsentWidget.FooterSubGroup` manually instead of using `ConsentWidget.PolicyActions`.
|
|
150
123
|
|
|
@@ -15,7 +15,7 @@ c15t supports three client modes that determine how consent data is stored and s
|
|
|
15
15
|
|
|
16
16
|
## Hosted Mode (Recommended)
|
|
17
17
|
|
|
18
|
-
The default mode. Connects to a c15t backend for full consent lifecycle management. We recommend using [
|
|
18
|
+
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.
|
|
19
19
|
|
|
20
20
|
> ℹ️ **Info:**
|
|
21
21
|
> mode: 'hosted' is the preferred value. The legacy alias mode: 'c15t' is still supported for backward compatibility.
|
|
@@ -8,7 +8,7 @@ A policy pack is an ordered array of policies. Each policy targets a region or c
|
|
|
8
8
|
|
|
9
9
|
There are three ways to configure policy packs:
|
|
10
10
|
|
|
11
|
-
1. **
|
|
11
|
+
1. **inth.com (recommended)** — use [inth.com](https://inth.com) as your hosted backend. Configure packs visually in the dashboard or via API — no code changes required. Works with any frontend, including static sites.
|
|
12
12
|
2. **Self-hosted backend** — define packs in code via `policyPacks` and resolve them from real request geo data. Full control over policy logic and storage.
|
|
13
13
|
3. **Offline fallback** — pass the same policy shapes to the frontend via `offlinePolicy.policyPacks`. Use this mainly for local development, demos, deterministic testing, or resilience when the backend is temporarily unreachable. If you omit `offlinePolicy.policyPacks`, c15t falls back to a synthetic worldwide opt-in banner instead of no-banner mode.
|
|
14
14
|
|
|
@@ -87,7 +87,7 @@ Information about when and how consent was given
|
|
|
87
87
|
|:--|:--|:--|:--|:--:|
|
|
88
88
|
|time|number|The epoch timestamp of when the consent was recorded|-|✅ Required|
|
|
89
89
|
|subjectId|string \|undefined|The client-generated subject ID in sub\_xxx format|-|Optional|
|
|
90
|
-
|id|string \|undefined|
|
|
90
|
+
|id|string \|undefined|Effective GPC signal used for the request.|-|Optional|
|
|
91
91
|
|externalId|string \|undefined|The external user ID linked to this subject|-|Optional|
|
|
92
92
|
|materialPolicyFingerprint|string \|undefined|Material fingerprint of the active policy when this consent was accepted.|-|Optional|
|
|
93
93
|
|identityProvider|string \|undefined|The identity provider that provided the external ID|-|Optional|
|
|
@@ -189,6 +189,7 @@ IAB TCF 2.3 state and actions (null when not configured or not in IAB mode).
|
|
|
189
189
|
|setOverrides|Object \|undefined \|null|Sets the overrides for the consent manager. Automatically attempts to fetch the consent manager again with the new overrides.|-|✅ Required|
|
|
190
190
|
|setLanguage|Object \|undefined \|null|Set the language override for the consent manager. This will override the language detected from the browser and re-fetch the consent banner information.|-|✅ Required|
|
|
191
191
|
|identifyUser|Object|Identifies the user by setting the external ID.|-|✅ Required|
|
|
192
|
+
|unstable\_acceptPolicyConsent|Object \|undefined|Writes a policy-based consent such as terms and conditions.|-|✅ Required|
|
|
192
193
|
|setSelectedConsent|(name: AllConsentNames, value: boolean) => void|Updates the selected consent state for a specific consent type.|-|✅ Required|
|
|
193
194
|
|saveConsents|Object \|undefined|Saves the user's consent preferences.|-|✅ Required|
|
|
194
195
|
|setConsent|(name: AllConsentNames, value: boolean) => void|Updates the consent state for a specific consent type & automatically save the consent.|-|✅ Required|
|
|
@@ -246,6 +247,21 @@ Identifies the user by setting the external ID.
|
|
|
246
247
|
|id|string|Usually your own internal ID for the user from your auth provider|-|✅ Required|
|
|
247
248
|
|identityProvider|string \|undefined|The identity provider of the user. Usually the name of the identity provider e.g. 'clerk', 'auth0', 'custom', etc.|-|Optional|
|
|
248
249
|
|
|
250
|
+
#### `unstable_acceptPolicyConsent`
|
|
251
|
+
|
|
252
|
+
Writes a policy-based consent such as terms and conditions.
|
|
253
|
+
|
|
254
|
+
|Property|Type|Description|Default|Required|
|
|
255
|
+
|:--|:--|:--|:--|:--:|
|
|
256
|
+
|type|Object|-|-|✅ Required|
|
|
257
|
+
|domain|string \|undefined|-|-|Optional|
|
|
258
|
+
|givenAt|number \|undefined|-|-|Optional|
|
|
259
|
+
|metadata|Record\<string, unknown> \|undefined|-|-|Optional|
|
|
260
|
+
|preferences|Record\<string, boolean> \|undefined|-|-|Optional|
|
|
261
|
+
|uiSource|string \|undefined|-|-|Optional|
|
|
262
|
+
|externalId|string \|undefined|-|-|Optional|
|
|
263
|
+
|identityProvider|string \|undefined|-|-|Optional|
|
|
264
|
+
|
|
249
265
|
#### `subscribeToConsentChanges`
|
|
250
266
|
|
|
251
267
|
Subscribes to change-only consent saves.
|
|
@@ -344,7 +360,7 @@ function LoginForm() {
|
|
|
344
360
|
```
|
|
345
361
|
|
|
346
362
|
> ℹ️ **Info:**
|
|
347
|
-
> identifyUser sends the user data to the c15t backend. It
|
|
363
|
+
> identifyUser sends the user data to the c15t backend. It works in hosted mode, including the legacy alias mode: 'c15t'. In mode: 'offline', the call is a no-op.
|
|
348
364
|
|
|
349
365
|
## Key Types
|
|
350
366
|
|
|
@@ -19,6 +19,7 @@ Use this component instead of `ConsentBanner` when you need IAB TCF compliance f
|
|
|
19
19
|
|
|
20
20
|
```tsx
|
|
21
21
|
import { type ReactNode } from 'react';
|
|
22
|
+
import { iab } from '@c15t/iab';
|
|
22
23
|
import { ConsentManagerProvider } from '@c15t/react';
|
|
23
24
|
import { IABConsentBanner, IABConsentDialog } from '@c15t/react/iab';
|
|
24
25
|
|
|
@@ -28,11 +29,12 @@ export default function ConsentManager({ children }: { children: ReactNode }) {
|
|
|
28
29
|
options={{
|
|
29
30
|
mode: 'hosted',
|
|
30
31
|
backendURL: 'https://your-instance.c15t.dev',
|
|
31
|
-
iab: {
|
|
32
|
-
enabled: true,
|
|
33
|
-
cmpId: 123,
|
|
32
|
+
iab: iab({
|
|
34
33
|
vendors: [1, 2, 10, 25],
|
|
35
|
-
|
|
34
|
+
// cmpId is automatically provided by the backend when using consent.io.
|
|
35
|
+
// Only set this if you have your own CMP registration.
|
|
36
|
+
// cmpId: 123,
|
|
37
|
+
}),
|
|
36
38
|
}}
|
|
37
39
|
>
|
|
38
40
|
<IABConsentBanner />
|
|
@@ -13,6 +13,7 @@ Pair it with `IABConsentBanner` inside the provider:
|
|
|
13
13
|
|
|
14
14
|
```tsx
|
|
15
15
|
import { type ReactNode } from 'react';
|
|
16
|
+
import { iab } from '@c15t/iab';
|
|
16
17
|
import { ConsentManagerProvider } from '@c15t/react';
|
|
17
18
|
import { IABConsentBanner, IABConsentDialog } from '@c15t/react/iab';
|
|
18
19
|
|
|
@@ -22,11 +23,12 @@ export default function ConsentManager({ children }: { children: ReactNode }) {
|
|
|
22
23
|
options={{
|
|
23
24
|
mode: 'hosted',
|
|
24
25
|
backendURL: 'https://your-instance.c15t.dev',
|
|
25
|
-
iab: {
|
|
26
|
-
enabled: true,
|
|
27
|
-
cmpId: 123,
|
|
26
|
+
iab: iab({
|
|
28
27
|
vendors: [1, 2, 10, 25],
|
|
29
|
-
|
|
28
|
+
// cmpId is automatically provided by the backend when using consent.io.
|
|
29
|
+
// Only set this if you have your own CMP registration.
|
|
30
|
+
// cmpId: 123,
|
|
31
|
+
}),
|
|
30
32
|
}}
|
|
31
33
|
>
|
|
32
34
|
<IABConsentBanner />
|
package/docs/iab/overview.md
CHANGED
|
@@ -15,12 +15,12 @@ When your site participates in the IAB ecosystem (ad exchanges, SSPs, DSPs, DMPs
|
|
|
15
15
|
|
|
16
16
|
## CMP Registration
|
|
17
17
|
|
|
18
|
-
[
|
|
18
|
+
[inth.com](https://inth.com) is pending validation as an IAB Europe-registered CMP for c15t. Once approved, when you use inth.com as your backend, the correct CMP ID will be automatically provided to your client via the `/init` endpoint — no client-side configuration needed.
|
|
19
19
|
|
|
20
20
|
If you self-host the c15t backend and have your own CMP registration with IAB Europe, you can configure your CMP ID on the backend via `advanced.iab.cmpId` or on the client via the `iab.cmpId` option. A valid (non-zero) CMP ID is required for IAB TCF compliance.
|
|
21
21
|
|
|
22
22
|
> ℹ️ **Info:**
|
|
23
|
-
> If you heavily customize or build your own IAB banner or dialog (rather than using the default IABConsentBanner and IABConsentDialog components), you cannot use
|
|
23
|
+
> If you heavily customize or build your own IAB banner or dialog (rather than using the default IABConsentBanner and IABConsentDialog components), you cannot use inth.com's CMP ID. You must register your own CMP with IAB Europe and use your own CMP ID.
|
|
24
24
|
|
|
25
25
|
## How c15t Implements TCF
|
|
26
26
|
|
|
@@ -45,6 +45,7 @@ If you use the prebuilt styled IAB UI, import the IAB stylesheet alongside the b
|
|
|
45
45
|
|
|
46
46
|
```tsx
|
|
47
47
|
import { type ReactNode } from 'react';
|
|
48
|
+
import { iab } from '@c15t/iab';
|
|
48
49
|
import { ConsentManagerProvider } from '@c15t/react';
|
|
49
50
|
import { IABConsentBanner, IABConsentDialog } from '@c15t/react/iab';
|
|
50
51
|
|
|
@@ -54,13 +55,12 @@ export default function ConsentManager({ children }: { children: ReactNode }) {
|
|
|
54
55
|
options={{
|
|
55
56
|
mode: 'hosted',
|
|
56
57
|
backendURL: 'https://your-instance.c15t.dev',
|
|
57
|
-
iab: {
|
|
58
|
-
enabled: true,
|
|
58
|
+
iab: iab({
|
|
59
59
|
vendors: [1, 2, 10, 25], // IAB vendor IDs you work with
|
|
60
|
-
// cmpId is automatically provided by the backend (
|
|
60
|
+
// cmpId is automatically provided by the backend (inth.com).
|
|
61
61
|
// Only set this if you have your own CMP registration with IAB Europe.
|
|
62
62
|
// cmpId: 123,
|
|
63
|
-
},
|
|
63
|
+
}),
|
|
64
64
|
}}
|
|
65
65
|
>
|
|
66
66
|
<IABConsentBanner />
|
|
@@ -73,14 +73,13 @@ export default function ConsentManager({ children }: { children: ReactNode }) {
|
|
|
73
73
|
|
|
74
74
|
## IAB Configuration Options
|
|
75
75
|
|
|
76
|
-
|
|
76
|
+
Configure IAB mode with `iab({ ... })` from `@c15t/iab`. The factory enables the addon and injects the runtime module automatically. The user-facing options are:
|
|
77
77
|
|
|
78
78
|
|Option|Type|Description|
|
|
79
79
|
|--|--|--|
|
|
80
|
-
|`
|
|
81
|
-
|`cmpId`|`number`|CMP ID registered with IAB Europe. Automatically provided by the backend when using consent.io. Only set this if you have your own CMP registration.|
|
|
80
|
+
|`cmpId`|`number`|CMP ID registered with IAB Europe. Automatically provided by the backend when using inth.com. Only set this if you have your own CMP registration.|
|
|
82
81
|
|`vendors`|`number[]`|IAB vendor IDs that your site works with|
|
|
83
|
-
|`
|
|
82
|
+
|`customVendors`|`NonIABVendor[]`|Custom vendors not in the IAB registry|
|
|
84
83
|
|
|
85
84
|
## Key Concepts
|
|
86
85
|
|
|
@@ -122,4 +121,6 @@ Each vendor in the GVL declares which purposes it uses, whether via consent or l
|
|
|
122
121
|
|--|--|
|
|
123
122
|
|[IABConsentBanner](/docs/frameworks/react/iab/consent-banner)|TCF-compliant banner with partner disclosure|
|
|
124
123
|
|[IABConsentDialog](/docs/frameworks/react/iab/consent-dialog)|Tabbed preference center for purposes and vendors|
|
|
125
|
-
|
|
124
|
+
|
|
125
|
+
> ℹ️ **Info:**
|
|
126
|
+
> For lower-level custom IAB flows, use useHeadlessIABConsentUI() from @c15t/react/iab. useGVLData() is currently internal and is not part of the public package surface.
|