@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,328 @@
1
+ ---
2
+ title: The Trade Desk
3
+ description: Load The Trade Desk with c15t after marketing consent and verify
4
+ its loader, storage and revocation behavior.
5
+ seoTitle: The Trade Desk consent with c15t
6
+ seoDescription: Load The Trade Desk Universal Pixel only after marketing
7
+ consent. Learn what theTradeDeskPixel queues, which cookies remain and how to
8
+ verify it.
9
+ icon: radar
10
+ group: integrations
11
+ ---
12
+
13
+ The Trade Desk Universal Pixel records conversions and builds ad audiences.
14
+ The c15t `theTradeDeskPixel` helper waits until the `marketing` category is
15
+ allowed before it defines the pixel globals and adds the loader.
16
+
17
+ The Trade Desk has no API to stop its SDK. When the visitor withdraws, the
18
+ helper leaves the SDK on the page, and c15t's default page reload removes it.
19
+
20
+ ## Configure The Trade Desk
21
+
22
+ Copy the advertiser ID and Universal Pixel IDs from your account snippet. This
23
+ helper uses the Universal Pixel 3 loader. Unified ID 2.0 setup is separate.
24
+ Then delete the direct snippet and any tag manager copy, so they can't load
25
+ The Trade Desk without consent.
26
+
27
+ | Package manager | Command |
28
+ | :-------------- | :------------------------------- |
29
+ | npm | `npm install @c15t/integrations` |
30
+ | pnpm | `pnpm add @c15t/integrations` |
31
+ | yarn | `yarn add @c15t/integrations` |
32
+ | bun | `bun add @c15t/integrations` |
33
+
34
+ ```ts title="src/consent-scripts.ts"
35
+ import { theTradeDeskPixel } from '@c15t/integrations/the-trade-desk';
36
+
37
+ export const scripts = [
38
+ theTradeDeskPixel({ advertiserId: 'ADVERTISER_ID', pixelIds: ['PIXEL_ID'] }),
39
+ ];
40
+ ```
41
+
42
+ ## Register the scripts
43
+
44
+ Complete your [framework quickstart](https://c15t.com/docs/frameworks) first. Keep its Inth
45
+ endpoint, policy, styles and consent UI. Remove the vendor's original script,
46
+ SDK initializer or tag-manager entry, so the vendor loads only through c15t.
47
+
48
+ The vendor pages put the helper in `src/consent-scripts.ts`. If your framework
49
+ quickstart already has a `scripts` array, such as the one in `c15t.config.ts`
50
+ in the Next.js guide, add the helper to that array instead of creating a
51
+ second file.
52
+ The `scripts` export is a configuration, not an initializer. Add it to the c15t provider you already have, at the registration
53
+ point for your framework below. These are edits to that provider, not a second
54
+ provider.
55
+
56
+ **Next.js**
57
+
58
+ Add the configuration to `scripts` in `c15t.config.ts`, next to
59
+ `next.config.ts`:
60
+
61
+ ```ts title="c15t.config.ts"
62
+ import { defineConsentConfig } from 'c15t/next';
63
+ import { scripts } from './src/consent-scripts';
64
+
65
+ export default defineConsentConfig({ scripts });
66
+ ```
67
+
68
+ Keep the rest of your config, such as `mode` and `routePrefix`, in the
69
+ same call. `ConsentRoot` reads the config in the browser, so the layout
70
+ keeps passing only `state`. App Router, Pages Router and static export all
71
+ read the same file. See
72
+ [Next.js scripts and embeds](https://c15t.com/docs/frameworks/next/scripts).
73
+
74
+ **TanStack Start**
75
+
76
+ Import the configuration into your root route and pass it to the existing
77
+ `ConsentRoot` as a top-level prop. Keep the loader from the
78
+ [TanStack Start quickstart](https://c15t.com/docs/frameworks/tanstack-start/quickstart):
79
+
80
+ ```tsx title="src/routes/__root.tsx"
81
+ import { scripts } from '../consent-scripts';
82
+
83
+ <ConsentRoot state={consent} scripts={scripts}>
84
+ ```
85
+
86
+ Import vendor helpers in the root route module, not in a server function.
87
+ A server function's return value must be serializable, and script
88
+ configurations carry callbacks. See
89
+ [TanStack Start scripts](https://c15t.com/docs/frameworks/tanstack-start/scripts).
90
+
91
+ **React**
92
+
93
+ Add the configuration to the existing `ConsentProvider` options, next to
94
+ `mode`:
95
+
96
+ ```tsx title="src/consent.tsx"
97
+ import { scripts } from './consent-scripts';
98
+
99
+ <ConsentProvider options={{ mode, scripts }}>
100
+ ```
101
+
102
+ `mode` is the `manifest()` value from the
103
+ [React quickstart](../frameworks/react/quickstart.md). Keep the banner,
104
+ dialog and preferences link inside the provider. See
105
+ [React scripts and embeds](../frameworks/react/scripts.md).
106
+
107
+ **Nuxt**
108
+
109
+ Register the scripts under the `c15t` key in `app/app.config.ts`. Adjust the
110
+ relative import to where you created `consent-scripts.ts`:
111
+
112
+ ```ts title="app/app.config.ts"
113
+ import { scripts } from '../src/consent-scripts';
114
+
115
+ export default defineAppConfig({
116
+ c15t: { scripts },
117
+ });
118
+ ```
119
+
120
+ The Nuxt module merges this over its options in `nuxt.config.ts` and starts
121
+ one script loader in the browser after hydration, once it has applied the
122
+ visitor's stored choice and privacy signals. Keep `scripts` out of
123
+ `nuxt.config.ts`, which reaches the browser as JSON and drops the vendor
124
+ callbacks. Write the vendor IDs into `consent-scripts.ts`. See
125
+ [Nuxt scripts and embeds](https://c15t.com/docs/frameworks/nuxt/scripts).
126
+
127
+ **Vue**
128
+
129
+ Pass the scripts to the existing `c15tVue` plugin call in `src/main.ts`:
130
+
131
+ ```ts title="src/main.ts"
132
+ import { c15tVue, manifest } from 'c15t/vue/vue-plugin';
133
+ import { scripts } from './consent-scripts';
134
+
135
+ app.use(c15tVue, {
136
+ mode: manifest(),
137
+ scripts,
138
+ });
139
+ ```
140
+
141
+ Keep your existing `mode` and other options. The plugin starts one
142
+ script loader when the app mounts, after it has applied the visitor's stored
143
+ choice. Do not also call `createScriptLoader` from a component. See
144
+ [Vue scripts and embeds](https://c15t.com/docs/frameworks/vue/scripts).
145
+
146
+ **Astro**
147
+
148
+ Add the scripts to the client entrypoint from the
149
+ [Astro quickstart](https://c15t.com/docs/frameworks/astro/quickstart), `src/c15t.client.ts`,
150
+ which the integration finds on its own. Keep `astro.config.mjs` as it is.
151
+ If the module already exports scripts, combine the two arrays.
152
+
153
+ ```ts title="src/c15t.client.ts"
154
+ import type { C15tClientOptionsExtension } from 'c15t/astro';
155
+ import { scripts } from './consent-scripts';
156
+
157
+ export default { scripts } satisfies C15tClientOptionsExtension;
158
+ ```
159
+
160
+ Vendor helpers contain callbacks, and the integration options in
161
+ `astro.config.mjs` are serialized into the page, so do not put helpers in
162
+ the integration's `scripts` option. The integration passes the client
163
+ entrypoint to the one runtime every page shares, including across
164
+ `ClientRouter` navigation.
165
+
166
+ **Svelte**
167
+
168
+ Import the scripts in the component that owns your existing provider and
169
+ pass them as a top-level prop:
170
+
171
+ ```svelte title="src/App.svelte"
172
+ <script lang="ts">
173
+ import { ConsentProvider, manifest } from 'c15t/svelte';
174
+ import { scripts } from './consent-scripts';
175
+ </script>
176
+
177
+ <ConsentProvider mode={manifest()} {scripts}>
178
+ <!-- Keep your application, consent UI and preferences link here. -->
179
+ </ConsentProvider>
180
+ ```
181
+
182
+ Retain the styles and consent UI from the [Svelte quickstart](https://c15t.com/docs/frameworks/svelte/quickstart).
183
+ The provider owns the loader and disposes it on unmount.
184
+
185
+ **SvelteKit**
186
+
187
+ Add the scripts to the existing `ConsentRoot` in the root layout. Keep the
188
+ handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs/frameworks/sveltekit/quickstart).
189
+
190
+ ```svelte title="src/routes/+layout.svelte"
191
+ <script lang="ts">
192
+ import { ConsentRoot } from 'c15t/svelte';
193
+ import { scripts } from '../consent-scripts';
194
+
195
+ let { children, data } = $props();
196
+ </script>
197
+
198
+ <ConsentRoot state={data.consent} {scripts}>
199
+ {@render children()}
200
+ <!-- Keep your consent UI and preferences link here. -->
201
+ </ConsentRoot>
202
+ ```
203
+
204
+ Import vendor helpers in the layout component, not in `+layout.server.ts`:
205
+ a server load cannot send functions to the browser. Prerendered, static and
206
+ SPA-mode pages use the same `scripts` prop. If you pass an externally owned
207
+ `runtime` to the provider, register scripts when creating that runtime instead.
208
+
209
+ **HTML**
210
+
211
+ The helpers in `@c15t/integrations` are ES modules that need a bundler. On a
212
+ page that loads the c15t script tag, paste the vendor's own snippet instead
213
+ and keep it inert until its category is allowed:
214
+
215
+ ```html
216
+ <script type="text/plain" data-c15t-category="measurement">
217
+ // The vendor's snippet, unchanged
218
+ </script>
219
+ ```
220
+
221
+ Use the category this guide names for the vendor. c15t runs the snippet
222
+ once that category is allowed, and reloads the page when the visitor
223
+ withdraws it. Helper options on this page, such as `loadMode`, do not apply
224
+ to a pasted snippet. See [HTML scripts](https://c15t.com/docs/frameworks/html/scripts).
225
+
226
+ **JavaScript**
227
+
228
+ Pass the scripts to `init()` from `@c15t/browser`, next to your mode:
229
+
230
+ ```ts
231
+ import { init, manifest } from '@c15t/browser';
232
+ import { scripts } from './consent-scripts';
233
+
234
+ const consent = init({
235
+ mode: manifest(),
236
+ scripts,
237
+ });
238
+ ```
239
+
240
+ Keep the mode from your quickstart. With
241
+ `createConsentRuntime` from `c15t/runtime`, pass `scripts` to it instead.
242
+ A kernel you create yourself needs a loader from
243
+ `c15t/modules/script-loader`. Attach one loader per kernel. See
244
+ [JavaScript scripts](https://c15t.com/docs/frameworks/javascript/scripts).
245
+
246
+ ## Options
247
+
248
+ | Option | Default | Behavior |
249
+ | ---------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
250
+ | `advertiserId` | Required | Public advertiser ID. Trimmed. If it's missing or blank, c15t logs an error and never loads the pixel. |
251
+ | `pixelIds` | Required | Nonempty array of public Universal Pixel IDs, each trimmed. If the array is empty or any entry is blank, c15t logs an error and skips the whole helper. |
252
+ | `enableCookieSyncing` | Vendor default | Passed to `init` when set. `false` turns off cookie syncing, but it doesn't stop all cookies and doesn't make loading before consent safe. |
253
+ | `dataProcessingOption` | None | Limited data use setting, such as `{ policies: ['LDU'], region: 'US-CO' }`. It doesn't replace consent. |
254
+ | `scriptUrl` | `https://js.adsrvr.org/up_loader.3.0.0.js` | Loader URL override. A blank value uses the default. Walmart DSP accounts use `https://azjs.adsrvr.org/thetradedesk-ads/up_loader.3.0.0.js`. |
255
+
256
+ ## Loading and revocation
257
+
258
+ When `marketing` is allowed, the helper creates the `ttdConversionEventsLayer`
259
+ array and a `ttdConversionEvents` function that pushes each call's arguments
260
+ onto it. It queues one `init` call and one `event` call, then adds the loader
261
+ as an async script. If you set `dataProcessingOption`, the helper passes it as
262
+ `dataProcessingOption` to `init` and as `data_processing_option` on the event.
263
+ If your page already defines `ttdConversionEvents` or the layer, the helper
264
+ leaves them alone.
265
+
266
+ The SDK reads TCF and GPP signals where they apply. Those signals control what
267
+ the vendor does after it loads. They don't replace the c15t gate. Send your own
268
+ conversion calls only while marketing and any vendor consent stay granted.
269
+
270
+ The Trade Desk documents no way to stop or tear down the SDK in the browser.
271
+ On withdrawal, the helper keeps the loader element on the page. Keep c15t's
272
+ default `reloadOnConsentRevoked` enabled. Without the reload, existing code,
273
+ requests and frames can keep running until the visitor navigates. If the
274
+ visitor grants consent again on the same page, the helper reuses that loader
275
+ and doesn't queue `init` or the event a second time.
276
+
277
+ ## Cookies and storage
278
+
279
+ The Trade Desk documents the `TDID` identifier cookie on `adsrvr.org`, with a
280
+ one-year lifetime. A read-only request using the guide's sample IDs returned a
281
+ `TDID` cookie even with cookie syncing turned off. The served SDK also reads
282
+ local storage debugging flags and can read existing GA4 cookies when
283
+ configured. This list isn't a complete cookie inventory.
284
+
285
+ For CSP, the guide lists `js.adsrvr.org` for scripts, and `insight.adsrvr.org`
286
+ and `match.adsrvr.org` for frames. Realtime conversion connections use
287
+ `insight.adsrvr.org`. Account options can add hosts.
288
+
289
+ ## Verify The Trade Desk
290
+
291
+ In a fresh browser profile, deny consent and allow only an unrelated category.
292
+ Filter Network by `adsrvr.org` and confirm that no requests, globals, cookies,
293
+ local storage or session storage appear. Grant `marketing` and check the loader
294
+ URL against your account snippet. Withdraw consent and confirm the page
295
+ reloads. The Trade Desk must stay blocked on the new page. Check storage in
296
+ DevTools as well as Network.
297
+
298
+ The browser monitor blocks collection, so it doesn't confirm that your account
299
+ receives events.
300
+
301
+ Sources: [Universal Pixel guide](https://open.thetradedesk.com/provider/docsApp/GuidesProvider/data/doc/TrackingTagsUniversalPixel)
302
+ and [privacy policy](https://www.thetradedesk.com/legal/privacy).
303
+
304
+ Test in a private window with an opt-in policy. Open DevTools Network, disable
305
+ the cache and filter by the vendor's domain:
306
+
307
+ 1. Load the page. No request goes to the vendor before you choose.
308
+ 2. Click Reject, then reload. There is still no vendor request.
309
+ 3. Open Privacy settings and allow the helper's category. The vendor script
310
+ loads without a page reload.
311
+ 4. Turn the category off again and save. c15t reloads the page, and the new
312
+ page makes no vendor request.
313
+
314
+ c15t reloads on revocation because removing a script element does not stop
315
+ code that already ran. The vendor's listeners, timers and queued events stay
316
+ alive until the page unloads. If you set `reloadOnConsentRevoked: false`, stop
317
+ the vendor yourself. Register a callback-only script whose `onConsentChange`
318
+ calls the vendor's opt-out API, as shown in
319
+ [custom integrations](./building-integrations.md), and check the
320
+ permission before each of your own event calls. The reload does not delete
321
+ cookies the vendor already set; see
322
+ [clear on revocation for your framework](./overview.md#vendor-switches-and-cookie-cleanup).
323
+
324
+ The helper lists its vendor by name in the preference dialog, so a visitor can
325
+ turn it off inside an allowed category. See
326
+ [vendor consent for your framework](./overview.md#vendor-switches-and-cookie-cleanup). The
327
+ [consent verification guide](../guides/verify-consent.md) covers navigation,
328
+ expiry and hosting checks.
@@ -0,0 +1,333 @@
1
+ ---
2
+ title: Vector
3
+ description: Load the Vector pixel only after marketing consent with the c15t
4
+ vector helper, and check its queue, storage and revocation.
5
+ seoTitle: Vector consent with c15t
6
+ seoDescription: Load Vector's pixel only after marketing consent with c15t, and
7
+ check its loader, storage and page reload on withdrawal.
8
+ icon: radar
9
+ group: integrations
10
+ ---
11
+
12
+ Vector identifies the people and companies visiting your site and builds
13
+ advertising audiences from their activity. The c15t `vector` helper keeps
14
+ Vector off the page until the `marketing` category is allowed. Vector has no
15
+ documented stop API, so on withdrawal c15t reloads the page to stop it.
16
+
17
+ ## Configure Vector
18
+
19
+ Copy the pixel ID from **Settings > Pixel** in your Vector account, where the
20
+ install snippet calls `vector.load`. Vector's own consent example requires
21
+ advertising consent, so this helper uses the `marketing` category. Remove the
22
+ direct snippet and any tag manager copy so they can't bypass c15t.
23
+
24
+ | Package manager | Command |
25
+ | :-------------- | :------------------------------- |
26
+ | npm | `npm install @c15t/integrations` |
27
+ | pnpm | `pnpm add @c15t/integrations` |
28
+ | yarn | `yarn add @c15t/integrations` |
29
+ | bun | `bun add @c15t/integrations` |
30
+
31
+ ```ts title="src/consent-scripts.ts"
32
+ import { vector } from '@c15t/integrations/vector';
33
+
34
+ export const scripts = [vector({ pixelId: 'YOUR_PIXEL_ID' })];
35
+ ```
36
+
37
+ ## Register the scripts
38
+
39
+ Complete your [framework quickstart](https://c15t.com/docs/frameworks) first. Keep its Inth
40
+ endpoint, policy, styles and consent UI. Remove the vendor's original script,
41
+ SDK initializer or tag-manager entry, so the vendor loads only through c15t.
42
+
43
+ The vendor pages put the helper in `src/consent-scripts.ts`. If your framework
44
+ quickstart already has a `scripts` array, such as the one in `c15t.config.ts`
45
+ in the Next.js guide, add the helper to that array instead of creating a
46
+ second file.
47
+ The `scripts` export is a configuration, not an initializer. Add it to the c15t provider you already have, at the registration
48
+ point for your framework below. These are edits to that provider, not a second
49
+ provider.
50
+
51
+ **Next.js**
52
+
53
+ Add the configuration to `scripts` in `c15t.config.ts`, next to
54
+ `next.config.ts`:
55
+
56
+ ```ts title="c15t.config.ts"
57
+ import { defineConsentConfig } from 'c15t/next';
58
+ import { scripts } from './src/consent-scripts';
59
+
60
+ export default defineConsentConfig({ scripts });
61
+ ```
62
+
63
+ Keep the rest of your config, such as `mode` and `routePrefix`, in the
64
+ same call. `ConsentRoot` reads the config in the browser, so the layout
65
+ keeps passing only `state`. App Router, Pages Router and static export all
66
+ read the same file. See
67
+ [Next.js scripts and embeds](https://c15t.com/docs/frameworks/next/scripts).
68
+
69
+ **TanStack Start**
70
+
71
+ Import the configuration into your root route and pass it to the existing
72
+ `ConsentRoot` as a top-level prop. Keep the loader from the
73
+ [TanStack Start quickstart](https://c15t.com/docs/frameworks/tanstack-start/quickstart):
74
+
75
+ ```tsx title="src/routes/__root.tsx"
76
+ import { scripts } from '../consent-scripts';
77
+
78
+ <ConsentRoot state={consent} scripts={scripts}>
79
+ ```
80
+
81
+ Import vendor helpers in the root route module, not in a server function.
82
+ A server function's return value must be serializable, and script
83
+ configurations carry callbacks. See
84
+ [TanStack Start scripts](https://c15t.com/docs/frameworks/tanstack-start/scripts).
85
+
86
+ **React**
87
+
88
+ Add the configuration to the existing `ConsentProvider` options, next to
89
+ `mode`:
90
+
91
+ ```tsx title="src/consent.tsx"
92
+ import { scripts } from './consent-scripts';
93
+
94
+ <ConsentProvider options={{ mode, scripts }}>
95
+ ```
96
+
97
+ `mode` is the `manifest()` value from the
98
+ [React quickstart](../frameworks/react/quickstart.md). Keep the banner,
99
+ dialog and preferences link inside the provider. See
100
+ [React scripts and embeds](../frameworks/react/scripts.md).
101
+
102
+ **Nuxt**
103
+
104
+ Register the scripts under the `c15t` key in `app/app.config.ts`. Adjust the
105
+ relative import to where you created `consent-scripts.ts`:
106
+
107
+ ```ts title="app/app.config.ts"
108
+ import { scripts } from '../src/consent-scripts';
109
+
110
+ export default defineAppConfig({
111
+ c15t: { scripts },
112
+ });
113
+ ```
114
+
115
+ The Nuxt module merges this over its options in `nuxt.config.ts` and starts
116
+ one script loader in the browser after hydration, once it has applied the
117
+ visitor's stored choice and privacy signals. Keep `scripts` out of
118
+ `nuxt.config.ts`, which reaches the browser as JSON and drops the vendor
119
+ callbacks. Write the vendor IDs into `consent-scripts.ts`. See
120
+ [Nuxt scripts and embeds](https://c15t.com/docs/frameworks/nuxt/scripts).
121
+
122
+ **Vue**
123
+
124
+ Pass the scripts to the existing `c15tVue` plugin call in `src/main.ts`:
125
+
126
+ ```ts title="src/main.ts"
127
+ import { c15tVue, manifest } from 'c15t/vue/vue-plugin';
128
+ import { scripts } from './consent-scripts';
129
+
130
+ app.use(c15tVue, {
131
+ mode: manifest(),
132
+ scripts,
133
+ });
134
+ ```
135
+
136
+ Keep your existing `mode` and other options. The plugin starts one
137
+ script loader when the app mounts, after it has applied the visitor's stored
138
+ choice. Do not also call `createScriptLoader` from a component. See
139
+ [Vue scripts and embeds](https://c15t.com/docs/frameworks/vue/scripts).
140
+
141
+ **Astro**
142
+
143
+ Add the scripts to the client entrypoint from the
144
+ [Astro quickstart](https://c15t.com/docs/frameworks/astro/quickstart), `src/c15t.client.ts`,
145
+ which the integration finds on its own. Keep `astro.config.mjs` as it is.
146
+ If the module already exports scripts, combine the two arrays.
147
+
148
+ ```ts title="src/c15t.client.ts"
149
+ import type { C15tClientOptionsExtension } from 'c15t/astro';
150
+ import { scripts } from './consent-scripts';
151
+
152
+ export default { scripts } satisfies C15tClientOptionsExtension;
153
+ ```
154
+
155
+ Vendor helpers contain callbacks, and the integration options in
156
+ `astro.config.mjs` are serialized into the page, so do not put helpers in
157
+ the integration's `scripts` option. The integration passes the client
158
+ entrypoint to the one runtime every page shares, including across
159
+ `ClientRouter` navigation.
160
+
161
+ **Svelte**
162
+
163
+ Import the scripts in the component that owns your existing provider and
164
+ pass them as a top-level prop:
165
+
166
+ ```svelte title="src/App.svelte"
167
+ <script lang="ts">
168
+ import { ConsentProvider, manifest } from 'c15t/svelte';
169
+ import { scripts } from './consent-scripts';
170
+ </script>
171
+
172
+ <ConsentProvider mode={manifest()} {scripts}>
173
+ <!-- Keep your application, consent UI and preferences link here. -->
174
+ </ConsentProvider>
175
+ ```
176
+
177
+ Retain the styles and consent UI from the [Svelte quickstart](https://c15t.com/docs/frameworks/svelte/quickstart).
178
+ The provider owns the loader and disposes it on unmount.
179
+
180
+ **SvelteKit**
181
+
182
+ Add the scripts to the existing `ConsentRoot` in the root layout. Keep the
183
+ handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs/frameworks/sveltekit/quickstart).
184
+
185
+ ```svelte title="src/routes/+layout.svelte"
186
+ <script lang="ts">
187
+ import { ConsentRoot } from 'c15t/svelte';
188
+ import { scripts } from '../consent-scripts';
189
+
190
+ let { children, data } = $props();
191
+ </script>
192
+
193
+ <ConsentRoot state={data.consent} {scripts}>
194
+ {@render children()}
195
+ <!-- Keep your consent UI and preferences link here. -->
196
+ </ConsentRoot>
197
+ ```
198
+
199
+ Import vendor helpers in the layout component, not in `+layout.server.ts`:
200
+ a server load cannot send functions to the browser. Prerendered, static and
201
+ SPA-mode pages use the same `scripts` prop. If you pass an externally owned
202
+ `runtime` to the provider, register scripts when creating that runtime instead.
203
+
204
+ **HTML**
205
+
206
+ The helpers in `@c15t/integrations` are ES modules that need a bundler. On a
207
+ page that loads the c15t script tag, paste the vendor's own snippet instead
208
+ and keep it inert until its category is allowed:
209
+
210
+ ```html
211
+ <script type="text/plain" data-c15t-category="measurement">
212
+ // The vendor's snippet, unchanged
213
+ </script>
214
+ ```
215
+
216
+ Use the category this guide names for the vendor. c15t runs the snippet
217
+ once that category is allowed, and reloads the page when the visitor
218
+ withdraws it. Helper options on this page, such as `loadMode`, do not apply
219
+ to a pasted snippet. See [HTML scripts](https://c15t.com/docs/frameworks/html/scripts).
220
+
221
+ **JavaScript**
222
+
223
+ Pass the scripts to `init()` from `@c15t/browser`, next to your mode:
224
+
225
+ ```ts
226
+ import { init, manifest } from '@c15t/browser';
227
+ import { scripts } from './consent-scripts';
228
+
229
+ const consent = init({
230
+ mode: manifest(),
231
+ scripts,
232
+ });
233
+ ```
234
+
235
+ Keep the mode from your quickstart. With
236
+ `createConsentRuntime` from `c15t/runtime`, pass `scripts` to it instead.
237
+ A kernel you create yourself needs a loader from
238
+ `c15t/modules/script-loader`. Attach one loader per kernel. See
239
+ [JavaScript scripts](https://c15t.com/docs/frameworks/javascript/scripts).
240
+
241
+ ## Options
242
+
243
+ | Option | Default | Behavior |
244
+ | ----------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
245
+ | `pixelId` | Required | Pixel ID from your account snippet. Whitespace is trimmed. A missing or blank ID logs `vector: missing or invalid pixelId` and skips loading. |
246
+ | `scriptUrl` | `https://cdn.vector.co/pixel.js` | Custom SDK URL. Blank values use the default. |
247
+
248
+ ## Loading and revocation
249
+
250
+ After consent, the helper creates `window.vector` with a queue for `load`,
251
+ `identify` and `on`. Calls use Vector's nested argument format,
252
+ `[methodName, argsArray]`, and preserve callback references. The helper queues
253
+ `load(pixelId)` before inserting the asynchronous SDK script. Existing SDK
254
+ methods are preserved. The helper sends no identification calls itself.
255
+
256
+ The loader stays registered across withdrawal and regrant to avoid duplicate
257
+ execution on the same page. Vector has no documented complete shutdown API.
258
+ Keep c15t's default page reload on revocation enabled. With reload disabled,
259
+ running code, pending loads and partner activity can continue until navigation.
260
+ The reload doesn't clear Vector's storage.
261
+
262
+ The helper does not call the undocumented `block` or `removeVisitor` methods.
263
+ Form listening and IP-to-company lookup depend on account settings. Vector's
264
+ IP-to-company consent hooks cover only that lookup and cannot replace gating
265
+ the whole pixel.
266
+
267
+ ## Requests, cookies and storage
268
+
269
+ Vector's CSP guide lists `cdn.vector.co`, `api.vector.co` and
270
+ `a.usbrowserspeed.com`. The current SDK also includes LiveIntent and can contact
271
+ `idx.liadm.com`. Check requests for your account before setting CSP rules.
272
+
273
+ The current SDK prefers local storage, with session storage, cookies and memory
274
+ as fallbacks. Pixel state can include
275
+ `vector_pixel_<pixelId>_visitor_id`, `vector_pixel_<pixelId>_visitor_uuid`,
276
+ `vector_pixel_<pixelId>_synced_at` and
277
+ `vector_pixel_<pixelId>_last_identified_id`. Legacy and global keys also exist.
278
+
279
+ The `vector_visitor_id` cookie depends on the account's `pixelCookieFallback`
280
+ setting. The fetched SDK requests a lifetime of 3,650 days, with
281
+ `SameSite=None; Secure`; browsers may shorten that lifetime. Partner state can
282
+ include `_lc2_fpi`, `_lc2_fpi_js`, `_li_dcdm_c` and local-storage `_li_duid`.
283
+ Vector can read the existing `hubspotutk` cookie. This list describes the fetched
284
+ SDK, not a stable or exhaustive storage contract.
285
+
286
+ ## Verify Vector
287
+
288
+ Use your own pixel ID on a domain allowed by your Vector account. In a fresh
289
+ browser profile, deny optional consent, then grant only measurement consent.
290
+ Confirm that no Vector global, SDK request or vendor storage appears. Grant
291
+ marketing consent and confirm that `pixel.js` loads once. Withdraw consent and
292
+ confirm the page reloads and blocks Vector on the new page. Check Network,
293
+ cookies, local storage and session storage.
294
+
295
+ c15t's live vendor probe uses a placeholder pixel ID. It confirms that the
296
+ downloaded SDK replaces the queue, replays the nested calls and registers the
297
+ pixel. It blocks settings, identity and collection requests, so the SDK can log
298
+ a JSON error for the empty settings response. Vector checks the requesting
299
+ domain before it returns settings, so the probe can't verify account settings
300
+ or visitor identification. Test those with your own pixel ID on an allowed
301
+ domain.
302
+
303
+ Sources: [installing the Vector pixel](https://learn.vector.co/articles/5402074849-adding-the-pixel-to-your-site),
304
+ [Vector's Termly consent example](https://learn.vector.co/articles/6201229721-installing-the-pixel-via-termly-s-consent-management-platform),
305
+ [CSP settings](https://learn.vector.co/articles/1236044955-csp-settings),
306
+ [Vector's privacy policy](https://www.vector.co/legal/privacy), and the
307
+ [current pixel SDK](https://cdn.vector.co/pixel.js).
308
+
309
+ Test in a private window with an opt-in policy. Open DevTools Network, disable
310
+ the cache and filter by the vendor's domain:
311
+
312
+ 1. Load the page. No request goes to the vendor before you choose.
313
+ 2. Click Reject, then reload. There is still no vendor request.
314
+ 3. Open Privacy settings and allow the helper's category. The vendor script
315
+ loads without a page reload.
316
+ 4. Turn the category off again and save. c15t reloads the page, and the new
317
+ page makes no vendor request.
318
+
319
+ c15t reloads on revocation because removing a script element does not stop
320
+ code that already ran. The vendor's listeners, timers and queued events stay
321
+ alive until the page unloads. If you set `reloadOnConsentRevoked: false`, stop
322
+ the vendor yourself. Register a callback-only script whose `onConsentChange`
323
+ calls the vendor's opt-out API, as shown in
324
+ [custom integrations](./building-integrations.md), and check the
325
+ permission before each of your own event calls. The reload does not delete
326
+ cookies the vendor already set; see
327
+ [clear on revocation for your framework](./overview.md#vendor-switches-and-cookie-cleanup).
328
+
329
+ The helper lists its vendor by name in the preference dialog, so a visitor can
330
+ turn it off inside an allowed category. See
331
+ [vendor consent for your framework](./overview.md#vendor-switches-and-cookie-cleanup). The
332
+ [consent verification guide](../guides/verify-consent.md) covers navigation,
333
+ expiry and hosting checks.