@c15t/react 3.0.0-alpha.9 → 3.0.0

package/docs/integrations/rudderstack.md

@@ -3,21 +3,33 @@ title: RudderStack
 description: Load the RudderStack JavaScript SDK after measurement consent with
   the c15t rudderstack helper, or map c15t categories to destination consent
   IDs, and check each mode.
+seoTitle: RudderStack cookie consent with c15t
+seoDescription: Load RudderStack only after measurement consent, or use
+  RudderStack consent management with mapped consent IDs. Set it up with the
+  c15t rudderstack helper.
 icon: rudderstack
 group: integrations
 ---
 
+By default, the c15t `rudderstack` helper keeps the RudderStack JavaScript SDK
+off the page until `measurement` has consent. In this mode, the helper sends no
+consent signal to RudderStack. With `consentManagement`, the helper loads the
+SDK on every page in the RudderStack pre-consent mode, before the visitor
+chooses. In that mode, the SDK keeps events in a buffer and uses no persistent
+storage. The helper then calls `rudderanalytics.consent()` and puts each mapped
+consent ID in the allowed or denied list, from its c15t category.
+
 ## Configure RudderStack
 
 Copy the source write key and the HTTPS data plane URL from your RudderStack
 source. Keep control-plane credentials out of the browser.
 
-| 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 { rudderstack } from '@c15t/integrations/rudderstack';
@@ -37,51 +49,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.
@@ -100,8 +102,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).
 
@@ -130,15 +132,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).
@@ -146,12 +149,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';
 
@@ -171,15 +173,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).
@@ -187,22 +187,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`:
@@ -229,20 +228,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
@@ -250,14 +248,14 @@ A kernel you create yourself needs a loader from
 
 ## Options
 
-| Option              | Default                                           | Behavior                                                                                             |
-| ------------------- | ------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| `writeKey`          | Required                                          | Source write key. Surrounding whitespace is trimmed; an empty value throws.                          |
-| `dataPlaneUrl`      | Required                                          | Data plane URL. A missing, invalid or non-HTTPS URL throws.                                          |
-| `consentManagement` | None                                              | `{ mapping }` from c15t categories to RudderStack consent IDs. Switches to destination consent mode. |
-| `loadOptions`       | `{}`                                              | Third argument to `rudderanalytics.load()`. Use JSON-serializable values only.                       |
-| `trackPageView`     | `true`                                            | Queues `rudderanalytics.page()` before the loader.                                                   |
-| `scriptUrl`         | `https://cdn.rudderlabs.com/v3/modern/rsa.min.js` | Loader URL override. A non-HTTPS URL throws; a blank value uses the default.                         |
+| Option              | Default                                           | Behavior                                                                                                        |
+| ------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| `writeKey`          | Required                                          | Source write key. Surrounding whitespace is trimmed. An empty value logs an error and the script does not load. |
+| `dataPlaneUrl`      | Required                                          | Data plane URL. A missing, invalid or non-HTTPS URL logs an error and the script does not load.                 |
+| `consentManagement` | None                                              | `{ mapping }` from c15t categories to RudderStack consent IDs. Switches to destination consent mode.            |
+| `loadOptions`       | `{}`                                              | Third argument to `rudderanalytics.load()`. Use JSON-serializable values only.                                  |
+| `trackPageView`     | `true`                                            | Queues `rudderanalytics.page()` before the loader.                                                              |
+| `scriptUrl`         | `https://cdn.rudderlabs.com/v3/modern/rsa.min.js` | Loader URL override. A non-HTTPS URL throws; a blank value uses the default.                                    |
 
 ## Loading and revocation
 
@@ -322,8 +320,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/rybbit-analytics.md

@@ -3,21 +3,30 @@ title: Rybbit Analytics
 description: Load Rybbit Analytics only after measurement consent with the c15t
   rybbitAnalytics helper, map its tracking options to data attributes, and check
   it in DevTools.
+seoTitle: Rybbit Analytics cookie consent with c15t
+seoDescription: Load Rybbit Analytics, with session replay and web vitals, only
+  with measurement consent. Set it up with the c15t rybbitAnalytics helper.
 icon: rybbit-analytics
 group: integrations
 ---
 
+The c15t `rybbitAnalytics` helper keeps Rybbit Analytics off the page until
+`measurement` has consent. Options such as `sessionReplay` and `webVitals` run
+inside the same script, under the same consent. The helper sends no consent
+signal to Rybbit. If the visitor withdraws consent, c15t removes the script
+element. By default, c15t also reloads the page.
+
 ## Configure Rybbit Analytics
 
 Copy the site ID from your Rybbit tracking snippet. The helper passes it to
 the script as `data-site-id`.
 
