@c15t/react 3.0.0-alpha.1 → 3.0.0-alpha.10

package/docs/integrations/overview.md

@@ -1,31 +1,31 @@
 ---
-title: Overview
+title: Integrations
 description: Find all c15t integrations for analytics, tag managers,
-  advertising, chat and embedded content.
+  advertising, email and SMS, chat and embedded content.
 group: integrations
 ---
 
 ## Choose an integration
 
-Use the vendor helper from `@c15t/scripts` with your existing c15t provider or
-script loader. Every helper returns a script configuration; importing one does
-not install the vendor. Start with your [framework quickstart](https://c15t.com/docs/frameworks)
-to connect Inth and render consent UI, then follow the vendor guide.
+Each vendor helper in `@c15t/integrations` returns a script configuration that you
+register with your c15t provider. Importing a helper installs nothing on its
+own. Set up consent with your [framework quickstart](https://v3.c15t.com/docs/frameworks) first,
+then follow the vendor guide.
 
-| Package manager | Command                     |
-| :-------------- | :-------------------------- |
-| npm             | `npm install @c15t/scripts` |
-| pnpm            | `pnpm add @c15t/scripts`    |
-| yarn            | `yarn add @c15t/scripts`    |
-| bun             | `bun add @c15t/scripts`     |
+| Package manager | Command                                |
+| :-------------- | :------------------------------------- |
+| npm             | `npm install @c15t/integrations@alpha` |
+| pnpm            | `pnpm add @c15t/integrations@alpha`    |
+| yarn            | `yarn add @c15t/integrations@alpha`    |
+| bun             | `bun add @c15t/integrations@alpha`     |
 
-`@c15t/scripts` is a separate add-on. Keep the main `c15t` package for imports
-such as `c15t/react` and `c15t/next`.
+`@c15t/integrations` is a separate package. Keep importing c15t itself from `c15t`,
+for example `c15t/react` or `c15t/next`.
 
-Browse integrations by service type below. The tables distinguish helpers that
-wait for permission from helpers
-that load immediately and send consent signals. Read the vendor's revocation
-behavior before choosing either approach.
+The Loading behavior column shows when each helper requests the vendor. Most
+wait for the category to be allowed. A few load on every page and pass the
+permission to the vendor's own consent API, so the browser contacts the vendor
+before a choice.
 
 ## Embeds
 
@@ -34,78 +34,147 @@ behavior before choosing either approach.
 | [Google Maps](./google-maps.md) | Framework-specific consent-gated map iframe   | Iframe mounts only while the chosen permission is allowed |
 | [YouTube](./youtube.md)         | Framework-specific consent-gated video iframe | Iframe mounts only while the chosen permission is allowed |
 
-Both guides include all nine framework examples. React and Svelte use `Frame`;
+Both guides include all nine framework examples. React and Svelte use `ConsentGate`;
 Vue conditionally renders the iframe, and Astro and JavaScript use the existing
-kernel to control its DOM lifecycle. Embeds do not require `@c15t/scripts`.
+kernel to control its DOM lifecycle. Embeds do not require `@c15t/integrations`.
 
 ## Tag managers
 
-| Integration                                   | Helper             | Category    | Loading behavior                     |
-| --------------------------------------------- | ------------------ | ----------- | ------------------------------------ |
-| [Google Tag Manager](./google-tag-manager.md) | `googleTagManager` | `necessary` | Always loads; signals Google consent |
+| Integration                                   | Helper             | Category                                             | Loading behavior                                                                                     |
+| --------------------------------------------- | ------------------ | ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| [Cloudflare Zaraz](./cloudflare-zaraz.md)     | `cloudflareZaraz`  | `necessary`                                          | Always runs; syncs purposes, Zaraz runs the tools                                                    |
+| [Google Tag Manager](./google-tag-manager.md) | `googleTagManager` | `necessary`; `measurement` or `marketing` when gated | Always loads and signals Google consent by default; `loadMode: 'after-consent'` waits for permission |
 
 ## Analytics
 
-| Integration                                               | Helper                   | Category                   | Loading behavior                                         |
-| --------------------------------------------------------- | ------------------------ | -------------------------- | -------------------------------------------------------- |
-| [Google Tag](./google-tag.md)                             | `gtag`                   | `measurement or marketing` | Always loads; signals Google consent                     |
-| [Ahrefs Analytics](./ahrefs-analytics.md)                 | `ahrefsAnalytics`        | `measurement`              | Waits for effective permission                           |
-| [Adobe Analytics](./adobe-analytics.md)                   | `adobeAnalytics`         | `measurement`              | Waits for effective permission                           |
-| [Amplitude](./amplitude.md)                               | `amplitude`              | `measurement`              | Waits for effective permission                           |
-| [Cloudflare Web Analytics](./cloudflare-web-analytics.md) | `cloudflareWebAnalytics` | `measurement`              | Waits for effective permission                           |
-| [Clearbit](./clearbit.md)                                 | `clearbit`               | `marketing`                | Waits for effective permission                           |
-| [Microsoft Clarity](./microsoft-clarity.md)               | `clarity`                | `measurement`              | Gated initially; retains SDK and signals storage consent |
-| [Databuddy](./databuddy.md)                               | `databuddy`              | `measurement`              | Always loads; switches SDK configuration                 |
-| [Fathom Analytics](./fathom-analytics.md)                 | `fathomAnalytics`        | `measurement`              | Waits for effective permission                           |
-| [Heap](./heap.md)                                         | `heap`                   | `measurement`              | Waits for effective permission                           |
-| [Matomo Analytics](./matomo-analytics.md)                 | `matomoAnalytics`        | `measurement`              | Gated by default; optional consent mode                  |
-| [Mixpanel](./mixpanel-analytics.md)                       | `mixpanelAnalytics`      | `measurement`              | Always loads; calls opt-in and opt-out APIs              |
-| [Hotjar](./hotjar.md)                                     | `hotjar`                 | `measurement`              | Waits for effective permission                           |
-| [Hightouch](./hightouch.md)                               | `hightouch`              | `measurement`              | Waits for effective permission                           |
-| [LogRocket](./logrocket.md)                               | `logRocket`              | `measurement`              | Waits for effective permission                           |
-| [Plausible Analytics](./plausible-analytics.md)           | `plausibleAnalytics`     | `measurement`              | Waits for effective permission                           |
-| [PostHog](./posthog.md)                                   | `posthog`                | `measurement`              | Configurable; default always loads                       |
-| [Promptwatch](./promptwatch.md)                           | `promptwatch`            | `measurement`              | Waits for effective permission                           |
-| [Pirsch](./pirsch.md)                                     | `pirsch`                 | `measurement`              | Waits for effective permission                           |
-| [RudderStack](./rudderstack.md)                           | `rudderstack`            | `measurement`              | Gated by default; optional destination consent mode      |
-| [Segment](./segment.md)                                   | `segment`                | `measurement`              | Waits for effective permission                           |
-| [Rybbit Analytics](./rybbit-analytics.md)                 | `rybbitAnalytics`        | `measurement`              | Waits for effective permission                           |
-| [Umami Analytics](./umami-analytics.md)                   | `umamiAnalytics`         | `measurement`              | Waits for effective permission                           |
-| [Vercel Analytics](./vercel-analytics.md)                 | `vercelAnalytics`        | `measurement`              | Waits for effective permission                           |
-
-## Functionality
-
-| Integration               | Helper     | Category        | Loading behavior               |
-| ------------------------- | ---------- | --------------- | ------------------------------ |
-| [Crisp](./crisp.md)       | `crisp`    | `functionality` | Waits for effective permission |
-| [Intercom](./intercom.md) | `intercom` | `functionality` | Waits for effective permission |
+| Integration                                               | Helper                   | Category                                        | Loading behavior                                                                                     |
+| --------------------------------------------------------- | ------------------------ | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| [Google Tag](./google-tag.md)                             | `gtag`                   | `measurement` or `marketing`                    | Always loads and signals Google consent by default; `loadMode: 'after-consent'` waits for permission |
+| [Ahrefs Analytics](./ahrefs-analytics.md)                 | `ahrefsAnalytics`        | `measurement`                                   | Waits for effective permission                                                                       |
+| [Adobe Analytics](./adobe-analytics.md)                   | `adobeAnalytics`         | `measurement`                                   | Waits for effective permission                                                                       |
+| [Amplitude](./amplitude.md)                               | `amplitude`              | `measurement`                                   | Waits for effective permission; opts the SDK out on revocation                                       |
+| [Cloudflare Web Analytics](./cloudflare-web-analytics.md) | `cloudflareWebAnalytics` | `measurement`                                   | Waits for effective permission                                                                       |
+| [Clearbit](./clearbit.md)                                 | `clearbit`               | `marketing`                                     | Waits for effective permission                                                                       |
+| [Microsoft Clarity](./microsoft-clarity.md)               | `clarity`                | `measurement`                                   | Gated initially; keeps the SDK and signals storage consent                                           |
+| [Databuddy](./databuddy.md)                               | `databuddy`              | `measurement`                                   | Always loads; switches the SDK's disabled flag                                                       |
+| [Fathom Analytics](./fathom-analytics.md)                 | `fathomAnalytics`        | `measurement`                                   | Waits for effective permission                                                                       |
+| [Heap](./heap.md)                                         | `heap`                   | `measurement`                                   | Waits for effective permission                                                                       |
+| [Matomo Analytics](./matomo-analytics.md)                 | `matomoAnalytics`        | `measurement`                                   | Gated by default; optional consent mode                                                              |
+| [Mixpanel](./mixpanel-analytics.md)                       | `mixpanelAnalytics`      | `measurement`                                   | Always loads; calls opt-in and opt-out APIs                                                          |
+| [OneDollarStats](./one-dollar-stats.md)                   | `oneDollarStats`         | `measurement`                                   | Waits for effective permission                                                                       |
+| [Hotjar](./hotjar.md)                                     | `hotjar`                 | `measurement`                                   | Waits for effective permission                                                                       |
+| [Hightouch](./hightouch.md)                               | `hightouch`              | `measurement`                                   | Waits for effective permission                                                                       |
+| [LogRocket](./logrocket.md)                               | `logRocket`              | `measurement`                                   | Waits for effective permission                                                                       |
+| [Plausible Analytics](./plausible-analytics.md)           | `plausibleAnalytics`     | `measurement`                                   | Waits for effective permission                                                                       |
+| [PostHog](./posthog.md)                                   | `posthog`                | `measurement`                                   | Configurable; defaults to always loading and calling opt-in and opt-out APIs                         |
+| [Promptwatch](./promptwatch.md)                           | `promptwatch`            | `measurement`                                   | Waits for effective permission                                                                       |
+| [Pirsch](./pirsch.md)                                     | `pirsch`                 | `measurement`                                   | Waits for effective permission                                                                       |
+| [RudderStack](./rudderstack.md)                           | `rudderstack`            | `measurement`                                   | Gated by default; optional destination consent mode                                                  |
+| [Segment](./segment.md)                                   | `segment`                | `measurement`                                   | Waits for effective permission                                                                       |
+| [Sentry](./sentry.md)                                     | `sentry`                 | `necessary`; Replay and user data `measurement` | Configurable; defaults to always loading and loads Replay after permission                           |
+| [Rybbit Analytics](./rybbit-analytics.md)                 | `rybbitAnalytics`        | `measurement`                                   | Waits for effective permission                                                                       |
+| [Umami Analytics](./umami-analytics.md)                   | `umamiAnalytics`         | `measurement`                                   | Waits for effective permission                                                                       |
+| [Vercel Analytics](./vercel-analytics.md)                 | `vercelAnalytics`        | `measurement`                                   | Waits for effective permission                                                                       |
+
+## Chat and support
+
+| Integration                   | Helper      | Category        | Loading behavior               |
+| ----------------------------- | ----------- | --------------- | ------------------------------ |
+| [Crisp](./crisp.md)           | `crisp`     | `functionality` | Waits for effective permission |
+| [Front Chat](./front-chat.md) | `frontChat` | `functionality` | Waits for effective permission |
+| [Intercom](./intercom.md)     | `intercom`  | `functionality` | Waits for effective permission |
+
+## Email and SMS
+
+| Integration             | Helper    | Category                      | Loading behavior                                           |
+| ----------------------- | --------- | ----------------------------- | ---------------------------------------------------------- |
+| [Klaviyo](./klaviyo.md) | `klaviyo` | `marketing` and `measurement` | Waits for both; optional forms-only mode needs `marketing` |
 
 ## Ads and pixels
 
-| Integration                                    | Helper             | Category    | Loading behavior                                  |
-| ---------------------------------------------- | ------------------ | ----------- | ------------------------------------------------- |
-| [Meta Pixel](./meta-pixel.md)                  | `metaPixel`        | `marketing` | Waits for effective permission                    |
-| [OpenAI Pixel](./openai-pixel.md)              | `openaiPixel`      | `marketing` | Gated initially; retains SDK and signals consent  |
-| [Reddit Pixel](./reddit-pixel.md)              | `redditPixel`      | `marketing` | Gated initially; retains SDK and switches cookies |
-| [TikTok Pixel](./tiktok-pixel.md)              | `tiktokPixel`      | `marketing` | Gated initially; retains SDK and signals consent  |
-| [LinkedIn Insight Tag](./linkedin-insights.md) | `linkedinInsights` | `marketing` | Waits for effective permission                    |
-| [Microsoft UET](./microsoft-uet.md)            | `microsoftUet`     | `marketing` | Always loads; signals ad storage consent          |
-| [Snapchat Pixel](./snapchat-pixel.md)          | `snapchatPixel`    | `marketing` | Waits for effective permission                    |
-| [X Pixel](./x-pixel.md)                        | `xPixel`           | `marketing` | Waits for effective permission                    |
-
-## Keep one owner per vendor
-
-Remove direct snippets, tracking images, framework plugins and duplicate
-SDK initializers before adding a helper. A vendor loaded outside c15t is not
-controlled by the configuration here. Tag managers and data pipelines can load
-other destinations, which need their own consent settings.
-
-Initial loading and later event calls are separate. Some helpers keep an SDK
-loaded to send consent updates. Others remove their script element without a
-vendor stop callback. Neither approach can reverse code or requests that already
-ran. Guard application events and verify automatic tracking after revocation.
-
-Use [custom integrations](./building-integrations.md) for a service
-without a helper, or an SDK your application already owns. Follow
-[consent verification](../guides/verify-consent.md) for fresh sessions, rejection,
-acceptance, revocation and navigation.
+| Integration                                    | Helper             | Category    | Loading behavior                                                 |
+| ---------------------------------------------- | ------------------ | ----------- | ---------------------------------------------------------------- |
+| [Meta Pixel](./meta-pixel.md)                  | `metaPixel`        | `marketing` | Gated initially; keeps the SDK and signals consent               |
+| [OpenAI Pixel](./openai-pixel.md)              | `openaiPixel`      | `marketing` | Gated initially; keeps the SDK and signals consent               |
+| [Pinterest Tag](./pinterest-tag.md)            | `pinterestTag`     | `marketing` | Gated initially; keeps the tag and signals consent               |
+| [Reddit Pixel](./reddit-pixel.md)              | `redditPixel`      | `marketing` | Gated initially; keeps the pixel and toggles first-party cookies |
+| [TikTok Pixel](./tiktok-pixel.md)              | `tiktokPixel`      | `marketing` | Gated initially; keeps the SDK and signals consent               |
+| [LinkedIn Insight Tag](./linkedin-insights.md) | `linkedinInsights` | `marketing` | Waits for effective permission                                   |
+| [Microsoft UET](./microsoft-uet.md)            | `microsoftUet`     | `marketing` | Always loads; signals ad storage consent                         |
+| [Snapchat Pixel](./snapchat-pixel.md)          | `snapchatPixel`    | `marketing` | Waits for effective permission                                   |
+| [X Pixel](./x-pixel.md)                        | `xPixel`           | `marketing` | Waits for effective permission                                   |
+
+## Load each vendor once
+
+Remove the vendor's own snippet, tracking image, framework plugin or tag
+manager entry before adding its helper. c15t cannot gate a copy it did not
+load. Tag managers and data pipelines such as Segment can load further
+destinations, which need consent settings of their own.
+
+Framework packages are loaders too. To move their vendors to c15t, see
+[migrate from `@next/third-parties`](https://v3.c15t.com/docs/frameworks/next/scripts#migrate-from-nextthird-parties)
+for Next.js, and
+[migrate from `@nuxt/scripts`](https://v3.c15t.com/docs/frameworks/nuxt/scripts#migrate-from-nuxtscripts)
+or [migrate from `nuxt-gtag`](https://v3.c15t.com/docs/frameworks/nuxt/scripts#migrate-from-nuxt-gtag)
+for Nuxt.
+
+When a visitor turns off a category they had allowed, c15t reloads the page so
+that code which already ran stops. Each vendor guide lists what its helper does
+on revocation and how to check it.
+
+## Vendor switches and cookie cleanup
+
+Every helper sets a `vendor` slug, so once you declare that vendor a visitor
+can allow its category and still switch the vendor off. Gating also leaves
+behind the cookies a vendor already wrote; `clearOnRevocation` deletes them
+when their category is denied. Each framework documents both in its Scripts
+and embeds group:
+
+| Framework      | Vendor consent                                                                      | Clear on revocation                                                                           |
+| -------------- | ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| Next.js        | [Vendor consent](https://v3.c15t.com/docs/frameworks/next/vendor-consent)           | [Clear on revocation](https://v3.c15t.com/docs/frameworks/next/clear-on-revocation)           |
+| TanStack Start | [Vendor consent](https://v3.c15t.com/docs/frameworks/tanstack-start/vendor-consent) | [Clear on revocation](https://v3.c15t.com/docs/frameworks/tanstack-start/clear-on-revocation) |
+| React          | [Vendor consent](../frameworks/react/vendor-consent.md)                             | [Clear on revocation](../frameworks/react/clear-on-revocation.md)                             |
+| Nuxt           | [Vendor consent](https://v3.c15t.com/docs/frameworks/nuxt/vendor-consent)           | [Clear on revocation](https://v3.c15t.com/docs/frameworks/nuxt/clear-on-revocation)           |
+| Vue            | [Vendor consent](https://v3.c15t.com/docs/frameworks/vue/vendor-consent)            | [Clear on revocation](https://v3.c15t.com/docs/frameworks/vue/clear-on-revocation)            |
+| Astro          | [Vendor consent](https://v3.c15t.com/docs/frameworks/astro/vendor-consent)          | [Clear on revocation](https://v3.c15t.com/docs/frameworks/astro/clear-on-revocation)          |
+| Svelte         | [Vendor consent](https://v3.c15t.com/docs/frameworks/svelte/vendor-consent)         | [Clear on revocation](https://v3.c15t.com/docs/frameworks/svelte/clear-on-revocation)         |
+| SvelteKit      | [Vendor consent](https://v3.c15t.com/docs/frameworks/sveltekit/vendor-consent)      | [Clear on revocation](https://v3.c15t.com/docs/frameworks/sveltekit/clear-on-revocation)      |
+| HTML           | [Vendor consent](https://v3.c15t.com/docs/frameworks/html/vendor-consent)           | [Clear on revocation](https://v3.c15t.com/docs/frameworks/html/clear-on-revocation)           |
+| JavaScript     | [Vendor consent](https://v3.c15t.com/docs/frameworks/javascript/vendor-consent)     | [Clear on revocation](https://v3.c15t.com/docs/frameworks/javascript/clear-on-revocation)     |
+
+## Send events only to allowed integrations
+
+`createEventDispatcher` from `@c15t/integrations/events` sends one named event to
+every registered integration that has an event API and is allowed right now.
+It drops events while measurement is denied, and one vendor's error does not
+stop delivery to the others:
+
+```ts
+import { createEventDispatcher } from '@c15t/integrations/events';
+
+const events = createEventDispatcher({
+	scripts,
+	getSnapshot: () => runtime.kernel.getSnapshot(),
+	pageviews: ['segment'],
+});
+
+events.track('docs_search', { resultCount: 4 });
+events.pageview(location.pathname);
+```
+
+Pass the same `scripts` you registered and a function that returns the live
+consent snapshot. `track` supports Google Tag Manager, Google Tag, PostHog,
+Mixpanel, Segment, Hightouch, Heap, Amplitude, LogRocket, Adobe Analytics,
+Databuddy, Plausible, Fathom, Pirsch, Microsoft Clarity, Hotjar, Vercel
+Analytics, OneDollarStats, Umami, Rybbit, RudderStack and Matomo.
+`pageview` sends single-page-app page views only to the integrations named in
+`pageviews`: PostHog, Segment or Hightouch. Call it from your router's
+navigation hook. The first call records the path without sending, and repeated
+paths or hash-only changes are skipped.
+
+## Add a vendor without a helper
+
+Use [custom integrations](./building-integrations.md) for a
+vendor without a helper, or an SDK your app already loads. Test every
+integration with the [consent verification guide](../guides/verify-consent.md).

package/docs/integrations/pinterest-tag.md

@@ -0,0 +1,315 @@
+---
+title: Pinterest Tag
+description: Load the Pinterest Tag only after marketing consent with the c15t
+  pinterestTag helper, guard pintrk event calls, and check it in DevTools.
+icon: pinterest
+group: integrations
+---
+
+## Configure the Pinterest Tag
+
+Copy the numeric tag ID from Pinterest Ads Manager. Remove Pinterest's base
+code and its `<noscript>` image. The helper does not emit that image, because
+it fires without JavaScript and c15t cannot gate it.
+
+| Package manager | Command                                |
+| :-------------- | :------------------------------------- |
+| npm             | `npm install @c15t/integrations@alpha` |
+| pnpm            | `pnpm add @c15t/integrations@alpha`    |
+| yarn            | `yarn add @c15t/integrations@alpha`    |
+| bun             | `bun add @c15t/integrations@alpha`     |
+
+```ts title="src/consent-scripts.ts"
+import { pinterestTag } from '@c15t/integrations/pinterest-tag';
+
+export const scripts = [pinterestTag({ tagId: '2613654212508' })];
+```
+
+## Register the scripts
+
+Complete your [framework quickstart](https://v3.c15t.com/docs/frameworks) first. Keep its Inth
+endpoint, policy, styles and consent UI. Remove the vendor's original script,
+SDK initializer or tag-manager entry, so the vendor loads only through c15t.
+
+The vendor pages put the helper in `src/consent-scripts.ts`. If your framework
+quickstart already has a `scripts` array, such as the one in `c15t.config.ts`
+in the Next.js guide, add the helper to that array instead of creating a
+second file.
+The `scripts` export is a configuration, not an initializer. Add it to the c15t provider you already have, at the registration
+point for your framework below. These are edits to that provider, not a second
+provider.
+
+**Next.js**
+
+Add the configuration to `scripts` in `c15t.config.ts`, next to
+`next.config.ts`:
+
+```ts title="c15t.config.ts"
+import { defineConsentConfig } from 'c15t/next';
+import { scripts } from './src/consent-scripts';
+
+export default defineConsentConfig({ scripts });
+```
+
+Keep the rest of your config, such as `mode` and `routePrefix`, in the
+same call. `ConsentRoot` reads the config in the browser, so the layout
+keeps passing only `state`. App Router, Pages Router and static export all
+read the same file. See
+[Next.js scripts and embeds](https://v3.c15t.com/docs/frameworks/next/scripts).
+
+**TanStack Start**
+
+Import the configuration into your root route and pass it to the existing
+`ConsentRoot` as a top-level prop. Keep the loader from the
+[TanStack Start quickstart](https://v3.c15t.com/docs/frameworks/tanstack-start/quickstart):
+
+```tsx title="src/routes/__root.tsx"
+import { scripts } from '../consent-scripts';
+
+<ConsentRoot state={consent} scripts={scripts}>
+```
+
+Import vendor helpers in the root route module, not in a server function.
+A server function's return value must be serializable, and script
+configurations carry callbacks. See
+[TanStack Start scripts](https://v3.c15t.com/docs/frameworks/tanstack-start/scripts).
+
+**React**
+
+Add the configuration to the existing `ConsentProvider` options, next to
+`mode`:
+
+```tsx title="src/consent.tsx"
+import { scripts } from './consent-scripts';
+
+<ConsentProvider options={{ mode, scripts }}>
+```
+
+`mode` is the `manifest()` value from the
+[React quickstart](../frameworks/react/quickstart.md). Keep the banner,
+dialog and preferences link inside the provider. See
+[React scripts and embeds](../frameworks/react/scripts.md).
+
+**Nuxt**
+
+Register the scripts under the `c15t` key in `app/app.config.ts`. Adjust the
+relative import to where you created `consent-scripts.ts`:
+
+```ts title="app/app.config.ts"
+import { scripts } from '../src/consent-scripts';
+
+export default defineAppConfig({
+  c15t: { scripts },
+});
+```
+
+The Nuxt module merges this over its options in `nuxt.config.ts` and starts
+one script loader in the browser after hydration, once it has applied the
+visitor's stored choice and privacy signals. Keep `scripts` out of
+`nuxt.config.ts`, which reaches the browser as JSON and drops the vendor
+callbacks. Write the vendor IDs into `consent-scripts.ts`. See
+[Nuxt scripts and embeds](https://v3.c15t.com/docs/frameworks/nuxt/scripts).
+
+**Vue**
+
+Pass the scripts to the existing `c15tVue` plugin call in `src/main.ts`:
+
+```ts title="src/main.ts"
+import { c15tVue, manifest } from 'c15t/vue/vue-plugin';
+import { scripts } from './consent-scripts';
+
+app.use(c15tVue, {
+  mode: manifest(),
+  scripts,
+});
+```
+
+Keep your existing `mode` and other options. The plugin starts one
+script loader when the app mounts, after it has applied the visitor's stored
+choice. Do not also call `createScriptLoader` from a component. See
+[Vue scripts and embeds](https://v3.c15t.com/docs/frameworks/vue/scripts).
+
+**Astro**
+
+Add the scripts to the client entrypoint from the
+[Astro quickstart](https://v3.c15t.com/docs/frameworks/astro/quickstart), `src/c15t.client.ts`,
+which the integration finds on its own. Keep `astro.config.mjs` as it is.
+If the module already exports scripts, combine the two arrays.
+
+```ts title="src/c15t.client.ts"
+import type { C15tClientOptionsExtension } from 'c15t/astro';
+import { scripts } from './consent-scripts';
+
+export default { scripts } satisfies C15tClientOptionsExtension;
+```
+
+Vendor helpers contain callbacks, and the integration options in
+`astro.config.mjs` are serialized into the page, so do not put helpers in
+the integration's `scripts` option. The integration passes the client
+entrypoint to the one runtime every page shares, including across
+`ClientRouter` navigation.
+
+**Svelte**
+
+Import the scripts in the component that owns your existing provider and
+pass them as a top-level prop:
+
+```svelte title="src/App.svelte"
+<script lang="ts">
+  import { ConsentProvider, manifest } from '@c15t/svelte';
+  import { scripts } from './consent-scripts';
+</script>
+
+<ConsentProvider mode={manifest()} {scripts}>
+  <!-- Keep your application, consent UI and preferences link here. -->
+</ConsentProvider>
+```
+
+Retain the styles and consent UI from the [Svelte quickstart](https://v3.c15t.com/docs/frameworks/svelte/quickstart).
+The provider owns the loader and disposes it on unmount.
+
+**SvelteKit**
+
+Add the scripts to the existing `ConsentRoot` in the root layout. Keep the
+handle and the layout load from the [SvelteKit quickstart](https://v3.c15t.com/docs/frameworks/sveltekit/quickstart).
+
+```svelte title="src/routes/+layout.svelte"
+<script lang="ts">
+  import { ConsentRoot } from '@c15t/svelte';
+  import { scripts } from '../consent-scripts';
+
+  let { children, data } = $props();
+</script>
+
+<ConsentRoot state={data.consent} {scripts}>
+  {@render children()}
+  <!-- Keep your consent UI and preferences link here. -->
+</ConsentRoot>
+```
+
+Import vendor helpers in the layout component, not in `+layout.server.ts`:
+a server load cannot send functions to the browser. Prerendered, static and
+SPA-mode pages use the same `scripts` prop. If you pass an externally owned
+`runtime` to the provider, register scripts when creating that runtime instead.
+
+**HTML**
+
+The helpers in `@c15t/integrations` are ES modules that need a bundler. On a
+page that loads the c15t script tag, paste the vendor's own snippet instead
+and keep it inert until its category is allowed:
+
+```html
+<script type="text/plain" data-c15t-category="measurement">
+  // The vendor's snippet, unchanged
+</script>
+```
+
+Use the category this guide names for the vendor. c15t runs the snippet
+once that category is allowed, and reloads the page when the visitor
+withdraws it. Helper options on this page, such as `loadMode`, do not apply
+to a pasted snippet. See [HTML scripts](https://v3.c15t.com/docs/frameworks/html/scripts).
+
+**JavaScript**
+
+Pass the scripts to `init()` from `@c15t/browser`, next to your mode:
+
+```ts
+import { init, manifest } from '@c15t/browser';
+import { scripts } from './consent-scripts';
+
+const consent = init({
+  mode: manifest(),
+  scripts,
+});
+```
+
+Keep the mode from your quickstart. With
+`createConsentRuntime` from `c15t/runtime`, pass `scripts` to it instead.
+A kernel you create yourself needs a loader from
+`c15t/modules/script-loader`. Attach one loader per kernel. See
+[JavaScript scripts](https://v3.c15t.com/docs/frameworks/javascript/scripts).
+
+## Options
+
+| Option           | Default                           | Behavior                                                                                                                                                                       |
+| ---------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `tagId`          | Required                          | Tag ID passed to `pintrk('load', ...)`. The helper trims it. Empty or whitespace-only values log an error and the script does not load.                                        |
+| `loadOptions`    | None                              | Object passed as the third argument to `pintrk('load', ...)`, such as `em` or `external_id` for enhanced match. Pass user data only when your app has the permission it needs. |
+| `trackPageVisit` | `true`                            | Queues `pintrk('page')` after `load`. Set `false` to send page visits yourself.                                                                                                |
+| `scriptUrl`      | `https://s.pinimg.com/ct/core.js` | Loader URL override. A blank value falls back to the default.                                                                                                                  |
+
+## Loading and revocation
+
+`pinterestTag` uses the `marketing` category. Before marketing is allowed, c15t
+defines no `pintrk` function and loads nothing from Pinterest. When marketing
+becomes allowed, the helper queues `load`, `pintrk('setconsent', true)` and
+the page visit, then loads `core.js`.
+
+On revocation the helper keeps the tag and calls
+`pintrk('setconsent', false)`, which Pinterest documents as stopping events
+and clearing its first-party storage. If the visitor allows marketing again
+before the page reloads, the helper calls `pintrk('setconsent', true)`.
+
+## Guard your own pintrk calls
+
+The helper sends the page visit. Events your code sends, such as `checkout` or
+`lead`, need their own check. After revocation `window.pintrk` still exists, so
+its presence does not mean marketing is allowed. Check the permission first,
+then that the tag has loaded:
+
+```ts title="src/track-checkout.ts"
+export function trackCheckout(marketingAllowed: boolean, orderId: string) {
+	if (!marketingAllowed || typeof window.pintrk !== 'function') return;
+	window.pintrk('track', 'checkout', {
+		currency: 'USD',
+		event_id: orderId,
+		order_id: orderId,
+		value: 99.99,
+		line_items: [{ product_id: '1414', product_quantity: 1 }],
+	});
+}
+```
+
+Pass the current marketing permission from your framework, for example
+`useConsent('marketing')` in React. Put product details in `line_items`, and
+set `event_id` to deduplicate against the Conversions API. Pinterest reports
+conversions only for its 20 event types. It keeps other event names for
+audience targeting.
+
+`@c15t/integrations/pinterest-tag` also exports `pinterestTagEvent`, a typed wrapper
+around `pintrk('track', ...)`. It does nothing until `pintrk` exists and does
+not check permission, so apply the same guard before calling it. Its optional
+third argument receives Pinterest's `(didInit, error)` result.
+
+## Verify the Pinterest Tag
+
+After you allow marketing, `core.js` loads from `s.pinimg.com` and Pinterest
+Tag Helper shows the page visit. Trigger one guarded event and check that Tag
+Helper records it. Then revoke marketing. Until the page reloads, calling
+`trackCheckout` sends nothing.
+
+Test in a private window with an opt-in policy. Open DevTools Network, disable
+the cache and filter by the vendor's domain:
+
+1. Load the page. No request goes to the vendor before you choose.
+2. Click Reject, then reload. There is still no vendor request.
+3. Open Privacy settings and allow the helper's category. The vendor script
+   loads without a page reload.
+4. Turn the category off again and save. c15t reloads the page, and the new
+   page makes no vendor request.
+
+c15t reloads on revocation because removing a script element does not stop
+code that already ran. The vendor's listeners, timers and queued events stay
+alive until the page unloads. If you set `reloadOnConsentRevoked: false`, stop
+the vendor yourself. Register a callback-only script whose `onConsentChange`
+calls the vendor's opt-out API, as shown in
+[custom integrations](./building-integrations.md), and check the
+permission before each of your own event calls. The reload does not delete
+cookies the vendor already set; see
+[clear on revocation for your framework](./overview.md#vendor-switches-and-cookie-cleanup).
+
+The helper sets `vendor` to its script ID, so once you declare that vendor a
+visitor can turn it off inside an allowed category. See
+[vendor consent for your framework](./overview.md#vendor-switches-and-cookie-cleanup). The
+[consent verification guide](../guides/verify-consent.md) covers navigation,
+expiry and hosting checks.