@c15t/react 3.0.0-alpha.8 → 3.0.0

package/docs/integrations/google-tag.md

@@ -1,23 +1,39 @@
 ---
 title: Google Tag
-description: Load gtag.js for Google Analytics or Google Ads with c15t Consent
-  Mode v2 signals, and verify the consent commands in DevTools.
+description: Load gtag.js for Google Analytics or Google Ads before or after
+  consent with c15t Consent Mode v2 signals, and verify the consent commands in
+  DevTools.
+seoTitle: Google Tag Consent Mode v2 with c15t
+seoDescription: Send Google Consent Mode v2 signals before gtag.js runs. c15t
+  maps consent to analytics_storage, ad_storage, ad_user_data and
+  ad_personalization.
 icon: google-analytics
 group: integrations
 ---
 
+The c15t `gtag` helper loads Google's gtag.js for Google Analytics or Google
+Ads. With the default `loadMode: 'always'`, gtag.js loads on every page, before
+the visitor chooses. You must give a category, usually `measurement` or
+`marketing`, but in this mode the category does not delay the load. With
+`loadMode: 'after-consent'`, c15t sends nothing to Google until the category has
+consent. In both modes, the helper sends the Google Consent Mode v2 default with
+`gtag('consent', 'default', ...)` before `config`. Each consent change sends an
+`update`. `measurement` controls `analytics_storage`, and `marketing` controls
+`ad_storage`, `ad_user_data`, and `ad_personalization`. The `consentMapping`
+option replaces this map.
+
 ## Configure the Google tag
 
 Copy the tag ID, for example `G-XXXXXXXXXX` for Google Analytics or
 `AW-XXXXXXXXX` for Google Ads. Remove any `gtag.js` snippet already in your
 HTML and any tag-manager entry that loads the same tag.
 
-| 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 { gtag } from '@c15t/integrations/google-tag';
@@ -32,51 +48,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.
@@ -95,8 +101,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).
 
@@ -125,15 +131,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).
@@ -141,12 +148,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';
 