-| Package manager | Command                                |
-| :-------------- | :------------------------------------- |
-| npm             | `npm install @c15t/integrations@alpha` |
-| pnpm            | `pnpm add @c15t/integrations@alpha`    |
-| yarn            | `yarn add @c15t/integrations@alpha`    |
-| bun             | `bun add @c15t/integrations@alpha`     |
+| Package manager | Command                          |
+| :-------------- | :------------------------------- |
+| npm             | `npm install @c15t/integrations` |
+| pnpm            | `pnpm add @c15t/integrations`    |
+| yarn            | `yarn add @c15t/integrations`    |
+| bun             | `bun add @c15t/integrations`     |
 
 ```ts title="src/consent-scripts.ts"
 import { rybbitAnalytics } from '@c15t/integrations/rybbit-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,22 +243,22 @@ A kernel you create yourself needs a loader from
 Boolean options become `'true'` or `'false'` data attributes. An option you
 leave unset adds no attribute, so Rybbit uses its own default.
 
-| Option              | Default                               | Behavior                                                                                     |
-| ------------------- | ------------------------------------- | -------------------------------------------------------------------------------------------- |
-| `siteId`            | Required                              | Site ID as a string or number, set as `data-site-id`. Empty or whitespace-only values throw. |
-| `autoTrackPageview` | None                                  | Automatic page views, set as `data-auto-track-pageview`.                                     |
-| `trackSpa`          | None                                  | Client-side route tracking, set as `data-track-spa`.                                         |
-| `trackQuery`        | None                                  | Query strings in tracked URLs, set as `data-track-query`.                                    |
-| `trackOutbound`     | None                                  | Outbound link clicks, set as `data-track-outbound`.                                          |
-| `trackErrors`       | None                                  | JavaScript errors, set as `data-track-errors`.                                               |
-| `sessionReplay`     | None                                  | Session replay, set as `data-session-replay`.                                                |
-| `webVitals`         | None                                  | Web Vitals, set as `data-web-vitals`.                                                        |
-| `skipPatterns`      | None                                  | URL patterns to skip, written as a JSON array to `data-skip-patterns`.                       |
-| `maskPatterns`      | None                                  | URL patterns to mask, written as a JSON array to `data-mask-patterns`.                       |
-| `debounce`          | None                                  | Page view debounce interval, set as `data-debounce`.                                         |
-| `apiKey`            | None                                  | Tracking API key, set as `data-api-key`. The key is visible in the page source.              |
-| `analyticsHost`     | None                                  | Self-hosted Rybbit host. The helper loads `<analyticsHost>/script.js`.                       |
-| `scriptUrl`         | `https://app.rybbit.io/api/script.js` | Loader URL override. Takes precedence over `analyticsHost`. Blank values are ignored.        |
+| Option              | Default                               | Behavior                                                                                                                         |
+| ------------------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `siteId`            | Required                              | Site ID as a string or number, set as `data-site-id`. Empty or whitespace-only values log an error and the script does not load. |
+| `autoTrackPageview` | None                                  | Automatic page views, set as `data-auto-track-pageview`.                                                                         |
+| `trackSpa`          | None                                  | Client-side route tracking, set as `data-track-spa`.                                                                             |
+| `trackQuery`        | None                                  | Query strings in tracked URLs, set as `data-track-query`.                                                                        |
+| `trackOutbound`     | None                                  | Outbound link clicks, set as `data-track-outbound`.                                                                              |
+| `trackErrors`       | None                                  | JavaScript errors, set as `data-track-errors`.                                                                                   |
+| `sessionReplay`     | None                                  | Session replay, set as `data-session-replay`.                                                                                    |
+| `webVitals`         | None                                  | Web Vitals, set as `data-web-vitals`.                                                                                            |
+| `skipPatterns`      | None                                  | URL patterns to skip, written as a JSON array to `data-skip-patterns`.                                                           |
+| `maskPatterns`      | None                                  | URL patterns to mask, written as a JSON array to `data-mask-patterns`.                                                           |
+| `debounce`          | None                                  | Page view debounce interval, set as `data-debounce`.                                                                             |
+| `apiKey`            | None                                  | Tracking API key, set as `data-api-key`. The key is visible in the page source.                                                  |
+| `analyticsHost`     | None                                  | Self-hosted Rybbit host. The helper loads `<analyticsHost>/script.js`.                                                           |
+| `scriptUrl`         | `https://app.rybbit.io/api/script.js` | Loader URL override. Takes precedence over `analyticsHost`. Blank values are ignored.                                            |
 
 ## Loading and revocation
 
@@ -300,8 +295,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.