@c15t/react 3.0.0-alpha.8 → 3.0.0

package/docs/integrations/front-chat.md

@@ -3,21 +3,31 @@ title: Front Chat
 description: Load the Front Chat widget only after functionality consent with
   the c15t frontChat helper, forward CSP nonces, clear the session on revocation
   and check it in DevTools.
+seoTitle: Front Chat cookie consent with c15t
+seoDescription: Show Front Chat only with functionality consent. You can also
+  clear the Front session when a visitor withdraws consent, with the c15t
+  frontChat helper.
 icon: front-chat
 group: integrations
 ---
 
+The c15t `frontChat` helper keeps the Front Chat bundle off the page until
+`functionality` has consent. After the bundle loads, the helper calls
+`FrontChat('init')` with your chat ID. If the visitor withdraws consent, c15t
+reloads the page by default. To ask Front to clear the chat session, call
+`shutdownFrontChat()` from `onBeforeConsentRevocationReload`.
+
 ## Configure Front Chat
 
 Copy the `chatId` from the widget snippet in your Front Chat channel's
 **Installation** tab.
 
-| 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 { frontChat } from '@c15t/integrations/front-chat';
@@ -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                                                                                                                                              |
 | -------------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `chatId`             | Required                                             | Public chat ID passed to `FrontChat('init')`. Surrounding whitespace is trimmed; an empty value throws.                                               |
+| `chatId`             | Required                                             | Public chat ID passed to `FrontChat('init')`. Surrounding whitespace is trimmed. An empty value logs an error and the script does not load.           |
 | `useDefaultLauncher` | `true`                                               | Shows Front's launcher. With `false`, open the widget from your own launcher through Front's [SDK](https://dev.frontapp.com/docs/chat-sdk-reference). |
 | `nonce`              | None                                                 | CSP nonce for the loader and Front's generated scripts. A loader nonce from your consent provider is forwarded to `init` too.                         |
 | `scriptSrc`          | `https://chat-assets.frontapp.com/v1/chat.bundle.js` | Loader URL override. A proxy here does not proxy the widget's other requests.                                                                         |
@@ -315,8 +311,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/google-maps.md

@@ -3,10 +3,22 @@ title: Google Maps
 description: Gate a Google Maps iframe embed with c15t v3 so the map loads only
   after the visitor allows its consent category, in Next.js, TanStack Start,
   React, Nuxt, Vue, Astro, Svelte, SvelteKit, HTML or JavaScript.
+seoTitle: Google Maps embed cookie consent with c15t
+seoDescription: Show Google Maps embeds only with consent. c15t loads the map
+  iframe only when its category has consent, in Next.js, React, Vue, Svelte,
+  Astro and HTML.
 icon: google-maps
 group: integrations
 ---
 
+c15t has no Google Maps helper. This guide puts a Google Maps iframe inside each
+framework's `ConsentGate`, or uses `data-category` with the HTML script tag. The
+example uses the `functionality` category, but you can choose a different
+category. Until that category has consent, the page has no iframe that loads a
+Google Maps URL, so the browser does not connect to Google. If the visitor
+withdraws consent, `ConsentGate` removes the iframe. With `data-category`, c15t
+moves the URL from `src` to `data-src`.
+
 ## Configure the map
 
 Copy the map's iframe embed URL. Choose the category matching its use in your
@@ -111,7 +123,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"
@@ -130,7 +142,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>
@@ -146,8 +158,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>
 
@@ -162,7 +173,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>
@@ -223,7 +234,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"
@@ -252,8 +263,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">
@@ -282,14 +293,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>