@c15t/react 3.0.0-alpha.9 → 3.0.0

package/docs/integrations/plausible-analytics.md

@@ -2,22 +2,31 @@
 title: Plausible Analytics
 description: Load the Plausible Analytics tracker only after measurement consent
   with the c15t plausibleAnalytics helper, and check it in DevTools.
+seoTitle: Plausible Analytics cookie consent with c15t
+seoDescription: Load Plausible Analytics only with measurement consent. Set it
+  up with the c15t plausibleAnalytics helper and check it in DevTools.
 icon: plausible
 group: integrations
 ---
 
+The c15t `plausibleAnalytics` helper keeps Plausible Analytics off the page
+until `measurement` has consent. Until then, c15t does not define
+`window.plausible`. The helper sends no consent signal to Plausible. If the
+visitor withdraws consent, c15t removes the script element. By default, c15t
+also reloads the page.
+
 ## Configure Plausible Analytics
 
 Copy the script ID from your Plausible installation snippet. It is the part of
 the `pa-<id>.js` file name. Sites that still use the legacy domain-based
 snippet can pass `domain` instead of `scriptId`.
 
-| 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 { plausibleAnalytics } from '@c15t/integrations/plausible-analytics';
@@ -32,51 +41,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 +94,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 +124,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 +141,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 +165,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 +179,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 +220,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
@@ -248,7 +243,7 @@ A kernel you create yourself needs a loader from
 | Option                 | Default                                                                                          | Behavior                                                                                                                                                                      |
 | ---------------------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `scriptId`             | None                                                                                             | Script ID for the `pa-<scriptId>.js` loader. Takes precedence over `domain` and `extension`.                                                                                  |
-| `domain`               | None                                                                                             | Legacy site domain, set as `data-domain`. The helper throws when neither `scriptId` nor `domain` has a non-empty value.                                                       |
+| `domain`               | None                                                                                             | Legacy site domain, set as `data-domain`. When neither `scriptId` nor `domain` has a non-empty value, the helper logs an error and the script does not load.                  |
 | `extension`            | None                                                                                             | Legacy script extension or array of extensions, such as `['file-downloads', 'outbound-links']`. The helper joins them into `script.<extensions>.js`. Ignored with `scriptId`. |
 | `customProperties`     | None                                                                                             | Properties sent with each page view.                                                                                                                                          |
 | `endpoint`             | None                                                                                             | Custom event endpoint. With `domain`, the helper also sets it as `data-api`.                                                                                                  |
@@ -302,8 +297,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/posthog.md

@@ -3,22 +3,32 @@ title: PostHog
 description: Load PostHog before or after measurement consent with the c15t
   posthog helper, choose its cookieless behavior, turn off PostHog modules you
   do not use, and sync consent with an SDK you already initialize.
+seoTitle: PostHog cookie consent with c15t
+seoDescription: Opt PostHog out without measurement consent, with cookieless
+  capture or a full wait for consent. Set it up with the c15t posthog helper.
 icon: posthog
 group: integrations
 ---
 
+By default, the c15t `posthog` helper loads PostHog's `array.js` on every page,
+before the visitor chooses. While `measurement` has no consent, the helper calls
+`opt_out_capturing()`. This is also true before the visitor chooses. While
+`measurement` has consent, the helper calls `opt_in_capturing()`. The default
+`cookieless_mode: 'on_reject'` changes PostHog to cookieless capture after an
+opt-out. To wait for consent before the load, set `loadMode: 'after-consent'`.
+
 ## Configure PostHog
 
 Use the project token that starts with `phc_`, and the region of your PostHog
 project. This example waits for measurement permission before requesting the
 SDK, and turns off cookieless capture after a refusal.
 
-| 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 { posthog } from '@c15t/integrations/posthog';
@@ -44,51 +54,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.
@@ -107,8 +107,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).
 
@@ -137,15 +137,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).
@@ -153,12 +154,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';
 
@@ -178,15 +178,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).
@@ -194,22 +192,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`:
@@ -236,20 +233,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
@@ -259,7 +255,7 @@ A kernel you create yourself needs a loader from
 
 | Option                  | Default                                                    | Behavior                                                                                                                                                                       |
 | ----------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `id`                    | Required                                                   | Project token, starting with `phc_`. The helper trims it. Empty or whitespace-only values throw.                                                                               |
+| `id`                    | Required                                                   | Project token, starting with `phc_`. The helper trims it. Empty or whitespace-only values log an error and the script does not load.                                           |
 | `region`                | `'eu'`                                                     | `'eu'` or `'us'`. Picks the API, UI and loader hosts when you do not set them.                                                                                                 |
 | `apiHost`               | `https://eu.i.posthog.com`                                 | API host for a proxy or self-hosted PostHog. Without `scriptUrl`, the loader URL becomes `<apiHost>/static/array.js`.                                                          |
 | `uiHost`                | The region's UI host                                       | UI host, for example `https://eu.posthog.com`. A custom `apiHost` with no `region` uses the API host.                                                                          |
@@ -463,8 +459,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.