@c15t/react 3.2.0-canary.0 → 3.2.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 (50) hide show
  1. package/AGENTS.md +33 -10
  2. package/README.md +5 -7
  3. package/dist/styles.tw3.css +2 -2
  4. package/dist/version.js +1 -1
  5. package/dist-types/version.d.ts +1 -1
  6. package/docs/README.md +33 -10
  7. package/docs/concepts/choose-your-setup.md +8 -9
  8. package/docs/concepts/modes.md +5 -3
  9. package/docs/customization/stylesheets.md +39 -0
  10. package/docs/frameworks/react/hooks.md +2 -1
  11. package/docs/frameworks/react/quickstart.md +3 -3
  12. package/docs/frameworks/react/upgrade-v3.md +2 -2
  13. package/docs/integrations/activecampaign.md +297 -0
  14. package/docs/integrations/ada.md +396 -0
  15. package/docs/integrations/adobe-target.md +460 -0
  16. package/docs/integrations/adroll.md +336 -0
  17. package/docs/integrations/amazon-ads.md +424 -0
  18. package/docs/integrations/appcues.md +368 -0
  19. package/docs/integrations/attentive.md +313 -0
  20. package/docs/integrations/building-integrations.md +29 -16
  21. package/docs/integrations/clearbit.md +1 -1
  22. package/docs/integrations/customer-io.md +369 -0
  23. package/docs/integrations/databuddy.md +139 -50
  24. package/docs/integrations/default-com.md +497 -0
  25. package/docs/integrations/dynamic-yield.md +373 -0
  26. package/docs/integrations/fullstory.md +298 -0
  27. package/docs/integrations/gainsight-px.md +418 -0
  28. package/docs/integrations/gorgias.md +365 -0
  29. package/docs/integrations/hubspot.md +529 -0
  30. package/docs/integrations/insider.md +550 -0
  31. package/docs/integrations/liveintent.md +327 -0
  32. package/docs/integrations/lucky-orange.md +336 -0
  33. package/docs/integrations/marketo.md +309 -0
  34. package/docs/integrations/optimizely.md +411 -0
  35. package/docs/integrations/oracle-eloqua.md +301 -0
  36. package/docs/integrations/overview.md +124 -111
  37. package/docs/integrations/pendo.md +339 -0
  38. package/docs/integrations/rb2b.md +363 -0
  39. package/docs/integrations/salesforce-pardot.md +342 -0
  40. package/docs/integrations/statable-analytics.md +345 -0
  41. package/docs/integrations/the-trade-desk.md +328 -0
  42. package/docs/integrations/vector.md +333 -0
  43. package/docs/integrations/wisepops.md +416 -0
  44. package/docs/integrations/zendesk.md +359 -0
  45. package/package.json +8 -8
  46. package/docs/integrations/other-ads-and-pixels.md +0 -94
  47. package/docs/integrations/other-analytics.md +0 -108
  48. package/docs/integrations/other-chat-and-support.md +0 -112
  49. package/docs/integrations/other-email-and-sms.md +0 -156
  50. package/docs/integrations/other-experience.md +0 -222
