@c15t/browser 3.0.0-alpha.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.
Files changed (93) hide show
  1. package/AGENTS.md +64 -0
  2. package/CHANGELOG.md +27 -0
  3. package/README.md +128 -0
  4. package/dist/861.js +1079 -0
  5. package/dist/925.js +649 -0
  6. package/dist/c15t.css +213 -0
  7. package/dist/c15t.devtools.js +1 -0
  8. package/dist/c15t.headless.js +1 -0
  9. package/dist/c15t.iab.css +190 -0
  10. package/dist/c15t.iab.js +221 -0
  11. package/dist/c15t.js +30 -0
  12. package/dist/devtools.js +11 -0
  13. package/dist/headless.js +17 -0
  14. package/dist/iab.js +784 -0
  15. package/dist/index.js +17 -0
  16. package/dist-types/auto-init.d.ts +42 -0
  17. package/dist-types/client.d.ts +51 -0
  18. package/dist-types/deferred.d.ts +13 -0
  19. package/dist-types/devtools.d.ts +32 -0
  20. package/dist-types/entries/cdn-devtools.d.ts +13 -0
  21. package/dist-types/entries/cdn-headless.d.ts +8 -0
  22. package/dist-types/entries/cdn-iab.d.ts +1 -0
  23. package/dist-types/entries/cdn.d.ts +8 -0
  24. package/dist-types/gated-scripts.d.ts +35 -0
  25. package/dist-types/generated/iab-styles.d.ts +144 -0
  26. package/dist-types/generated/styles.d.ts +137 -0
  27. package/dist-types/global.d.ts +112 -0
  28. package/dist-types/headless.d.ts +41 -0
  29. package/dist-types/iab/mount.d.ts +8 -0
  30. package/dist-types/iab/preferences.d.ts +9 -0
  31. package/dist-types/iab/styles.d.ts +2 -0
  32. package/dist-types/iab/surface.d.ts +4 -0
  33. package/dist-types/iab/vendor-disclosures.d.ts +14 -0
  34. package/dist-types/iab.d.ts +20 -0
  35. package/dist-types/index.d.ts +43 -0
  36. package/dist-types/transports/manifest.d.ts +62 -0
  37. package/dist-types/transports/offline.d.ts +18 -0
  38. package/dist-types/types.d.ts +290 -0
  39. package/dist-types/ui/actions.d.ts +29 -0
  40. package/dist-types/ui/banner.d.ts +13 -0
  41. package/dist-types/ui/branding.d.ts +25 -0
  42. package/dist-types/ui/copy.d.ts +28 -0
  43. package/dist-types/ui/dialog.d.ts +14 -0
  44. package/dist-types/ui/dom.d.ts +48 -0
  45. package/dist-types/ui/mount.d.ts +27 -0
  46. package/dist-types/ui/surface.d.ts +43 -0
  47. package/dist-types/ui/trigger.d.ts +14 -0
  48. package/dist-types/ui/widget.d.ts +27 -0
  49. package/dist-types/version.d.ts +1 -0
  50. package/docs/README.md +64 -0
  51. package/docs/frameworks/javascript/script-loader.md +47 -0
  52. package/docs/frameworks/javascript/script-tag.md +375 -0
  53. package/docs/integrations/adobe-analytics.md +294 -0
  54. package/docs/integrations/ahrefs-analytics.md +291 -0
  55. package/docs/integrations/amplitude.md +292 -0
  56. package/docs/integrations/building-integrations.md +47 -0
  57. package/docs/integrations/clearbit.md +291 -0
  58. package/docs/integrations/cloudflare-web-analytics.md +292 -0
  59. package/docs/integrations/crisp.md +294 -0
  60. package/docs/integrations/databuddy.md +311 -0
  61. package/docs/integrations/fathom-analytics.md +293 -0
  62. package/docs/integrations/google-maps.md +384 -0
  63. package/docs/integrations/google-tag-manager.md +306 -0
  64. package/docs/integrations/google-tag.md +305 -0
  65. package/docs/integrations/heap.md +292 -0
  66. package/docs/integrations/hightouch.md +293 -0
  67. package/docs/integrations/hotjar.md +292 -0
  68. package/docs/integrations/intercom.md +285 -0
  69. package/docs/integrations/linkedin-insights.md +291 -0
  70. package/docs/integrations/logrocket.md +293 -0
  71. package/docs/integrations/matomo-analytics.md +316 -0
  72. package/docs/integrations/meta-pixel.md +285 -0
  73. package/docs/integrations/microsoft-clarity.md +292 -0
  74. package/docs/integrations/microsoft-uet.md +291 -0
  75. package/docs/integrations/mixpanel-analytics.md +295 -0
  76. package/docs/integrations/openai-pixel.md +441 -0
  77. package/docs/integrations/overview.md +111 -0
  78. package/docs/integrations/pirsch.md +295 -0
  79. package/docs/integrations/plausible-analytics.md +295 -0
  80. package/docs/integrations/posthog.md +397 -0
  81. package/docs/integrations/promptwatch.md +291 -0
  82. package/docs/integrations/reddit-pixel.md +294 -0
  83. package/docs/integrations/rudderstack.md +328 -0
  84. package/docs/integrations/rybbit-analytics.md +296 -0
  85. package/docs/integrations/segment.md +292 -0
  86. package/docs/integrations/snapchat-pixel.md +293 -0
  87. package/docs/integrations/tiktok-pixel.md +291 -0
  88. package/docs/integrations/umami-analytics.md +295 -0
  89. package/docs/integrations/vercel-analytics.md +293 -0
  90. package/docs/integrations/x-pixel.md +291 -0
  91. package/docs/integrations/youtube.md +405 -0
  92. package/package.json +117 -0
  93. package/readme.json +44 -0