@@ -166,15 +172,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).
@@ -182,22 +186,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`:
@@ -224,20 +227,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
@@ -245,28 +247,69 @@ A kernel you create yourself needs a loader from
 
 ## Options
 
-| Option           | Default         | Behavior                                                                                                                                               |
-| ---------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `id`             | Required        | Tag ID passed to `gtag('config', ...)` and the loader URL. The helper trims it. Empty or whitespace-only values throw.                                 |
-| `category`       | Required        | `measurement` for Analytics, `marketing` for Ads and Floodlight. It sets the script's permission, which callbacks receive, but does not delay loading. |
-| `config`         | None            | Parameters passed as the third argument to `gtag('config', id, config)`.                                                                               |
-| `consentMapping` | The table below | Replaces the category-to-Google mapping.                                                                                                               |
+| Option           | Default         | Behavior                                                                                                                                                                                                                          |
+| ---------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`             | Required        | Tag ID passed to `gtag('config', ...)` and the loader URL. The helper trims it. Empty or whitespace-only values log an error and the script does not load.                                                                        |
+| `category`       | Required        | `measurement` for Analytics, `marketing` for Ads and Floodlight. With `loadMode: 'after-consent'`, `gtag/js` waits for it. With `'always'`, it sets the script's permission, which callbacks receive, but does not delay loading. |
+| `loadMode`       | `'always'`      | When `gtag/js` loads. See [choose when Google loads](#choose-when-google-loads).                                                                                                                                                  |
+| `config`         | None            | Parameters passed as the third argument to `gtag('config', id, config)`.                                                                                                                                                          |
+| `consentMapping` | The table below | Replaces the category-to-Google mapping.                                                                                                                                                                                          |
 
 The deprecated `script` option overrides fields of the returned script. Use the
 options above instead.
 
-## Google loads before a choice
+## Choose when Google loads
+
+| `loadMode`        | Until the category is allowed                                                              | After the category is allowed                                                                                                     |
+| ----------------- | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
+| `'always'`        | Loads `gtag/js` and sends `consent` `default` with the current permissions, then `config`. | Sends `consent` `update` with the mapped types granted.                                                                           |
+| `'after-consent'` | Sends nothing to Google. The helper creates no `dataLayer` or `gtag` function.             | Loads `gtag/js` once. `consent` `default` carries the current permissions and comes before `config`. Later changes send `update`. |
 
-The `googleTagManager` and `gtag` helpers set `alwaysLoad: true`. Before the
-visitor chooses, the helper creates the `dataLayer` queue, sends
-`gtag('consent', 'default', ...)` with the current permissions and loads
-Google's script. After each permission change it sends
+Use `'after-consent'` when your policy forbids any request to Google before
+the visitor opts in:
+
+```ts title="src/consent-scripts.ts (partial)"
+gtag({ id: 'G-XXXXXXXXXX', category: 'measurement', loadMode: 'after-consent' }),
+```
+
+`'after-consent'` waits for the category to be allowed, not for a recorded
+choice. Under an `opt-in` policy, that happens when the visitor allows it.
+Under an `opt-out` or `none` policy, optional categories are allowed before a
+choice, so `gtag/js` loads on the first page unless a saved refusal or a
+privacy signal restricts the category; see
+[policies](../concepts/policies.md). `necessary` is always allowed, so
+`category: 'necessary'` loads `gtag/js` before a choice in either mode. Use
+`measurement` or `marketing`.
+
+This gives up part of Consent Mode. With `'always'`, Google tags send
+cookieless pings while a type is denied, and Google uses them to model
+conversions and behavior for visitors who refused or have not chosen. With
+`'after-consent'`, visitors whose category is denied send nothing, so Google
+has no data to model them from. Reports cover only visitors who allowed the
+category.
+
+When the visitor withdraws the category, c15t reloads the page and the new
+page does not load `gtag/js`. With `reloadOnConsentRevoked: false`, the tag
+already running stays on the page and gets an `update` that denies the
+withdrawn types. A later grant reuses it instead of loading a second copy.
+
+## Google loads before a choice by default
+
+With the default `loadMode: 'always'`, the `googleTagManager` and `gtag`
+helpers set `alwaysLoad: true`. Before the visitor chooses, the helper creates
+the `dataLayer` queue, sends `gtag('consent', 'default', ...)` with the current
+permissions and loads Google's script. After each permission change it sends
 `gtag('consent', 'update', ...)`. Google's tags then adjust what they store and
 send; see Google's
 [Consent Mode overview](https://developers.google.com/tag-platform/security/concepts/consent-mode).
 
-So the browser does contact Google before consent. If your policy requires no
-Google request until the visitor allows it, do not use these helpers unchanged.
+So the browser contacts Google before consent. If your policy requires no
+Google request until the visitor allows it, set `loadMode: 'after-consent'`.
+The helper then creates nothing and requests nothing until its category is
+allowed. When it loads, it sends the `default` command first, with the
+permissions at that moment, and `update` commands after later changes. Under
+an `opt-out` or `none` policy, optional categories are allowed before a
+choice, so the helper loads on the first page.
 
 ## How categories map to Google consent types
 
@@ -288,11 +331,12 @@ visitor has chosen anything. That is a permission, not a recorded choice.
 
 ## Verify the Google tag
 
-These checks are for the `gtag` helper, which loads before a choice on
-purpose. On a plain HTML page with the script tag, you gate Google's snippet
-instead and it loads only after consent; see
+On a plain HTML page with the script tag, you gate Google's snippet instead
+and it loads only after consent; see
 [HTML scripts](https://c15t.com/docs/frameworks/html/scripts#google-consent-mode-and-tag-managers).
 
+With the default `loadMode: 'always'`:
+
 1. In a private window with an opt-in policy, load the page. `gtag/js` loads.
    In Google Tag Assistant, the `consent` `default` command comes before
    `config`, with `analytics_storage` and `ad_storage` set to `denied`.
@@ -300,9 +344,21 @@ instead and it loads only after consent; see
    `update` command that grants the mapped types.
 3. Turn the category off again and save. c15t reloads the page, and the new
    page starts with those types denied.
-4. With client-side navigation, check that each route change sends one page
-   view. A separate router integration that also sends `page_view` doubles
-   the count.
+
+With `loadMode: 'after-consent'`:
+
+1. In a private window with an opt-in policy, filter DevTools Network by
+   `google` and load the page. No request appears, and `window.dataLayer` is
+   `undefined` in the Console.
+2. Allow the tag's category. `gtag/js` loads once. In Tag Assistant, the first
+   command is `consent` `default` with the mapped types granted, before
+   `config`.
+3. Turn the category off again and save. c15t reloads the page, and the new
+   page makes no request to Google.
+
+In either mode, with client-side navigation, check that each route change
+sends one page view. A separate router integration that also sends
+`page_view` doubles the count.
 
 See the [consent verification guide](../guides/verify-consent.md) for hosting
 checks.

package/docs/integrations/heap.md

@@ -2,22 +2,32 @@
 title: Heap
 description: Load the Heap config script and heap.js only after measurement
   consent with the c15t heap helper, and check it in DevTools.
+seoTitle: Heap cookie consent with c15t
+seoDescription: Load Heap only with measurement consent. The c15t heap helper
+  keeps heap_config.js off the page and stops Heap when a visitor withdraws
+  consent.
 icon: heap
 group: integrations
 ---
 
+The c15t `heap` helper keeps Heap off the page until `measurement` has consent.
+Until then, c15t does not define `window.heap` or load `heap_config.js`, which
+loads the heap.js runtime. The helper never calls `heap.stopTracking`. If the
+visitor withdraws consent, c15t removes the config script element. By default,
+c15t also reloads the page. The reload stops heap.js.
+
 ## Configure Heap
 
 Copy the environment ID from your Heap installation snippet. The `heap` helper
 loads that environment's `heap_config.js`, which then loads the heap.js
 runtime. Remove the original Heap snippet.
 
-| 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 { heap } from '@c15t/integrations/heap';
@@ -32,51 +42,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.
@@ -95,8 +95,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).
 
@@ -125,15 +125,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).
@@ -141,12 +142,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';
 
@@ -166,15 +166,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).
@@ -182,22 +180,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`:
@@ -224,20 +221,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
@@ -247,7 +243,7 @@ A kernel you create yourself needs a loader from
 
 | Option         | Default                                                     | Behavior                                                                                                                                                                                                                                  |
 | -------------- | ----------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `envId`        | Required                                                    | Environment ID. Set as `heap.envId` and `heap.appid`, and used in the default loader URL. The helper trims it. Empty values throw.                                                                                                        |
+| `envId`        | Required                                                    | Environment ID. Set as `heap.envId` and `heap.appid`, and used in the default loader URL. The helper trims it. Empty values log an error and the script does not load.                                                                    |
 | `clientConfig` | `{}`                                                        | Client configuration set on `heap.clientConfig`. Values must be JSON-serializable with finite numbers; other values throw a `TypeError`. The helper always sets `shouldFetchServerConfig: false` and overrides any value you pass for it. |
 | `scriptUrl`    | `https://cdn.us.heap-api.com/config/<envId>/heap_config.js` | Config loader URL override. A blank value falls back to the default.                                                                                                                                                                      |
 
@@ -293,8 +289,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.