@c15t/react 3.0.0-alpha.9 → 3.0.0

package/docs/integrations/vercel-speed-insights.md

@@ -0,0 +1,317 @@
+---
+title: Vercel Speed Insights
+description: Load the Vercel Speed Insights collector only after measurement
+  consent with the c15t vercelSpeedInsights helper, drop Web Vitals reports on
+  revocation, and check it in DevTools.
+seoTitle: Vercel Speed Insights cookie consent with c15t
+seoDescription: Load Vercel Speed Insights only with measurement consent. The
+  c15t vercelSpeedInsights helper drops every Web Vitals report after a
+  withdrawal.
+icon: vercel-analytics
+group: integrations
+---
+
+The c15t `vercelSpeedInsights` helper keeps the Vercel Speed Insights collector
+off the page until `measurement` has consent. The helper sends no consent signal
+to Vercel. It registers a `beforeSend` callback that drops every Web Vitals
+report while `measurement` has no consent. If the visitor withdraws consent,
+c15t removes the script element. The collector keeps running, so the callback
+drops its reports. By default, c15t also reloads the page.
+
+## Configure Vercel Speed Insights
+
+Enable Speed Insights for the project in Vercel. Remove the `SpeedInsights`
+component or `injectSpeedInsights()` call from `@vercel/speed-insights`. The
+collector starts once per page, so a copy loaded outside c15t keeps reporting
+before consent.
+
+| Package manager | Command                          |
+| :-------------- | :------------------------------- |
+| npm             | `npm install @c15t/integrations` |
+| pnpm            | `pnpm add @c15t/integrations`    |
+| yarn            | `yarn add @c15t/integrations`    |
+| bun             | `bun add @c15t/integrations`     |
+
+```ts title="src/consent-scripts.ts"
+import { vercelSpeedInsights } from '@c15t/integrations/vercel-speed-insights';
+
+export const scripts = [vercelSpeedInsights()];
+```
+
+## Register the scripts
+
+Complete your [framework quickstart](https://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://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://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://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://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://c15t.com/docs/frameworks/vue/scripts).
+
+**Astro**
+
+Add the scripts to the client entrypoint from the
+[Astro quickstart](https://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://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://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://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://c15t.com/docs/frameworks/javascript/scripts).
+
+## Options
+
+| Option       | Default                                                     | Behavior                                                                                                                                     |
+| ------------ | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `dsn`        | None                                                        | Project DSN for deployments outside Vercel, set as `data-dsn`. Reports go to Vercel's vitals endpoint for that DSN.                          |
+| `mode`       | None                                                        | `'development'` loads the debug script. `'auto'` and `'production'` load the production script. The helper does not detect your environment. |
+| `debug`      | None                                                        | `true` loads `https://va.vercel-scripts.com/v1/speed-insights/script.debug.js`, which logs reports to the console and sends nothing.         |
+| `endpoint`   | None                                                        | Custom vitals endpoint, set as `data-endpoint`.                                                                                              |
+| `scriptUrl`  | `https://va.vercel-scripts.com/v1/speed-insights/script.js` | Loader URL override, such as `/_vercel/speed-insights/script.js` on Vercel. Takes precedence over `mode` and `debug`.                        |
+| `sampleRate` | `1`                                                         | Share of page loads that report, from `0` to `1`, set as `data-sample-rate`. Other values throw a `TypeError`.                               |
+| `beforeSend` | None                                                        | Edits or drops a report while measurement is allowed. Return the event, with a changed `url` if needed, or `null` to drop it.                |
+
+The helper also sets `data-sdkn="c15t"` on the script element. Without `dsn`
+or `endpoint`, the collector posts to `/_vercel/speed-insights/vitals` on your
+own origin, which exists only on Vercel deployments with Speed Insights on.
+
+## Loading and revocation
+
+`vercelSpeedInsights` uses the `measurement` category. When measurement becomes
+allowed, the helper defines the `window.siq` queue and a `window.si` stub,
+unless they exist, registers a `beforeSend` callback and loads the script.
+
+The collector keeps its listeners after its script element is removed and
+sends queued reports on `pagehide` and navigation. On revocation the helper
+removes the script element and its `beforeSend` callback starts returning
+`null`, so no report is sent, including during the reload c15t runs on
+revocation. A later grant re-adds the script, which does not start a second
+collector, and reports resume. Reports also stop when the provider that owns
+the scripts unmounts.
+
+The collector holds one `beforeSend` callback. Pass yours through the
+`beforeSend` option. Calling `window.si('beforeSend', ...)` yourself replaces
+the helper's consent check.
+
+Reports only cover page loads after consent. The collector reads buffered
+paint and navigation timings, but interactions before consent are missed. The
+helper does not set `data-route`, so Vercel groups reports by URL rather than
+by route pattern such as `/blog/[slug]`.
+
+## Verify Vercel Speed Insights
+
+Filter DevTools Network by `speed-insights`. After you allow measurement,
+`script.js` loads from `va.vercel-scripts.com` with `data-sdkn="c15t"`. Change
+route or switch tabs, and a `POST` to `/_vercel/speed-insights/vitals` follows.
+Automated browsers that set `navigator.webdriver` load the collector but send
+nothing. With `debug` or `mode: 'development'` the reports appear in the
+console instead.
+
+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 lists its vendor by name in the preference dialog, so 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.

package/docs/integrations/x-pixel.md

@@ -2,21 +2,29 @@
 title: X Pixel
 description: Load the X Pixel only after marketing consent with the c15t xPixel
   helper, guard twq conversion events, and check it in DevTools.
+seoTitle: X Pixel cookie consent with c15t
+seoDescription: Load the X Pixel only with marketing consent. The c15t xPixel
+  helper keeps uwt.js off the page until then.
 icon: x
 group: integrations
 ---
 
+The c15t `xPixel` helper keeps the X Pixel off the page until `marketing` has
+consent. Until then, c15t does not define `twq`. X has no API to update consent,
+so the helper sends no consent signal to X. If the visitor withdraws consent,
+c15t removes the script element. By default, c15t also reloads the page.
+
 ## Configure the X Pixel
 
 Copy your X Pixel ID. The helper passes it to `twq('config', ...)`. Conversion
 event IDs, which look like `tw-xxxx-xxxx`, are separate from the pixel ID.
 
-| 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`     |
+| Package manager | Command                          |
+| :-------------- | :------------------------------- |
+| npm             | `npm install @c15t/integrations` |
+| pnpm            | `pnpm add @c15t/integrations`    |
+| yarn            | `yarn add @c15t/integrations`    |
+| bun             | `bun add @c15t/integrations`     |
 
 ```ts title="src/consent-scripts.ts"
 import { xPixel } from '@c15t/integrations/x-pixel';
@@ -31,51 +39,41 @@ 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 created a scripts file, such as `lib/scripts.ts` in the
-Next.js guide, add the helper to that array instead of creating a second file.
+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**
 
-Import the configuration into the client boundary from your router guide:
-
-```ts
-import { ConsentRoot } from 'c15t/next';
-import { scripts } from './consent-scripts';
-```
+Add the configuration to `scripts` in `c15t.config.ts`, next to
+`next.config.ts`:
 
-Keep the server-resolved `state` and shared `consentConfig` from your
-router guide. Its manifest, init and save URLs stay in effect. Add
-`scripts` as a top-level prop on the existing root:
+```ts title="c15t.config.ts"
+import { defineConsentConfig } from 'c15t/next';
+import { scripts } from './src/consent-scripts';
 
-```tsx
-<ConsentRoot state={state} config={consentConfig} scripts={scripts}>
-  {children}
-</ConsentRoot>
+export default defineConsentConfig({ scripts });
 ```
 
-App Router, Pages Router and static export all use this `ConsentRoot` in
-the `'use client'` wrapper `components/consent.tsx`. Keep `scripts` there,
-because a Server Component cannot pass script callbacks to it. See
+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://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, `backendURL` and
-`initRoute` from the [TanStack Start quickstart](https://c15t.com/docs/frameworks/tanstack-start/quickstart):
+`ConsentRoot` as a top-level prop. Keep the loader from the
+[TanStack Start quickstart](https://c15t.com/docs/frameworks/tanstack-start/quickstart):
 
 ```tsx title="src/routes/__root.tsx"
 import { scripts } from '../consent-scripts';
 
-<ConsentRoot
-  state={consent}
-  backendURL={backendURL}
-  initRoute={false}
-  scripts={scripts}
->
+<ConsentRoot state={consent} scripts={scripts}>
 ```
 
 Import vendor helpers in the root route module, not in a server function.
@@ -94,8 +92,8 @@ import { scripts } from './consent-scripts';
 <ConsentProvider options={{ mode, scripts }}>
 ```
 
-`mode` is the `hosted({ url: 'https://your-project.inth.app' })` value
-from the [React quickstart](../frameworks/react/quickstart.md). Keep the banner,
+`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).
 
@@ -124,15 +122,16 @@ callbacks. Write the vendor IDs into `consent-scripts.ts`. See
 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, {
-  backendURL: 'https://your-project.inth.app',
+  mode: manifest(),
   scripts,
 });
 ```
 
-Keep your existing backend URL and other options. The plugin starts one
+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://c15t.com/docs/frameworks/vue/scripts).
@@ -140,12 +139,11 @@ choice. Do not also call `createScriptLoader` from a component. See
 **Astro**
 
 Add the scripts to the client entrypoint from the
-[Astro quickstart](https://c15t.com/docs/frameworks/astro/quickstart), the module that the
-integration's `clientEntrypoint` option names. Keep `mode`, `ui` and the
-framework integration in `astro.config.mjs` as they are. If the module
-already exports scripts, combine the two arrays.
+[Astro quickstart](https://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/consent-client.ts"
+```ts title="src/c15t.client.ts"
 import type { C15tClientOptionsExtension } from 'c15t/astro';
 import { scripts } from './consent-scripts';
 
@@ -165,15 +163,13 @@ pass them as a top-level prop:
 
 ```svelte title="src/App.svelte"
 <script lang="ts">
-  import { ConsentManagerProvider, hosted } from '@c15t/svelte';
+  import { ConsentProvider, manifest } from '@c15t/svelte';
   import { scripts } from './consent-scripts';
-
-  const mode = hosted({ url: 'https://your-project.inth.app' });
 </script>
 
-<ConsentManagerProvider {mode} {scripts}>
+<ConsentProvider mode={manifest()} {scripts}>
   <!-- Keep your application, consent UI and preferences link here. -->
-</ConsentManagerProvider>
+</ConsentProvider>
 ```
 
 Retain the styles and consent UI from the [Svelte quickstart](https://c15t.com/docs/frameworks/svelte/quickstart).
@@ -181,22 +177,21 @@ The provider owns the loader and disposes it on unmount.
 
 **SvelteKit**
 
-Add the scripts to the existing root layout provider. Keep the server load
-and its serializable prefetch data from the [SvelteKit quickstart](https://c15t.com/docs/frameworks/sveltekit/quickstart).
+Add the scripts to the existing `ConsentRoot` in the root layout. Keep the
+handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs/frameworks/sveltekit/quickstart).
 
 ```svelte title="src/routes/+layout.svelte"
 <script lang="ts">
-  import { ConsentManagerProvider, hosted } from '@c15t/svelte';
+  import { ConsentRoot } from '@c15t/svelte';
   import { scripts } from '../consent-scripts';
 
   let { children, data } = $props();
-  const mode = hosted({ url: 'https://your-project.inth.app' });
 </script>
 
-<ConsentManagerProvider {mode} {scripts} prefetch={data.prefetch}>
+<ConsentRoot state={data.consent} {scripts}>
   {@render children()}
   <!-- Keep your consent UI and preferences link here. -->
-</ConsentManagerProvider>
+</ConsentRoot>
 ```
 
 Import vendor helpers in the layout component, not in `+layout.server.ts`:
@@ -223,20 +218,19 @@ to a pasted snippet. See [HTML scripts](https://c15t.com/docs/frameworks/html/sc
 
 **JavaScript**
 
-Pass the scripts to `init()` from `@c15t/browser`, next to your backend
-URL:
+Pass the scripts to `init()` from `@c15t/browser`, next to your mode:
 
 ```ts
-import { init } from '@c15t/browser';
+import { init, manifest } from '@c15t/browser';
 import { scripts } from './consent-scripts';
 
 const consent = init({
-  backendURL: 'https://your-project.inth.app',
+  mode: manifest(),
   scripts,
 });
 ```
 
-Keep the backend URL from your quickstart. With
+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
@@ -244,10 +238,10 @@ A kernel you create yourself needs a loader from
 
 ## Options
 
-| Option      | Default                                 | Behavior                                                                                             |
-| ----------- | --------------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| `pixelId`   | Required                                | Pixel ID passed to `twq('config', ...)`. The helper trims it. Empty or whitespace-only values throw. |
-| `scriptSrc` | `https://static.ads-twitter.com/uwt.js` | Loader URL override. A blank value falls back to the default.                                        |
+| Option      | Default                                 | Behavior                                                                                                                                 |
+| ----------- | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `pixelId`   | Required                                | Pixel ID passed to `twq('config', ...)`. The helper trims it. Empty or whitespace-only values log an error and the script does not load. |
+| `scriptSrc` | `https://static.ads-twitter.com/uwt.js` | Loader URL override. A blank value falls back to the default.                                                                            |
 
 ## Loading and revocation
 
@@ -310,8 +304,8 @@ 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
+The helper lists its vendor by name in the preference dialog, so 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.

package/docs/integrations/youtube.md

@@ -2,10 +2,22 @@
 title: YouTube
 description: Gate YouTube embeds with c15t v3 in Next.js, TanStack Start, React,
   Nuxt, Vue, Astro, Svelte, SvelteKit or JavaScript.
+seoTitle: YouTube embed cookie consent with c15t
+seoDescription: Show YouTube videos only with consent. c15t loads the video
+  iframe only when its category has consent, in Next.js, React, Vue, Svelte,
+  Astro and HTML.
 icon: youtube
 group: integrations
 ---
 
+c15t has no YouTube helper. This guide puts a YouTube iframe inside each
+framework's `ConsentGate`, or uses `data-category` with the HTML script tag. The
+example uses the `marketing` category, but you can choose a different category.
+Until that category has consent, the page has no iframe that loads a YouTube
+URL, so the browser does not connect to YouTube. If the visitor withdraws
+consent, `ConsentGate` removes the iframe. With `data-category`, c15t moves the
+URL from `src` to `data-src`.
+
 ## Configure the video
 
 Use the ID of an embeddable video and the category matching its purpose in your
@@ -112,7 +124,7 @@ on revocation. Keep your existing consent styles and preferences dialog.
 
 **Nuxt**
 
-The Nuxt module registers `ConsentGate` and `ConsentPreferencesLink`, so
+The Nuxt module registers `ConsentGate` and `ConsentDialogLink`, so
 this component imports only the embed configuration.
 
 ```vue title="app/components/ConsentEmbed.vue"
@@ -131,7 +143,7 @@ import { embedCategory, embedURL, embedTitle, embedAspectRatio } from '../../src
     />
     <template #placeholder>
       <p>Allow {{ embedCategory }} to load this content.</p>
-      <ConsentPreferencesLink>Open privacy settings</ConsentPreferencesLink>
+      <ConsentDialogLink>Open privacy settings</ConsentDialogLink>
     </template>
   </ConsentGate>
 </template>
@@ -147,8 +159,7 @@ Render this component inside the app that installed the c15t Vue plugin.
 
 ```vue title="src/ConsentEmbed.vue"
 <script setup lang="ts">
-import ConsentGate from 'c15t/vue/runtime/components/consent-gate.vue';
-import ConsentPreferencesLink from 'c15t/vue/runtime/components/consent-preferences-link.vue';
+import { ConsentDialogLink, ConsentGate } from 'c15t/vue/vue-plugin';
 import { embedCategory, embedURL, embedTitle, embedAspectRatio } from './embed-config';
 </script>
 
@@ -163,7 +174,7 @@ import { embedCategory, embedURL, embedTitle, embedAspectRatio } from './embed-c
     />
     <template #placeholder>
       <p>Allow {{ embedCategory }} to load this content.</p>
-      <ConsentPreferencesLink>Open privacy settings</ConsentPreferencesLink>
+      <ConsentDialogLink>Open privacy settings</ConsentDialogLink>
     </template>
   </ConsentGate>
 </template>
@@ -224,7 +235,7 @@ runtime for this embed.
 
 **Svelte**
 
-Render this component inside the existing `ConsentManagerProvider`.
+Render this component inside the existing `ConsentProvider`.
 The provider from your quickstart supplies its consent state.
 
 ```svelte title="src/ConsentEmbed.svelte"
@@ -253,8 +264,8 @@ iframe.
 
 **SvelteKit**
 
-Render this component inside the existing `ConsentManagerProvider`.
-Keep the SvelteKit root provider and its server prefetch unchanged.
+Render this component inside the existing `ConsentRoot`.
+Keep the SvelteKit root and its server-resolved state unchanged.
 
 ```svelte title="src/lib/ConsentEmbed.svelte"
 <script lang="ts">
@@ -283,14 +294,15 @@ iframe.
 **HTML**
 
 The c15t script tag gates iframes that name a category. Put the embed's URL
-in `data-src` instead of `src`, using the values from the configuration on
-this page:
+in `data-src` instead of `src`. Replace `EMBED_URL`, `EMBED_CATEGORY` and
+`EMBED_TITLE` with `embedURL`, `embedCategory` and `embedTitle` from the
+configuration on this page:
 
 ```html
 <iframe
-  data-src="https://www.youtube-nocookie.com/embed/VIDEO_ID?playsinline=1"
-  data-category="measurement"
-  title="Product video"
+  data-src="EMBED_URL"
+  data-category="EMBED_CATEGORY"
+  title="EMBED_TITLE"
   loading="lazy"
   allowfullscreen
 ></iframe>