@@ -0,0 +1,397 @@
1
+ ---
2
+ title: PostHog
3
+ description: Choose PostHog loading and cookieless behavior, configure the
4
+ region, and synchronize v3 permissions.
5
+ group: integrations
6
+ ---
7
+
8
+ ## Configure PostHog
9
+
10
+ Use the browser project token beginning with `phc_`. Select the region matching
11
+ your PostHog project. This example waits for measurement permission before
12
+ requesting the SDK.
13
+
14
+ | Package manager | Command |
15
+ | :-------------- | :-------------------------- |
16
+ | npm | `npm install @c15t/scripts` |
17
+ | pnpm | `pnpm add @c15t/scripts` |
18
+ | yarn | `yarn add @c15t/scripts` |
19
+ | bun | `bun add @c15t/scripts` |
20
+
21
+ ```ts title="src/consent-scripts.ts"
22
+ import { posthog } from '@c15t/scripts/posthog';
23
+
24
+ export const scripts = [
25
+ posthog({
26
+ id: 'phc_YOUR_PROJECT_TOKEN',
27
+ region: 'eu',
28
+ loadMode: 'after-consent',
29
+ initOptions: { cookieless_mode: 'never' },
30
+ }),
31
+ ];
32
+ ```
33
+
34
+ The helper initializes PostHog. Remove a separate `posthog-js` initializer,
35
+ framework plugin or array snippet before using this setup.
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 c15t owns loading once.
42
+
43
+ The `scripts` export in `src/consent-scripts.ts` is a configuration, not an
44
+ initializer. Add it to your existing consent owner using the registration point
45
+ below. These are partial edits to that owner, not additional providers.
46
+
47
+ **Next.js**
48
+
49
+ Import the configuration into the client boundary from your router guide:
50
+
51
+ ```ts
52
+ import { ConsentRoot } from 'c15t/next';
53
+ import { scripts } from './consent-scripts';
54
+ ```
55
+
56
+ Keep the server-resolved `state` and shared `consentConfig` from your
57
+ router guide. Its manifest, init and save URLs stay in effect. Add
58
+ `scripts` as a top-level prop on the existing root:
59
+
60
+ ```tsx
61
+ <ConsentRoot state={state} config={consentConfig} scripts={scripts}>
62
+ {children}
63
+ </ConsentRoot>
64
+ ```
65
+
66
+ For a Pages Router or static-export setup using `ConsentProvider`, add
67
+ `scripts` to its existing `options` instead. Keep the router-specific setup
68
+ from [Next.js script loading](https://c15t.com/docs/frameworks/next/script-loader).
69
+
70
+ **TanStack Start**
71
+
72
+ In your existing root route component, import the scripts alongside
73
+ `ConsentRoot`. Keep the server loader from the [TanStack Start quickstart](https://c15t.com/docs/frameworks/tanstack-start/quickstart).
74
+
75
+ ```tsx
76
+ import { Outlet } from '@tanstack/react-router';
77
+ import { ConsentRoot } from 'c15t/tanstack-start';
78
+ import { scripts } from '../consent-scripts';
79
+
80
+ function Root() {
81
+ const state = Route.useLoaderData();
82
+ return (
83
+ <ConsentRoot state={state} backendURL={backendURL} initRoute={false} scripts={scripts}>
84
+ <Outlet />
85
+ {/* Keep your consent banner, dialog and preferences link here. */}
86
+ </ConsentRoot>
87
+ );
88
+ }
89
+ ```
90
+
91
+ This edits the existing route. `Route` and `backendURL` come from its setup;
92
+ keep the document shell and head components if they are part of your root.
93
+ `initRoute={false}` keeps the quickstart's direct-backend initialization.
94
+ If your app mounts a consent server route, retain its existing `initRoute`
95
+ instead. Do not return script callbacks from a server function or route loader.
96
+
97
+ **React**
98
+
99
+ Import the scripts into your existing provider component:
100
+
101
+ ```ts
102
+ import { ConsentProvider } from 'c15t/react';
103
+ import { scripts } from './consent-scripts';
104
+ ```
105
+
106
+ Keep the existing options and add `scripts`:
107
+
108
+ ```tsx
109
+ <ConsentProvider options={{ ...consentOptions, scripts }}>
110
+ {children}
111
+ </ConsentProvider>
112
+ ```
113
+
114
+ Here `consentOptions` is your existing configuration, including
115
+ `mode: hosted({ url: backendURL })`. Keep the banner, dialog and preferences
116
+ link inside the provider. See [React script loading](https://c15t.com/docs/frameworks/react/script-loader).
117
+
118
+ **Nuxt**
119
+
120
+ Attach one loader from the root `app.vue`, after the Nuxt module has
121
+ started its browser runtime. This keeps vendor callbacks in application code rather
122
+ than serialized `nuxt.config.ts` runtime configuration.
123
+
124
+ ```vue title="app/app.vue"
125
+ <script setup lang="ts">
126
+ import { onUnmounted } from 'vue';
127
+ import { createScriptLoader } from 'c15t/modules/script-loader';
128
+ import { scripts } from '../src/consent-scripts';
129
+
130
+ const nuxtApp = useNuxtApp();
131
+ const kernel = useConsentKernel();
132
+ let loader: ReturnType<typeof createScriptLoader> | undefined;
133
+
134
+ const removeMountedHook = nuxtApp.hook('app:mounted', () => {
135
+ loader = createScriptLoader({ kernel, scripts });
136
+ });
137
+ onUnmounted(() => {
138
+ removeMountedHook();
139
+ loader?.dispose();
140
+ });
141
+ </script>
142
+
143
+ <template>
144
+ <ConsentRoot />
145
+ <NuxtPage />
146
+ </template>
147
+ ```
148
+
149
+ Merge the setup code into your root and retain its footer and preferences
150
+ link. `useConsentKernel` is auto-imported by the c15t Nuxt module. Adjust the
151
+ relative script import if your `app.vue` is at the project root. This loader
152
+ waits until the module has applied browser persistence and privacy signals,
153
+ then reads the current snapshot and observes future changes. Do not also register these scripts
154
+ in another loader. See the [Nuxt quickstart](https://c15t.com/docs/frameworks/nuxt/quickstart).
155
+
156
+ **Vue**
157
+
158
+ Use the kernel already provided by the Vue plugin. Merge this setup into
159
+ `App.vue`, whose lifetime covers the application:
160
+
161
+ ```vue title="src/App.vue"
162
+ <script setup lang="ts">
163
+ import { onMounted, onUnmounted } from 'vue';
164
+ import { createScriptLoader } from 'c15t/modules/script-loader';
165
+ import { useConsentKernel } from 'c15t/vue/vue-plugin';
166
+ import ConsentRoot from 'c15t/vue/consent-root';
167
+ import { scripts } from './consent-scripts';
168
+
169
+ const kernel = useConsentKernel();
170
+ let loader: ReturnType<typeof createScriptLoader> | undefined;
171
+
172
+ onMounted(() => {
173
+ loader = createScriptLoader({ kernel, scripts });
174
+ });
175
+ onUnmounted(() => loader?.dispose());
176
+ </script>
177
+
178
+ <template>
179
+ <ConsentRoot />
180
+ <main>Your application</main>
181
+ </template>
182
+ ```
183
+
184
+ Keep your existing page content and preferences link. The plugin still owns
185
+ the kernel and persistence; this component owns only the vendor loader.
186
+ Do not register the same scripts in plugin configuration as well. See the
187
+ [Vue quickstart](https://c15t.com/docs/frameworks/vue/quickstart).
188
+
189
+ **Astro**
190
+
191
+ Point the existing Astro integration at a client module. Keep its `mode`,
192
+ `ui` and framework integration from the [Astro quickstart](https://c15t.com/docs/frameworks/astro/quickstart).
193
+ Import `fileURLToPath` in your Astro configuration:
194
+
195
+ ```js title="astro.config.mjs"
196
+ import { fileURLToPath } from 'node:url';
197
+ ```
198
+
199
+ Add this option to the existing `c15t({ ... })` call. Resolve the path from
200
+ the configuration file because Astro injects the import into a virtual module:
201
+
202
+ ```js
203
+ clientEntrypoint: fileURLToPath(new URL('./src/c15t.client.ts', import.meta.url)),
204
+ ```
205
+
206
+ Export the scripts from that module:
207
+
208
+ ```ts title="src/c15t.client.ts"
209
+ import type { C15tClientOptionsExtension } from '@c15t/astro';
210
+ import { scripts } from './consent-scripts';
211
+
212
+ export default { scripts } satisfies C15tClientOptionsExtension;
213
+ ```
214
+
215
+ The integration passes this extension to its shared browser runtime. Vendor
216
+ helpers contain callbacks, so do not put them in the serialized `scripts`
217
+ option in `astro.config.mjs`. Keep one runtime across consent islands and
218
+ `ClientRouter` navigation.
219
+
220
+ **Svelte**
221
+
222
+ Import the scripts in the component that owns your existing provider and
223
+ pass them as a top-level prop:
224
+
225
+ ```svelte title="src/App.svelte"
226
+ <script lang="ts">
227
+ import { ConsentManagerProvider, hosted } from '@c15t/svelte';
228
+ import { scripts } from './consent-scripts';
229
+
230
+ const backendURL = import.meta.env.VITE_C15T_BACKEND_URL;
231
+ if (!backendURL) throw new Error('Set VITE_C15T_BACKEND_URL');
232
+ const mode = hosted({ url: backendURL });
233
+ </script>
234
+
235
+ <ConsentManagerProvider {mode} {scripts}>
236
+ <!-- Keep your application, consent UI and preferences link here. -->
237
+ </ConsentManagerProvider>
238
+ ```
239
+
240
+ Retain the styles and consent UI from the [Svelte quickstart](https://c15t.com/docs/frameworks/svelte/quickstart).
241
+ The provider owns the loader and disposes it on unmount.
242
+
243
+ **SvelteKit**
244
+
245
+ Add the scripts to the existing root layout provider. Keep the server load
246
+ and its serializable prefetch data from the [SvelteKit quickstart](https://c15t.com/docs/frameworks/sveltekit/quickstart).
247
+
248
+ ```svelte title="src/routes/+layout.svelte"
249
+ <script lang="ts">
250
+ import { ConsentManagerProvider, hosted } from '@c15t/svelte';
251
+ import { scripts } from '../consent-scripts';
252
+
253
+ let { children, data } = $props();
254
+ const mode = hosted({ url: data.backendURL });
255
+ </script>
256
+
257
+ <ConsentManagerProvider {mode} {scripts} prefetch={data.prefetch}>
258
+ {@render children()}
259
+ <!-- Keep your consent UI and preferences link here. -->
260
+ </ConsentManagerProvider>
261
+ ```
262
+
263
+ Import vendor helpers in the layout component, not in `+layout.server.ts`.
264
+ For static hosting, keep your browser-only `mode` setup and omit request
265
+ prefetch; the `scripts` prop stays the same. If you pass an externally owned
266
+ `runtime` to the provider, register scripts when creating that runtime instead.
267
+
268
+ **JavaScript**
269
+
270
+ Attach the loader to your existing kernel before calling
271
+ `kernel.commands.init()`:
272
+
273
+ ```ts
274
+ import { createScriptLoader } from 'c15t/modules/script-loader';
275
+ import { scripts } from './consent-scripts';
276
+
277
+ const loader = createScriptLoader({ kernel, scripts });
278
+ ```
279
+
280
+ Call `loader.dispose()` when that application instance is destroyed.
281
+ `kernel` is the hosted kernel from your quickstart. A provider-owned kernel
282
+ already has a loader; do not attach a second one. See
283
+ [JavaScript script loading](../frameworks/javascript/script-loader.md).
284
+
285
+ ## Choose loading and capture behavior separately
286
+
287
+ | `loadMode` | SDK loading | Consent handling |
288
+ | ------------------------------ | ------------------------------------- | --------------------------------------------------------------- |
289
+ | `'after-consent'` | Waits for measurement permission | Calls PostHog opt-in and opt-out APIs after load and on changes |
290
+ | `'always'`, the helper default | Loads even while permission is denied | Calls the same consent APIs |
291
+ | `'disabled'` | Does not load PostHog | Does not synchronize consent with an SDK loaded elsewhere |
292
+
293
+ The helper defaults `initOptions.cookieless_mode` to `'on_reject'`. In that
294
+ mode, PostHog can continue cookieless capture after denial. It requires the
295
+ project's cookieless server hash setting. See
296
+ [PostHog's cookieless guide](https://posthog.com/tutorials/cookieless-tracking).
297
+
298
+ The example overrides this with `'never'` so opting out is not a switch to
299
+ cookieless capture. Loading after consent only controls the initial request;
300
+ for later revocation, verify PostHog's opt-out behavior and stop application
301
+ capture calls too. SDK code that already executed cannot be undone by removing
302
+ its script element.
303
+
304
+ ## Configure hosts and initialization
305
+
306
+ | Option | Behavior |
307
+ | ------------------------------ | ---------------------------------------------------------------------------------------- |
308
+ | `id` | Browser project token. |
309
+ | `region` | `'eu'` by default; use `'us'` for a US project. |
310
+ | `apiHost / uiHost / scriptUrl` | Explicit overrides for proxy or self-hosted PostHog deployments. Keep all hosts aligned. |
311
+ | `loadMode` | Defaults to `'always'`; choose deliberately. |
312
+ | `initOptions` | Additional serializable SDK options, including the cookieless override. |
313
+
314
+ The helper applies the resolved API and UI hosts after `initOptions`; use the
315
+ top-level host fields to change them. A global `posthog` queue may exist before
316
+ the SDK is ready. Neither API presence nor SDK readiness is a consent grant.
317
+
318
+ ## Keep application events behind permission
319
+
320
+ With the script helper registered, a React client component can guard an event
321
+ using the current effective permission:
322
+
323
+ ```tsx title="src/signup-event.tsx"
324
+ 'use client';
325
+
326
+ import { useConsent } from 'c15t/react';
327
+
328
+ export function SignupEvent() {
329
+ const allowed = useConsent('measurement');
330
+
331
+ return (
332
+ <button
333
+ type="button"
334
+ onClick={() => {
335
+ if (allowed) window.posthog?.capture('signup_started');
336
+ }}
337
+ >
338
+ Start signup
339
+ </button>
340
+ );
341
+ }
342
+ ```
343
+
344
+ This is an event-call example, not a signup implementation. Next.js client
345
+ components can import `useConsent` from `c15t/next`.
346
+
347
+ ## Use an existing PostHog SDK
348
+
349
+ If your app already initializes `posthog-js`, keep that SDK owner and attach a
350
+ callback-only script instead of the loading helper. Initialize your SDK with
351
+ `opt_out_capturing_by_default: true` and `cookieless_mode: 'never'` before
352
+ mounting c15t when denied permission must stop capture.
353
+
354
+ ```ts title="src/posthog-consent.ts"
355
+ import type { Script, ScriptCallbackInfo } from 'c15t/modules/script-loader';
356
+
357
+ type PostHogConsentApi = {
358
+ opt_in_capturing: () => unknown;
359
+ opt_out_capturing: () => unknown;
360
+ };
361
+
362
+ export function posthogConsent(instance: PostHogConsentApi): Script {
363
+ const sync = ({ hasConsent }: ScriptCallbackInfo) => {
364
+ if (hasConsent) instance.opt_in_capturing();
365
+ else instance.opt_out_capturing();
366
+ };
367
+
368
+ return {
369
+ id: 'posthog-sdk-consent',
370
+ category: 'measurement',
371
+ callbackOnly: true,
372
+ alwaysLoad: true,
373
+ onBeforeLoad: sync,
374
+ onConsentChange: sync,
375
+ };
376
+ }
377
+ ```
378
+
379
+ Pass `posthogConsent(posthog)` in the existing provider's `scripts` array, using
380
+ your initialized SDK instance. The callback-only entry synchronizes initial
381
+ and changed effective permissions without loading a second SDK. It does not
382
+ block the SDK import or its initial request. `loadMode: 'disabled'` on the
383
+ loading helper is not a substitute, because it performs no synchronization.
384
+
385
+ Keep c15t as the source of truth for the banner and saved choices. Effective
386
+ permission can come from policy defaults; a synchronization callback is not
387
+ proof that the visitor explicitly accepted. Do not reuse v2
388
+ `getOrCreateConsentRuntime` or `onBannerFetched` examples with v3.
389
+
390
+ ## Verify the integration
391
+
392
+ With the example above, a fresh opt-in session should make no PostHog SDK
393
+ request until measurement is allowed. Grant, capture one test event, revoke,
394
+ and confirm later application calls stop. Repeat with persisted consent and
395
+ client navigation. If you choose cookieless capture, verify that behavior
396
+ explicitly in the project rather than expecting silence after denial. See
397
+ [consent verification](https://c15t.com/docs/guides/verify-consent).
@@ -0,0 +1,291 @@
1
+ ---
2
+ title: Promptwatch
3
+ description: Configure Promptwatch with c15t v3, understand measurement
4
+ permission and verify loading and revocation.
5
+ group: integrations
6
+ ---
7
+
8
+ ## Configure Promptwatch
9
+
10
+ Use the project ID from your Promptwatch dashboard. The helper installs the browser attribution client with `data-project-id`.
11
+
12
+ | Package manager | Command |
13
+ | :-------------- | :-------------------------- |
14
+ | npm | `npm install @c15t/scripts` |
15
+ | pnpm | `pnpm add @c15t/scripts` |
16
+ | yarn | `yarn add @c15t/scripts` |
17
+ | bun | `bun add @c15t/scripts` |
18
+
19
+ ```ts title="src/consent-scripts.ts"
20
+ import { promptwatch } from '@c15t/scripts/promptwatch';
21
+
22
+ export const scripts = [promptwatch({ projectId: 'YOUR_PROJECT_ID' })];
23
+ ```
24
+
25
+ ## Register the scripts
26
+
27
+ Complete your [framework quickstart](https://c15t.com/docs/frameworks) first. Keep its Inth
28
+ endpoint, policy, styles and consent UI. Remove the vendor's original script,
29
+ SDK initializer or tag-manager entry so c15t owns loading once.
30
+
31
+ The `scripts` export in `src/consent-scripts.ts` is a configuration, not an
32
+ initializer. Add it to your existing consent owner using the registration point
33
+ below. These are partial edits to that owner, not additional providers.
34
+
35
+ **Next.js**
36
+
37
+ Import the configuration into the client boundary from your router guide:
38
+
39
+ ```ts
40
+ import { ConsentRoot } from 'c15t/next';
41
+ import { scripts } from './consent-scripts';
42
+ ```
43
+
44
+ Keep the server-resolved `state` and shared `consentConfig` from your
45
+ router guide. Its manifest, init and save URLs stay in effect. Add
46
+ `scripts` as a top-level prop on the existing root:
47
+
48
+ ```tsx
49
+ <ConsentRoot state={state} config={consentConfig} scripts={scripts}>
50
+ {children}
51
+ </ConsentRoot>
52
+ ```
53
+
54
+ For a Pages Router or static-export setup using `ConsentProvider`, add
55
+ `scripts` to its existing `options` instead. Keep the router-specific setup
56
+ from [Next.js script loading](https://c15t.com/docs/frameworks/next/script-loader).
57
+
58
+ **TanStack Start**
59
+
60
+ In your existing root route component, import the scripts alongside
61
+ `ConsentRoot`. Keep the server loader from the [TanStack Start quickstart](https://c15t.com/docs/frameworks/tanstack-start/quickstart).
62
+
63
+ ```tsx
64
+ import { Outlet } from '@tanstack/react-router';
65
+ import { ConsentRoot } from 'c15t/tanstack-start';
66
+ import { scripts } from '../consent-scripts';
67
+
68
+ function Root() {
69
+ const state = Route.useLoaderData();
70
+ return (
71
+ <ConsentRoot state={state} backendURL={backendURL} initRoute={false} scripts={scripts}>
72
+ <Outlet />
73
+ {/* Keep your consent banner, dialog and preferences link here. */}
74
+ </ConsentRoot>
75
+ );
76
+ }
77
+ ```
78
+
79
+ This edits the existing route. `Route` and `backendURL` come from its setup;
80
+ keep the document shell and head components if they are part of your root.
81
+ `initRoute={false}` keeps the quickstart's direct-backend initialization.
82
+ If your app mounts a consent server route, retain its existing `initRoute`
83
+ instead. Do not return script callbacks from a server function or route loader.
84
+
85
+ **React**
86
+
87
+ Import the scripts into your existing provider component:
88
+
89
+ ```ts
90
+ import { ConsentProvider } from 'c15t/react';
91
+ import { scripts } from './consent-scripts';
92
+ ```
93
+
94
+ Keep the existing options and add `scripts`:
95
+
96
+ ```tsx
97
+ <ConsentProvider options={{ ...consentOptions, scripts }}>
98
+ {children}
99
+ </ConsentProvider>
100
+ ```
101
+
102
+ Here `consentOptions` is your existing configuration, including
103
+ `mode: hosted({ url: backendURL })`. Keep the banner, dialog and preferences
104
+ link inside the provider. See [React script loading](https://c15t.com/docs/frameworks/react/script-loader).
105
+
106
+ **Nuxt**
107
+
108
+ Attach one loader from the root `app.vue`, after the Nuxt module has
109
+ started its browser runtime. This keeps vendor callbacks in application code rather
110
+ than serialized `nuxt.config.ts` runtime configuration.
111
+
112
+ ```vue title="app/app.vue"
113
+ <script setup lang="ts">
114
+ import { onUnmounted } from 'vue';
115
+ import { createScriptLoader } from 'c15t/modules/script-loader';
116
+ import { scripts } from '../src/consent-scripts';
117
+
118
+ const nuxtApp = useNuxtApp();
119
+ const kernel = useConsentKernel();
120
+ let loader: ReturnType<typeof createScriptLoader> | undefined;
121
+
122
+ const removeMountedHook = nuxtApp.hook('app:mounted', () => {
123
+ loader = createScriptLoader({ kernel, scripts });
124
+ });
125
+ onUnmounted(() => {
126
+ removeMountedHook();
127
+ loader?.dispose();
128
+ });
129
+ </script>
130
+
131
+ <template>
132
+ <ConsentRoot />
133
+ <NuxtPage />
134
+ </template>
135
+ ```
136
+
137
+ Merge the setup code into your root and retain its footer and preferences
138
+ link. `useConsentKernel` is auto-imported by the c15t Nuxt module. Adjust the
139
+ relative script import if your `app.vue` is at the project root. This loader
140
+ waits until the module has applied browser persistence and privacy signals,
141
+ then reads the current snapshot and observes future changes. Do not also register these scripts
142
+ in another loader. See the [Nuxt quickstart](https://c15t.com/docs/frameworks/nuxt/quickstart).
143
+
144
+ **Vue**
145
+
146
+ Use the kernel already provided by the Vue plugin. Merge this setup into
147
+ `App.vue`, whose lifetime covers the application:
148
+
149
+ ```vue title="src/App.vue"
150
+ <script setup lang="ts">
151
+ import { onMounted, onUnmounted } from 'vue';
152
+ import { createScriptLoader } from 'c15t/modules/script-loader';
153
+ import { useConsentKernel } from 'c15t/vue/vue-plugin';
154
+ import ConsentRoot from 'c15t/vue/consent-root';
155
+ import { scripts } from './consent-scripts';
156
+
157
+ const kernel = useConsentKernel();
158
+ let loader: ReturnType<typeof createScriptLoader> | undefined;
159
+
160
+ onMounted(() => {
161
+ loader = createScriptLoader({ kernel, scripts });
162
+ });
163
+ onUnmounted(() => loader?.dispose());
164
+ </script>
165
+
166
+ <template>
167
+ <ConsentRoot />
168
+ <main>Your application</main>
169
+ </template>
170
+ ```
171
+
172
+ Keep your existing page content and preferences link. The plugin still owns
173
+ the kernel and persistence; this component owns only the vendor loader.
174
+ Do not register the same scripts in plugin configuration as well. See the
175
+ [Vue quickstart](https://c15t.com/docs/frameworks/vue/quickstart).
176
+
177
+ **Astro**
178
+
179
+ Point the existing Astro integration at a client module. Keep its `mode`,
180
+ `ui` and framework integration from the [Astro quickstart](https://c15t.com/docs/frameworks/astro/quickstart).
181
+ Import `fileURLToPath` in your Astro configuration:
182
+
183
+ ```js title="astro.config.mjs"
184
+ import { fileURLToPath } from 'node:url';
185
+ ```
186
+
187
+ Add this option to the existing `c15t({ ... })` call. Resolve the path from
188
+ the configuration file because Astro injects the import into a virtual module:
189
+
190
+ ```js
191
+ clientEntrypoint: fileURLToPath(new URL('./src/c15t.client.ts', import.meta.url)),
192
+ ```
193
+
194
+ Export the scripts from that module:
195
+
196
+ ```ts title="src/c15t.client.ts"
197
+ import type { C15tClientOptionsExtension } from '@c15t/astro';
198
+ import { scripts } from './consent-scripts';
199
+
200
+ export default { scripts } satisfies C15tClientOptionsExtension;
201
+ ```
202
+
203
+ The integration passes this extension to its shared browser runtime. Vendor
204
+ helpers contain callbacks, so do not put them in the serialized `scripts`
205
+ option in `astro.config.mjs`. Keep one runtime across consent islands and
206
+ `ClientRouter` navigation.
207
+
208
+ **Svelte**
209
+
210
+ Import the scripts in the component that owns your existing provider and
211
+ pass them as a top-level prop:
212
+
213
+ ```svelte title="src/App.svelte"
214
+ <script lang="ts">
215
+ import { ConsentManagerProvider, hosted } from '@c15t/svelte';
216
+ import { scripts } from './consent-scripts';
217
+
218
+ const backendURL = import.meta.env.VITE_C15T_BACKEND_URL;
219
+ if (!backendURL) throw new Error('Set VITE_C15T_BACKEND_URL');
220
+ const mode = hosted({ url: backendURL });
221
+ </script>
222
+
223
+ <ConsentManagerProvider {mode} {scripts}>
224
+ <!-- Keep your application, consent UI and preferences link here. -->
225
+ </ConsentManagerProvider>
226
+ ```
227
+
228
+ Retain the styles and consent UI from the [Svelte quickstart](https://c15t.com/docs/frameworks/svelte/quickstart).
229
+ The provider owns the loader and disposes it on unmount.
230
+
231
+ **SvelteKit**
232
+
233
+ Add the scripts to the existing root layout provider. Keep the server load
234
+ and its serializable prefetch data from the [SvelteKit quickstart](https://c15t.com/docs/frameworks/sveltekit/quickstart).
235
+
236
+ ```svelte title="src/routes/+layout.svelte"
237
+ <script lang="ts">
238
+ import { ConsentManagerProvider, hosted } from '@c15t/svelte';
239
+ import { scripts } from '../consent-scripts';
240
+
241
+ let { children, data } = $props();
242
+ const mode = hosted({ url: data.backendURL });
243
+ </script>
244
+
245
+ <ConsentManagerProvider {mode} {scripts} prefetch={data.prefetch}>
246
+ {@render children()}
247
+ <!-- Keep your consent UI and preferences link here. -->
248
+ </ConsentManagerProvider>
249
+ ```
250
+
251
+ Import vendor helpers in the layout component, not in `+layout.server.ts`.
252
+ For static hosting, keep your browser-only `mode` setup and omit request
253
+ prefetch; the `scripts` prop stays the same. If you pass an externally owned
254
+ `runtime` to the provider, register scripts when creating that runtime instead.
255
+
256
+ **JavaScript**
257
+
258
+ Attach the loader to your existing kernel before calling
259
+ `kernel.commands.init()`:
260
+
261
+ ```ts
262
+ import { createScriptLoader } from 'c15t/modules/script-loader';
263
+ import { scripts } from './consent-scripts';
264
+
265
+ const loader = createScriptLoader({ kernel, scripts });
266
+ ```
267
+
268
+ Call `loader.dispose()` when that application instance is destroyed.
269
+ `kernel` is the hosted kernel from your quickstart. A provider-owned kernel
270
+ already has a loader; do not attach a second one. See
271
+ [JavaScript script loading](../frameworks/javascript/script-loader.md).
272
+
273
+ ## Options
274
+
275
+ | Option | Behavior |
276
+ | ----------- | -------------------------------------------------------------- |
277
+ | `projectId` | Required non-empty project ID. |
278
+ | `scriptUrl` | Defaults to `https://ingest.promptwatch.com/js/client.min.js`. |
279
+
280
+ ## Consent behavior
281
+
282
+ The client waits for measurement permission. This browser helper does not govern a separate server-side Promptwatch integration and has no vendor shutdown callback.
283
+
284
+ ## Verify the integration
285
+
286
+ Confirm the project attribute and browser attribution requests. Verify a later denial separately from any server-side event collection your application performs.
287
+
288
+ Use a fresh session with an opt-in policy to check initial denial. Then grant
289
+ `measurement`, revoke it, and reload. Inspect both network requests and future
290
+ application events. Removing a script cannot undo code or requests that already
291
+ ran. Follow the [consent verification guide](https://c15t.com/docs/guides/verify-consent).