@c15t/react 3.1.0 → 3.2.0

package/docs/integrations/zendesk.md

@@ -0,0 +1,359 @@
+---
+title: Zendesk Messaging
+description: Load the Zendesk Messaging Web Widget after functionality consent,
+  map measurement consent to its cookie ranges and clear widget storage on
+  revocation.
+seoTitle: Zendesk Messaging cookie consent with c15t
+seoDescription: Gate Zendesk Messaging on functionality consent. Map measurement
+  consent to analytics storage and send Zendesk's none range when consent is
+  withdrawn.
+icon: messages-square
+group: integrations
+---
+
+Zendesk Messaging adds the Zendesk support chat widget to your site. The c15t
+`zendeskWidget` helper waits for `functionality` consent before it creates
+Zendesk's globals or requests the widget. Before the widget loads, it tells
+Zendesk which storage to use: functional storage only, or analytics storage as
+well when `measurement` is allowed.
+
+On withdrawal, the helper tells Zendesk to hide the widget and delete its local
+and session storage, and c15t reloads the page by default.
+
+This helper covers Zendesk Messaging. Web Widget Classic uses a different API.
+
+## Configure Zendesk Messaging
+
+In **Admin Center > Channels > Messaging and social > Messaging**, select your
+widget and open **Installation**. Copy the widget key from its code snippet.
+Then remove the Zendesk snippet from your page or tag manager.
+
+| 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 { zendeskWidget } from '@c15t/integrations/zendesk';
+
+export const scripts = [zendeskWidget({ key: 'YOUR_ZENDESK_WIDGET_KEY' })];
+```
+
+## 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                                                                                                                                                      |
+| ---------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `key`      | Required        | Public Messaging widget key. Trimmed and URL-encoded. If it's missing or blank, c15t logs `zendeskWidget: missing or invalid key` and never loads the widget. |
+| `category` | `functionality` | c15t consent category or condition needed to load the widget. Measurement consent still controls analytics storage.                                           |
+
+## Loading and revocation
+
+When the consent condition passes, the helper creates Zendesk's `zE` command
+queue (also exposed as `zEmbed`) and loads
+`https://static.zdassets.com/ekr/snippet.js?key=<key>`. Before the loader runs,
+and again on each consent change, it queues
+`zE('messenger:set', 'cookies', range)`:
+
+| Mapped consent       | Measurement consent | Zendesk range |
+| -------------------- | ------------------- | ------------- |
+| Granted              | Granted             | `all`         |
+| Granted              | Denied              | `functional`  |
+| Denied after loading | Either              | `none`        |
+
+With `functional`, Zendesk turns off the analytics behind Pages viewed and
+Proactive messages analytics. With `none`, Zendesk hides the widget and deletes
+its local and session storage. These effects come from Zendesk's
+[Set cookies API](https://developer.zendesk.com/api-reference/widget-messaging/web/core/#set-cookies).
+Turning off the visitor's Zendesk vendor switch counts as denied, so it also
+sends `none`.
+
+c15t removes the loader on revocation. The `none` call doesn't unload the SDK or
+stop every request in progress. Keep `reloadOnConsentRevoked` enabled to stop
+code already running on the page. If the visitor grants consent again before
+the reload, c15t inserts a new loader and the helper sends the current range.
+
+### Several helpers and one widget key
+
+Helper calls with the same key and consent condition share one script. If you
+recreate the helper on each render, its loader and consent updates stay active.
+If several registrations share that configuration, the widget stays available
+while any of them has consent. `all` needs measurement consent from every
+granted registration.
+
+Use one widget key per page. Zendesk exposes a single global `zE` API, so two
+widgets on the same page control each other. Different keys get separate
+loaders, but that doesn't separate Zendesk's global API.
+
+### Removing the helper
+
+Removing the helper from your configuration, or unmounting its provider,
+releases that registration. When the last registration goes, c15t removes the
+loader but keeps the conversation and storage. It doesn't send `none` or unload
+code that already ran, and later consent changes no longer reach the widget.
+Revoke consent first, or reload the page, when you need the widget stopped and
+its storage cleared.
+
+## Cookies and storage
+
+Zendesk's [in-product cookie policy](https://support.zendesk.com/hc/en-us/articles/4408824378650-Zendesk-In-Product-Cookie-Policy)
+lists these entries for the Web Widget. Check your own widget configuration for
+other product storage.
+
+| Name                                                                                       | Zendesk category | Lifetime                                                  |
+| ------------------------------------------------------------------------------------------ | ---------------- | --------------------------------------------------------- |
+| `<integrationId>.appUserId`, `<integrationId>.clientId`, `<integrationId>.sessionToken`    | Essential        | Local or session storage, subject to the browser's policy |
+| `ZD-suid`                                                                                  | Analytics        | 20 minutes                                                |
+| `ZD-buid`                                                                                  | Analytics        | Forever                                                   |
+| `ZD-widgetOpen`, `ZD-launcherLabelRemoved`                                                 | Functionality    | Forever                                                   |
+| `ZD-soundNotificationDisabledKey`, `ZD-campaigns`, `<integrationId>.conversationStartedAt` | Functionality    | Subject to the browser's policy                           |
+
+## Verify Zendesk Messaging
+
+Filter Network by `zdassets.com` and your Zendesk subdomain. Before consent,
+no Zendesk loader request appears and `window.zE` is undefined, as long as you
+removed other Zendesk installations.
+
+Grant functionality without measurement and check that the widget's analytics
+storage stays off. Grant measurement while the widget is open, then withdraw
+it, and check that the widget stays available with analytics off.
+
+Revoke functionality and check that Zendesk hides the widget. After c15t
+reloads, the loader stays absent. A successful response for `snippet.js` alone
+doesn't prove your widget key or Messaging setup works. Open a conversation in
+your widget to check that.
+
+Sources: [install and show the Web Widget](https://developer.zendesk.com/documentation/zendesk-web-widget-sdks/sdks/web/messaging-show-web-widget/),
+[Messaging core API](https://developer.zendesk.com/api-reference/widget-messaging/web/core/),
+and [Zendesk privacy notice](https://www.zendesk.com/company/agreements-and-terms/privacy-notice/).
+
+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/package.json

@@ -1,41 +1,19 @@
 {
 	"name": "@c15t/react",
-	"version": "3.1.0",
-	"description": "React cookie consent banner, consent dialog and preference center, plus headless hooks. A GDPR consent management platform (CMP) with Google Consent Mode v2 and IAB TCF.",
+	"version": "3.2.0",
+	"description": "React cookie consent banner and React consent dialog for c15t, plus a React cookie banner, preference center and headless hooks.",
 	"keywords": [
-		"banner",
-		"ccpa",
 		"cmp",
 		"consent",
-		"consent-banner",
-		"consent-management",
-		"consent-management-platform",
 		"consent-manager",
-		"consent-manager-react",
-		"consent-mode-v2",
-		"cookie",
 		"cookie-banner",
 		"cookie-consent",
 		"gdpr",
-		"global-privacy-control",
-		"google-consent-mode",
 		"headless",
-		"iab",
 		"iab-tcf",
-		"lgpd",
-		"preference-center",
-		"privacy",
 		"react",
-		"react-cmp",
-		"react-consent",
 		"react-cookie-banner",
-		"react-cookie-consent",
-		"react-server-components",
-		"rsc",
-		"tcf",
-		"tracking-consent",
-		"typescript",
-		"use-client"
+		"react-cookie-consent"
 	],
 	"homepage": "https://c15t.com/docs/frameworks/react/quickstart",
 	"bugs": {
@@ -269,16 +247,16 @@
 		"test:watch": "bun prebuild && vitest"
 	},
 	"dependencies": {
-		"@c15t/core": "3.1.0",
-		"@c15t/dev-tools": "3.1.0",
-		"@c15t/iab": "3.1.0",
-		"@c15t/schema": "3.1.0",
-		"@c15t/translations": "3.1.0",
-		"@c15t/ui": "3.0.1",
+		"@c15t/core": "3.2.0",
+		"@c15t/dev-tools": "3.2.0",
+		"@c15t/iab": "3.2.0",
+		"@c15t/schema": "3.1.1",
+		"@c15t/translations": "3.2.0",
+		"@c15t/ui": "3.1.0",
 		"@types/google.maps": "3.65.3"
 	},
 	"devDependencies": {
-		"@c15t/backend": "3.1.0",
+		"@c15t/backend": "3.2.0",
 		"@c15t/conformance": "0.0.1",
 		"@c15t/typescript-config": "0.0.1",
 		"@c15t/vitest-config": "1.0.0",

package/dist/components/prompt/resolve-banner-primary-actions.js

@@ -1 +0,0 @@
-let r=function(r,e){return 0===r.length&&1===e.length&&"dismiss"===e[0]?e:r};export{r as resolveBannerPrimaryActions};

package/dist-types/components/prompt/resolve-banner-primary-actions.d.ts

@@ -1,14 +0,0 @@
-/**
- * Primary actions for the banner, with dismiss promoted on a bare notice.
- *
- * @remarks
- * The resolver's default primary is `customize`, which a notice never
- * offers, so a notice resolves with no primary action. When dismiss is the
- * only control on the surface it is the primary one.
- *
- * @param primaryActions - Primary actions from the resolved presentation.
- * @param orderedActions - Every action the surface renders, in order.
- * @returns The primary actions the banner should style.
- * @internal
- */
-export declare const resolveBannerPrimaryActions: <Action extends string>(primaryActions: readonly Action[], orderedActions: readonly Action[]) => readonly Action[];