@@ -0,0 +1,373 @@
1
+ ---
2
+ title: Dynamic Yield
3
+ description: Load Dynamic Yield personalization scripts after experience
4
+ consent, set the page context and synchronize Active Cookie Consent with c15t.
5
+ seoTitle: Dynamic Yield cookie consent with c15t
6
+ seoDescription: Gate both Dynamic Yield scripts on experience consent, select a
7
+ US or EU section, and send Active Cookie Consent updates with c15t.
8
+ icon: sparkles
9
+ group: integrations
10
+ ---
11
+
12
+ The c15t `dynamicYield` helper loads Dynamic Yield after `experience` consent.
13
+ It sets `DY.userActiveConsent` before loading `api_dynamic.js`, then loads
14
+ `api_static.js` after the first script finishes. No Dynamic Yield global,
15
+ preconnect, loader request or storage is created before the helper's consent
16
+ gate opens.
17
+
18
+ Dynamic Yield recommends synchronous scripts directly in the page's `<head>`
19
+ to avoid flicker. Waiting for consent and loading the scripts in sequence
20
+ changes that timing, so visitors can see the original page before a campaign
21
+ applies. Check your campaigns and page rendering with Dynamic Yield before
22
+ using this helper for experiments that need to run before paint.
23
+
24
+ ## Configure Dynamic Yield
25
+
26
+ Copy the section ID and data center from your section's
27
+ [installation snippet](https://dy.dev/docs/implement-script). Enable
28
+ [Active Cookie Consent](https://dy.dev/docs/active-cookie-consent) with Dynamic
29
+ Yield Support. Preview mode lets you check it first. Dynamic Yield ignores the
30
+ consent API until this setting is enabled for your section.
31
+
32
+ Remove existing Dynamic Yield snippets, tag-manager tags and preconnects.
33
+ c15t gates only the scripts registered with it.
34
+
35
+ | Package manager | Command |
36
+ | :-------------- | :------------------------------- |
37
+ | npm | `npm install @c15t/integrations` |
38
+ | pnpm | `pnpm add @c15t/integrations` |
39
+ | yarn | `yarn add @c15t/integrations` |
40
+ | bun | `bun add @c15t/integrations` |
41
+
42
+ ```ts title="src/consent-scripts.ts"
43
+ import { dynamicYield } from '@c15t/integrations/dynamic-yield';
44
+
45
+ export const scripts = [
46
+ dynamicYield({
47
+ recommendationContext: { lng: 'en_GB', type: 'HOMEPAGE' },
48
+ region: 'eu',
49
+ sectionId: 'YOUR_SECTION_ID',
50
+ }),
51
+ ];
52
+ ```
53
+
54
+ ## Register the scripts
55
+
56
+ Complete your [framework quickstart](https://c15t.com/docs/frameworks) first. Keep its Inth
57
+ endpoint, policy, styles and consent UI. Remove the vendor's original script,
58
+ SDK initializer or tag-manager entry, so the vendor loads only through c15t.
59
+
60
+ The vendor pages put the helper in `src/consent-scripts.ts`. If your framework
61
+ quickstart already has a `scripts` array, such as the one in `c15t.config.ts`
62
+ in the Next.js guide, add the helper to that array instead of creating a
63
+ second file.
64
+ The `scripts` export is a configuration, not an initializer. Add it to the c15t provider you already have, at the registration
65
+ point for your framework below. These are edits to that provider, not a second
66
+ provider.
67
+
68
+ **Next.js**
69
+
70
+ Add the configuration to `scripts` in `c15t.config.ts`, next to
71
+ `next.config.ts`:
72
+
73
+ ```ts title="c15t.config.ts"
74
+ import { defineConsentConfig } from 'c15t/next';
75
+ import { scripts } from './src/consent-scripts';
76
+
77
+ export default defineConsentConfig({ scripts });
78
+ ```
79
+
80
+ Keep the rest of your config, such as `mode` and `routePrefix`, in the
81
+ same call. `ConsentRoot` reads the config in the browser, so the layout
82
+ keeps passing only `state`. App Router, Pages Router and static export all
83
+ read the same file. See
84
+ [Next.js scripts and embeds](https://c15t.com/docs/frameworks/next/scripts).
85
+
86
+ **TanStack Start**
87
+
88
+ Import the configuration into your root route and pass it to the existing
89
+ `ConsentRoot` as a top-level prop. Keep the loader from the
90
+ [TanStack Start quickstart](https://c15t.com/docs/frameworks/tanstack-start/quickstart):
91
+
92
+ ```tsx title="src/routes/__root.tsx"
93
+ import { scripts } from '../consent-scripts';
94
+
95
+ <ConsentRoot state={consent} scripts={scripts}>
96
+ ```
97
+
98
+ Import vendor helpers in the root route module, not in a server function.
99
+ A server function's return value must be serializable, and script
100
+ configurations carry callbacks. See
101
+ [TanStack Start scripts](https://c15t.com/docs/frameworks/tanstack-start/scripts).
102
+
103
+ **React**
104
+
105
+ Add the configuration to the existing `ConsentProvider` options, next to
106
+ `mode`:
107
+
108
+ ```tsx title="src/consent.tsx"
109
+ import { scripts } from './consent-scripts';
110
+
111
+ <ConsentProvider options={{ mode, scripts }}>
112
+ ```
113
+
114
+ `mode` is the `manifest()` value from the
115
+ [React quickstart](../frameworks/react/quickstart.md). Keep the banner,
116
+ dialog and preferences link inside the provider. See
117
+ [React scripts and embeds](../frameworks/react/scripts.md).
118
+
119
+ **Nuxt**
120
+
121
+ Register the scripts under the `c15t` key in `app/app.config.ts`. Adjust the
122
+ relative import to where you created `consent-scripts.ts`:
123
+
124
+ ```ts title="app/app.config.ts"
125
+ import { scripts } from '../src/consent-scripts';
126
+
127
+ export default defineAppConfig({
128
+ c15t: { scripts },
129
+ });
130
+ ```
131
+
132
+ The Nuxt module merges this over its options in `nuxt.config.ts` and starts
133
+ one script loader in the browser after hydration, once it has applied the
134
+ visitor's stored choice and privacy signals. Keep `scripts` out of
135
+ `nuxt.config.ts`, which reaches the browser as JSON and drops the vendor
136
+ callbacks. Write the vendor IDs into `consent-scripts.ts`. See
137
+ [Nuxt scripts and embeds](https://c15t.com/docs/frameworks/nuxt/scripts).
138
+
139
+ **Vue**
140
+
141
+ Pass the scripts to the existing `c15tVue` plugin call in `src/main.ts`:
142
+
143
+ ```ts title="src/main.ts"
144
+ import { c15tVue, manifest } from 'c15t/vue/vue-plugin';
145
+ import { scripts } from './consent-scripts';
146
+
147
+ app.use(c15tVue, {
148
+ mode: manifest(),
149
+ scripts,
150
+ });
151
+ ```
152
+
153
+ Keep your existing `mode` and other options. The plugin starts one
154
+ script loader when the app mounts, after it has applied the visitor's stored
155
+ choice. Do not also call `createScriptLoader` from a component. See
156
+ [Vue scripts and embeds](https://c15t.com/docs/frameworks/vue/scripts).
157
+
158
+ **Astro**
159
+
160
+ Add the scripts to the client entrypoint from the
161
+ [Astro quickstart](https://c15t.com/docs/frameworks/astro/quickstart), `src/c15t.client.ts`,
162
+ which the integration finds on its own. Keep `astro.config.mjs` as it is.
163
+ If the module already exports scripts, combine the two arrays.
164
+
165
+ ```ts title="src/c15t.client.ts"
166
+ import type { C15tClientOptionsExtension } from 'c15t/astro';
167
+ import { scripts } from './consent-scripts';
168
+
169
+ export default { scripts } satisfies C15tClientOptionsExtension;
170
+ ```
171
+
172
+ Vendor helpers contain callbacks, and the integration options in
173
+ `astro.config.mjs` are serialized into the page, so do not put helpers in
174
+ the integration's `scripts` option. The integration passes the client
175
+ entrypoint to the one runtime every page shares, including across
176
+ `ClientRouter` navigation.
177
+
178
+ **Svelte**
179
+
180
+ Import the scripts in the component that owns your existing provider and
181
+ pass them as a top-level prop:
182
+
183
+ ```svelte title="src/App.svelte"
184
+ <script lang="ts">
185
+ import { ConsentProvider, manifest } from 'c15t/svelte';
186
+ import { scripts } from './consent-scripts';
187
+ </script>
188
+
189
+ <ConsentProvider mode={manifest()} {scripts}>
190
+ <!-- Keep your application, consent UI and preferences link here. -->
191
+ </ConsentProvider>
192
+ ```
193
+
194
+ Retain the styles and consent UI from the [Svelte quickstart](https://c15t.com/docs/frameworks/svelte/quickstart).
195
+ The provider owns the loader and disposes it on unmount.
196
+
197
+ **SvelteKit**
198
+
199
+ Add the scripts to the existing `ConsentRoot` in the root layout. Keep the
200
+ handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs/frameworks/sveltekit/quickstart).
201
+
202
+ ```svelte title="src/routes/+layout.svelte"
203
+ <script lang="ts">
204
+ import { ConsentRoot } from 'c15t/svelte';
205
+ import { scripts } from '../consent-scripts';
206
+
207
+ let { children, data } = $props();
208
+ </script>
209
+
210
+ <ConsentRoot state={data.consent} {scripts}>
211
+ {@render children()}
212
+ <!-- Keep your consent UI and preferences link here. -->
213
+ </ConsentRoot>
214
+ ```
215
+
216
+ Import vendor helpers in the layout component, not in `+layout.server.ts`:
217
+ a server load cannot send functions to the browser. Prerendered, static and
218
+ SPA-mode pages use the same `scripts` prop. If you pass an externally owned
219
+ `runtime` to the provider, register scripts when creating that runtime instead.
220
+
221
+ **HTML**
222
+
223
+ The helpers in `@c15t/integrations` are ES modules that need a bundler. On a
224
+ page that loads the c15t script tag, paste the vendor's own snippet instead
225
+ and keep it inert until its category is allowed:
226
+
227
+ ```html
228
+ <script type="text/plain" data-c15t-category="measurement">
229
+ // The vendor's snippet, unchanged
230
+ </script>
231
+ ```
232
+
233
+ Use the category this guide names for the vendor. c15t runs the snippet
234
+ once that category is allowed, and reloads the page when the visitor
235
+ withdraws it. Helper options on this page, such as `loadMode`, do not apply
236
+ to a pasted snippet. See [HTML scripts](https://c15t.com/docs/frameworks/html/scripts).
237
+
238
+ **JavaScript**
239
+
240
+ Pass the scripts to `init()` from `@c15t/browser`, next to your mode:
241
+
242
+ ```ts
243
+ import { init, manifest } from '@c15t/browser';
244
+ import { scripts } from './consent-scripts';
245
+
246
+ const consent = init({
247
+ mode: manifest(),
248
+ scripts,
249
+ });
250
+ ```
251
+
252
+ Keep the mode from your quickstart. With
253
+ `createConsentRuntime` from `c15t/runtime`, pass `scripts` to it instead.
254
+ A kernel you create yourself needs a loader from
255
+ `c15t/modules/script-loader`. Attach one loader per kernel. See
256
+ [JavaScript scripts](https://c15t.com/docs/frameworks/javascript/scripts).
257
+
258
+ ## Options
259
+
260
+ | Option | Default | Behavior |
261
+ | ----------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------ |
262
+ | `sectionId` | Required | Public section ID. Trimmed and URL-encoded as one path segment. Missing or blank values log an error and skip the integration. |
263
+ | `region` | `'us'` | `'us'` uses `cdn.dynamicyield.com`; `'eu'` uses `cdn-eu.dynamicyield.com`. Match the section's data center. |
264
+ | `recommendationContext` | Not set | Page context assigned before either loader runs. Omit to preserve a context your app already set. |
265
+ | `category` | `'experience'` | c15t consent category or condition that gates both loaders and the consent signal. |
266
+ | `nonce` | None | CSP nonce for both loaders. A nonce supplied by your consent provider is forwarded to the second loader too. |
267
+
268
+ `recommendationContext.type` accepts `HOMEPAGE`, `CATEGORY`, `PRODUCT`, `CART`,
269
+ `POST` and `OTHER`. `data` contains the category hierarchy, product SKUs, post ID
270
+ or page identifier. `lng` selects a feed locale such as `en_GB`. Match values
271
+ to the section's product or content feed. See Dynamic Yield's
272
+ [page context guide](https://dy.dev/docs/page-context).
273
+
274
+ The helper seeds the initial context. Your application owns context updates
275
+ on client-side navigation. Follow Dynamic Yield's
276
+ [context implementation guide](https://dy.dev/docs/code-context) and check
277
+ consent before making your own Dynamic Yield calls.
278
+
279
+ ## Loading and revocation
280
+
281
+ Before consent, neither loader runs and `window.DY` stays absent unless another
282
+ part of your app created it. Granting the mapped consent creates `DY` if
283
+ needed, sets `DY.userActiveConsent = { accepted: true }`, and starts the
284
+ dynamic loader. The static loader starts after the dynamic loader finishes.
285
+
286
+ Equivalent helper options reuse the same scripts across framework renders.
287
+ Registrations that share the dynamic loader also share its static loader.
288
+ Sharing is scoped to the same section ID and region; different sections or
289
+ regions request their own loader URLs. Dynamic Yield's consent and page
290
+ context still use the page-global `window.DY`, so configure one section and
291
+ region per page.
292
+
293
+ The consent signal is page-global too. It stays granted while any Dynamic
294
+ Yield registration has consent, including registrations with different
295
+ sections or regions. Revoking or removing one registration keeps both loader
296
+ elements while another granted registration uses the same URLs. When a
297
+ section's last granted registration is revoked or removed, the helper removes
298
+ its loader elements. When no registration on the page has consent, it sets
299
+ `DY.userActiveConsent = { accepted: false }`.
300
+
301
+ If consent is withdrawn while the dynamic loader is downloading, the helper
302
+ skips the static loader. Granting consent again starts a new loader sequence.
303
+
304
+ The SDK's consent setter applies only when Active Cookie Consent is enabled
305
+ for the section. It changes data collection and personalization behavior. It
306
+ does not unload the SDK or guarantee zero requests from code that already
307
+ ran. Keep c15t's default `reloadOnConsentRevoked` behavior enabled.
308
+
309
+ Dynamic Yield's denied mode can serve limited experiences. This helper waits
310
+ for consent before loading either script, so it does not use denied-mode
311
+ campaign delivery before consent. There is no `alwaysLoad` option.
312
+
313
+ ## Cookies and storage
314
+
315
+ Dynamic Yield's [cookie and storage inventory](https://dy.dev/docs/cookie-management)
316
+ includes these cookies. Your section and campaigns determine which appear.
317
+
318
+ | Cookie | Documented lifetime |
319
+ | ---------------------- | ------------------- |
320
+ | `_dyid` | 30 days |
321
+ | `_dyjsession` | Browser session |
322
+ | `_dy_soct` | 1 year |
323
+ | `dy_fs_page` | Browser session |
324
+ | `_dy_cs_storage_items` | 30 days |
325
+ | `_dy_cs_cookie_items` | 30 days |
326
+
327
+ Dynamic Yield caps cookie storage at 365 days. Its browser storage also
328
+ includes `_dyuss_`, `_dy_tsrc`, `_dyaud_nchc`, `_dyaud_page`, `_dy_device`,
329
+ `_dycst`, `_dy_csc`, `_dyrc`, `_dybatch`, `_dy_cs_session_items` and
330
+ `_dy_cs_local_items`. `_dyaud_sess` uses session storage. Check the vendor
331
+ inventory and your browser for the keys used by your section.
332
+
333
+ The helper does not delete previously stored cookies or browser storage.
334
+ Configure cleanup for your deployment and verify it after withdrawal.
335
+
336
+ ## Verify Dynamic Yield
337
+
338
+ Filter DevTools Network by `dynamicyield.com`. Grant `experience` and check
339
+ that `api_dynamic.js` finishes before the helper appends `api_static.js`.
340
+ Inspect `DY.userActiveConsent.accepted` and your page context. Revoke consent
341
+ and check the next page makes no Dynamic Yield request. Test vendor-specific
342
+ switches and the category override if your app uses them.
343
+
344
+ Sources: [Implement the Dynamic Yield script](https://dy.dev/docs/implement-script),
345
+ [Active Cookie Consent API](https://dy.dev/docs/active-cookie-consent),
346
+ [Active Cookie Consent mode and limited experiences](https://support.dynamicyield.com/hc/en-us/articles/360014728858-Active-Cookie-Consent-Mode-for-User-Data-Privacy-Management),
347
+ and [cookies and local storage](https://dy.dev/docs/cookie-management).
348
+
349
+ Test in a private window with an opt-in policy. Open DevTools Network, disable
350
+ the cache and filter by the vendor's domain:
351
+
352
+ 1. Load the page. No request goes to the vendor before you choose.
353
+ 2. Click Reject, then reload. There is still no vendor request.
354
+ 3. Open Privacy settings and allow the helper's category. The vendor script
355
+ loads without a page reload.
356
+ 4. Turn the category off again and save. c15t reloads the page, and the new
357
+ page makes no vendor request.
358
+
359
+ c15t reloads on revocation because removing a script element does not stop
360
+ code that already ran. The vendor's listeners, timers and queued events stay
361
+ alive until the page unloads. If you set `reloadOnConsentRevoked: false`, stop
362
+ the vendor yourself. Register a callback-only script whose `onConsentChange`
363
+ calls the vendor's opt-out API, as shown in
364
+ [custom integrations](./building-integrations.md), and check the
365
+ permission before each of your own event calls. The reload does not delete
366
+ cookies the vendor already set; see
367
+ [clear on revocation for your framework](./overview.md#vendor-switches-and-cookie-cleanup).
368
+
369
+ The helper lists its vendor by name in the preference dialog, so a visitor can
370
+ turn it off inside an allowed category. See
371
+ [vendor consent for your framework](./overview.md#vendor-switches-and-cookie-cleanup). The
372
+ [consent verification guide](../guides/verify-consent.md) covers navigation,
373
+ expiry and hosting checks.
@@ -0,0 +1,298 @@
1
+ ---
2
+ title: FullStory
3
+ description: Load FullStory after measurement consent, configure its tracking
4
+ settings, and verify loading and withdrawal with c15t.
5
+ seoTitle: FullStory cookie consent with c15t
6
+ seoDescription: Gate FullStory on measurement consent with c15t. Configure the
7
+ loader, understand withdrawal limits, and verify vendor requests and storage.
8
+ icon: chart-line
9
+ group: integrations
10
+ ---
11
+
12
+ `fullStory` waits for `measurement` consent before creating vendor globals or downloading FullStory.
13
+
14
+ ## Configure FullStory
15
+
16
+ Copy your organization ID from FullStory setup and remove the original snippet. For regional IDs such as `o-ABC123-eu1`, c15t selects the regional FullStory host and SDK download before loading. That ID uses `eu1.fullstory.com` and `edge.eu1.fullstory.com/s/fs.js`. Legacy IDs and the `na1` region use the US defaults.
17
+
18
+ | Package manager | Command |
19
+ | :-------------- | :------------------------------- |
20
+ | npm | `npm install @c15t/integrations` |
21
+ | pnpm | `pnpm add @c15t/integrations` |
22
+ | yarn | `yarn add @c15t/integrations` |
23
+ | bun | `bun add @c15t/integrations` |
24
+
25
+ ```ts title="src/fullstory.ts"
26
+ import { fullStory } from '@c15t/integrations/fullstory';
27
+
28
+ export const scripts = [fullStory({ orgId: 'YOUR_ORG_ID' })];
29
+ ```
30
+
31
+ ## Register the scripts
32
+
33
+ Complete your [framework quickstart](https://c15t.com/docs/frameworks) first. Keep its Inth
34
+ endpoint, policy, styles and consent UI. Remove the vendor's original script,
35
+ SDK initializer or tag-manager entry, so the vendor loads only through c15t.
36
+
37
+ The vendor pages put the helper in `src/consent-scripts.ts`. If your framework
38
+ quickstart already has a `scripts` array, such as the one in `c15t.config.ts`
39
+ in the Next.js guide, add the helper to that array instead of creating a
40
+ second file.
41
+ The `scripts` export is a configuration, not an initializer. Add it to the c15t provider you already have, at the registration
42
+ point for your framework below. These are edits to that provider, not a second
43
+ provider.
44
+
45
+ **Next.js**
46
+
47
+ Add the configuration to `scripts` in `c15t.config.ts`, next to
48
+ `next.config.ts`:
49
+
50
+ ```ts title="c15t.config.ts"
51
+ import { defineConsentConfig } from 'c15t/next';
52
+ import { scripts } from './src/consent-scripts';
53
+
54
+ export default defineConsentConfig({ scripts });
55
+ ```
56
+
57
+ Keep the rest of your config, such as `mode` and `routePrefix`, in the
58
+ same call. `ConsentRoot` reads the config in the browser, so the layout
59
+ keeps passing only `state`. App Router, Pages Router and static export all
60
+ read the same file. See
61
+ [Next.js scripts and embeds](https://c15t.com/docs/frameworks/next/scripts).
62
+
63
+ **TanStack Start**
64
+
65
+ Import the configuration into your root route and pass it to the existing
66
+ `ConsentRoot` as a top-level prop. Keep the loader from the
67
+ [TanStack Start quickstart](https://c15t.com/docs/frameworks/tanstack-start/quickstart):
68
+
69
+ ```tsx title="src/routes/__root.tsx"
70
+ import { scripts } from '../consent-scripts';
71
+
72
+ <ConsentRoot state={consent} scripts={scripts}>
73
+ ```
74
+
75
+ Import vendor helpers in the root route module, not in a server function.
76
+ A server function's return value must be serializable, and script
77
+ configurations carry callbacks. See
78
+ [TanStack Start scripts](https://c15t.com/docs/frameworks/tanstack-start/scripts).
79
+
80
+ **React**
81
+
82
+ Add the configuration to the existing `ConsentProvider` options, next to
83
+ `mode`:
84
+
85
+ ```tsx title="src/consent.tsx"
86
+ import { scripts } from './consent-scripts';
87
+
88
+ <ConsentProvider options={{ mode, scripts }}>
89
+ ```
90
+
91
+ `mode` is the `manifest()` value from the
92
+ [React quickstart](../frameworks/react/quickstart.md). Keep the banner,
93
+ dialog and preferences link inside the provider. See
94
+ [React scripts and embeds](../frameworks/react/scripts.md).
95
+
96
+ **Nuxt**
97
+
98
+ Register the scripts under the `c15t` key in `app/app.config.ts`. Adjust the
99
+ relative import to where you created `consent-scripts.ts`:
100
+
101
+ ```ts title="app/app.config.ts"
102
+ import { scripts } from '../src/consent-scripts';
103
+
104
+ export default defineAppConfig({
105
+ c15t: { scripts },
106
+ });
107
+ ```
108
+
109
+ The Nuxt module merges this over its options in `nuxt.config.ts` and starts
110
+ one script loader in the browser after hydration, once it has applied the
111
+ visitor's stored choice and privacy signals. Keep `scripts` out of
112
+ `nuxt.config.ts`, which reaches the browser as JSON and drops the vendor
113
+ callbacks. Write the vendor IDs into `consent-scripts.ts`. See
114
+ [Nuxt scripts and embeds](https://c15t.com/docs/frameworks/nuxt/scripts).
115
+
116
+ **Vue**
117
+
118
+ Pass the scripts to the existing `c15tVue` plugin call in `src/main.ts`:
119
+
120
+ ```ts title="src/main.ts"
121
+ import { c15tVue, manifest } from 'c15t/vue/vue-plugin';
122
+ import { scripts } from './consent-scripts';
123
+
124
+ app.use(c15tVue, {
125
+ mode: manifest(),
126
+ scripts,
127
+ });
128
+ ```
129
+
130
+ Keep your existing `mode` and other options. The plugin starts one
131
+ script loader when the app mounts, after it has applied the visitor's stored
132
+ choice. Do not also call `createScriptLoader` from a component. See
133
+ [Vue scripts and embeds](https://c15t.com/docs/frameworks/vue/scripts).
134
+
135
+ **Astro**
136
+
137
+ Add the scripts to the client entrypoint from the
138
+ [Astro quickstart](https://c15t.com/docs/frameworks/astro/quickstart), `src/c15t.client.ts`,
139
+ which the integration finds on its own. Keep `astro.config.mjs` as it is.
140
+ If the module already exports scripts, combine the two arrays.
141
+
142
+ ```ts title="src/c15t.client.ts"
143
+ import type { C15tClientOptionsExtension } from 'c15t/astro';
144
+ import { scripts } from './consent-scripts';
145
+
146
+ export default { scripts } satisfies C15tClientOptionsExtension;
147
+ ```
148
+
149
+ Vendor helpers contain callbacks, and the integration options in
150
+ `astro.config.mjs` are serialized into the page, so do not put helpers in
151
+ the integration's `scripts` option. The integration passes the client
152
+ entrypoint to the one runtime every page shares, including across
153
+ `ClientRouter` navigation.
154
+
155
+ **Svelte**
156
+
157
+ Import the scripts in the component that owns your existing provider and
158
+ pass them as a top-level prop:
159
+
160
+ ```svelte title="src/App.svelte"
161
+ <script lang="ts">
162
+ import { ConsentProvider, manifest } from 'c15t/svelte';
163
+ import { scripts } from './consent-scripts';
164
+ </script>
165
+
166
+ <ConsentProvider mode={manifest()} {scripts}>
167
+ <!-- Keep your application, consent UI and preferences link here. -->
168
+ </ConsentProvider>
169
+ ```
170
+
171
+ Retain the styles and consent UI from the [Svelte quickstart](https://c15t.com/docs/frameworks/svelte/quickstart).
172
+ The provider owns the loader and disposes it on unmount.
173
+
174
+ **SvelteKit**
175
+
176
+ Add the scripts to the existing `ConsentRoot` in the root layout. Keep the
177
+ handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs/frameworks/sveltekit/quickstart).
178
+
179
+ ```svelte title="src/routes/+layout.svelte"
180
+ <script lang="ts">
181
+ import { ConsentRoot } from 'c15t/svelte';
182
+ import { scripts } from '../consent-scripts';
183
+
184
+ let { children, data } = $props();
185
+ </script>
186
+
187
+ <ConsentRoot state={data.consent} {scripts}>
188
+ {@render children()}
189
+ <!-- Keep your consent UI and preferences link here. -->
190
+ </ConsentRoot>
191
+ ```
192
+
193
+ Import vendor helpers in the layout component, not in `+layout.server.ts`:
194
+ a server load cannot send functions to the browser. Prerendered, static and
195
+ SPA-mode pages use the same `scripts` prop. If you pass an externally owned
196
+ `runtime` to the provider, register scripts when creating that runtime instead.
197
+
198
+ **HTML**
199
+
200
+ The helpers in `@c15t/integrations` are ES modules that need a bundler. On a
201
+ page that loads the c15t script tag, paste the vendor's own snippet instead
202
+ and keep it inert until its category is allowed:
203
+
204
+ ```html
205
+ <script type="text/plain" data-c15t-category="measurement">
206
+ // The vendor's snippet, unchanged
207
+ </script>
208
+ ```
209
+
210
+ Use the category this guide names for the vendor. c15t runs the snippet
211
+ once that category is allowed, and reloads the page when the visitor
212
+ withdraws it. Helper options on this page, such as `loadMode`, do not apply
213
+ to a pasted snippet. See [HTML scripts](https://c15t.com/docs/frameworks/html/scripts).
214
+
215
+ **JavaScript**
216
+
217
+ Pass the scripts to `init()` from `@c15t/browser`, next to your mode:
218
+
219
+ ```ts
220
+ import { init, manifest } from '@c15t/browser';
221
+ import { scripts } from './consent-scripts';
222
+
223
+ const consent = init({
224
+ mode: manifest(),
225
+ scripts,
226
+ });
227
+ ```
228
+
229
+ Keep the mode from your quickstart. With
230
+ `createConsentRuntime` from `c15t/runtime`, pass `scripts` to it instead.
231
+ A kernel you create yourself needs a loader from
232
+ `c15t/modules/script-loader`. Attach one loader per kernel. See
233
+ [JavaScript scripts](https://c15t.com/docs/frameworks/javascript/scripts).
234
+
235
+ ## Options
236
+
237
+ | Option | Default | Behavior |
238
+ | ---------------- | ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
239
+ | `orgId` | Required | FullStory organization ID. |
240
+ | `host` | Regional FullStory host | `fullstory.com` for US and legacy IDs; `eu1.fullstory.com` for EU IDs. |
241
+ | `script` | Regional FullStory edge | Script host and path without a scheme, such as `edge.eu1.fullstory.com/s/fs.js`. |
242
+ | `elementConsent` | `false` | Also set consent for elements marked capture with consent. |
243
+ | `category` | `measurement` | Consent condition for the whole loader. |
244
+ | `scriptUrl` | HTTPS URL from `script`, with `org` | Exact download URL override. Nonblank values are trimmed, kept unchanged and receive no added `org`. Blank values use the derived URL. |
245
+
246
+ The helper trims organization and endpoint values and treats blank overrides as missing. FullStory-owned `host` and `script` values receive the organization's region, replacing an existing region label when needed. Custom proxy or Relay hosts and script paths stay unchanged. The host and script resolve independently: a custom `host` alone does not change the default `script`. `scriptUrl` never changes the SDK's `script` environment value.
247
+
248
+ Missing or blank required values log an error and never load.
249
+
250
+ ## Loading and revocation
251
+
252
+ After consent, the helper creates FullStory's v2 callable queue with six-field command records. Async commands such as `FS('getSessionAsync')` return promises while the SDK loads and after its dispatcher is ready. It configures `captureOnStartup: false` and downloads the SDK. An uninterrupted first allowed load calls `start`. A load that completes while consent is denied, or after the last owner is removed, calls `shutdown`. After any helper-issued `shutdown`, regrant or remount calls `restart`, even if the helper never called `start`. Optional element consent follows the mapped permission through `setIdentity`.
253
+
254
+ Equivalent registrations share one download and recorder. Each registration must grant the mapped consent before capture can start or resume, including registrations that have never loaded. Removing a denying registration reapplies the remaining registrations' consent, including when they use different `elementConsent` settings. Initial denial creates no FullStory globals or requests. Removing the last registration shuts down capture. Mounting the same configuration again resumes the retained recorder with `restart` without downloading the SDK again.
255
+
256
+ Keep `orgId`, `host`, `script` and `scriptUrl` fixed for the page. c15t compares their effective values, so omitted regional defaults and explicit equivalent endpoints share the recorder. After bootstrap begins, c15t requires a page reload to change these effective settings and rejects incompatible configurations explicitly.
257
+
258
+ Removing an async script does not guarantee that its pending download cannot execute, so c15t retains the pending bootstrap too. Remounting the same configuration waits for that download instead of inserting another script. If a script update interrupts setup before insertion, the next mount inserts the SDK without initializing FullStory twice.
259
+
260
+ Without `MutationObserver`, c15t prevents a second download, but setup interrupted before insertion can require a reload. A nested synchronous mount can leave an outer registration on a source-less placeholder; it still shares the retained recorder and consent state.
261
+
262
+ FullStory documents `init` before capture starts; c15t does not support replacing an initialized recorder in place. `scriptUrl` chooses the downloaded file, while `script` configures the SDK's environment. An existing `FS` from another installer must be removed from the site's setup before using this helper.
263
+
264
+ Shutdown stops capture, but does not erase cookies or unload the SDK. Keep `reloadOnConsentRevoked` enabled when your policy also requires a fresh page without loaded vendor code. Capture state is reapplied on every page.
265
+
266
+ FullStory can set `fs_uid` and `fs_cid` cookies for one year, `fs_lua` for 30 minutes, and `_fs_tab_id` in sessionStorage. Inspect your account configuration for additional storage.
267
+
268
+ ## Verify FullStory
269
+
270
+ Check for no FullStory request, `FS`, FullStory configuration globals, cookies or browser storage before consent and after unrelated consent. Grant measurement and verify the real v2 dispatcher installed. With your own account, verify capture starts, shutdown stops it, and regrant restarts it once.
271
+
272
+ Sources: [getting started](https://developer.fullstory.com/browser/getting-started/), [asynchronous methods](https://developer.fullstory.com/browser/asynchronous-methods/), [configuration](https://developer.fullstory.com/browser/fullcapture/configure-capture/), [capture controls](https://developer.fullstory.com/browser/fullcapture/capture-data/), [element consent](https://developer.fullstory.com/browser/fullcapture/user-consent/), and [cookie consent](https://help.fullstory.com/hc/en-us/articles/35988237543191-Cookie-Consent-Management-with-Fullstory).
273
+
274
+ Test in a private window with an opt-in policy. Open DevTools Network, disable
275
+ the cache and filter by the vendor's domain:
276
+
277
+ 1. Load the page. No request goes to the vendor before you choose.
278
+ 2. Click Reject, then reload. There is still no vendor request.
279
+ 3. Open Privacy settings and allow the helper's category. The vendor script
280
+ loads without a page reload.
281
+ 4. Turn the category off again and save. c15t reloads the page, and the new
282
+ page makes no vendor request.
283
+
284
+ c15t reloads on revocation because removing a script element does not stop
285
+ code that already ran. The vendor's listeners, timers and queued events stay
286
+ alive until the page unloads. If you set `reloadOnConsentRevoked: false`, stop
287
+ the vendor yourself. Register a callback-only script whose `onConsentChange`
288
+ calls the vendor's opt-out API, as shown in
289
+ [custom integrations](./building-integrations.md), and check the
290
+ permission before each of your own event calls. The reload does not delete
291
+ cookies the vendor already set; see
292
+ [clear on revocation for your framework](./overview.md#vendor-switches-and-cookie-cleanup).
293
+
294
+ The helper lists its vendor by name in the preference dialog, so a visitor can
295
+ turn it off inside an allowed category. See
296
+ [vendor consent for your framework](./overview.md#vendor-switches-and-cookie-cleanup). The
297
+ [consent verification guide](../guides/verify-consent.md) covers navigation,
298
+ expiry and hosting checks.