@c15t/react 3.2.0-canary.0 → 3.2.0

package/docs/integrations/appcues.md

@@ -0,0 +1,368 @@
+---
+title: Appcues
+description: Load Appcues onboarding flows after experience consent, configure
+  US or EU accounts, and reset the visitor on revocation.
+seoTitle: Appcues cookie consent with c15t
+seoDescription: Gate the Appcues SDK on experience consent with c15t. Configure
+  account settings, reset user state on revocation, and verify browser storage.
+icon: list-checks
+group: integrations
+---
+
+Appcues shows onboarding flows, tooltips and checklists inside your app. The
+c15t `appcues` helper waits for `experience` consent before it sets
+`AppcuesSettings` or requests the SDK.
+
+On withdrawal, the helper calls `Appcues.reset()` and removes the loader, then
+c15t reloads the page. `reset()` clears the user and any flow in progress, but
+the SDK keeps running until the reload, so keep `reloadOnConsentRevoked` on.
+
+## Configure Appcues
+
+Copy your account ID from the
+[Appcues installation snippet](https://docs.appcues.com/install-appcues-web/install-the-appcues-sdk).
+Set `region: 'eu'` for an EU account. Then remove the Appcues snippet and any
+tag-manager entry so Appcues can't load outside c15t.
+
+| 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 { appcues } from '@c15t/integrations/appcues';
+
+export const scripts = [
+	appcues({
+		accountId: 'YOUR_APPCUES_ID',
+		onReady: () => {
+			// Read the signed-in visitor from your auth state here.
+			// Enable only with their real, unique, stable ID; skip if signed out.
+			// window.Appcues?.identify?.('CURRENT_USER_ID');
+			// After identify, enable with the visitor's real group ID if needed.
+			// window.Appcues?.group?.('CURRENT_GROUP_ID');
+			// After identify, track only an event that actually happened.
+			// window.Appcues?.track?.('Started onboarding');
+		},
+	}),
+];
+```
+
+Inside `onReady`, read the signed-in user from your auth state. Replace the
+`identify` placeholder with that user's real, unique, stable ID before you
+enable the call. Enable `group` after `identify` with the real group ID, if
+you need it. Send `track` only for an event that actually happened. Skip
+these calls when nobody is signed in. `onReady` runs once per successful
+loader load, including when consent was already granted at page startup.
+
+If sign-in completes after `onReady`, identify the user from your app's auth
+change handler. Right before you call `window.Appcues.identify`, check that
+the method exists, the user is still signed in, and c15t's current consent
+allows both the script's category and the `appcues` vendor. The category
+defaults to `experience`; check your override instead if you changed it. Skip
+identification if any check fails. If Appcues hasn't loaded yet, let
+`onReady` read the current user when it runs.
+
+## 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                                                                                                                                                                                             |
+| ----------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `accountId` | Required                                  | Account ID from Appcues. Surrounding whitespace is trimmed and the ID is encoded as one URL path segment. Missing or blank IDs log an error and skip loading.                                        |
+| `region`    | `'us'`                                    | Loads from `fast.appcues.com`, or from `fast.eu.appcues.com` for `'eu'`.                                                                                                                             |
+| `settings`  | `{ enableURLDetection: true }`            | JSON-serializable `AppcuesSettings`, merged over the default URL detection setting. Replaces any existing `window.AppcuesSettings`. Set `enableURLDetection: false` to handle page changes yourself. |
+| `scriptUrl` | `https://fast.appcues.com/<accountId>.js` | Override for a proxy or custom loader. A blank override uses the default. This changes only the account loader, not later SDK requests.                                                              |
+| `onReady`   | None                                      | Synchronous callback after the account loader sets `window.Appcues`, while the script still has consent. Runs once per successful loader load. Use it for `identify`, `group` and `track`.           |
+
+The helper has no `category` option. To change the consent mapping, override
+the returned script's `category` when you register it. The helper has no mode
+that loads before consent.
+
+## Loading and revocation
+
+After experience consent, c15t sets `AppcuesSettings` and loads
+`https://fast.appcues.com/<accountId>.js`, or the EU host for `region: 'eu'`.
+The account loader requests the Appcues runtime. Put startup calls to
+`identify`, `group` and `track` inside `onReady`. The account loader exposes
+these methods and buffers calls until the runtime finishes loading, as in
+Appcues' documented `AppcuesReady` pattern. c15t doesn't create an
+`AppcuesReady` global or queue visitor callbacks. If the loader fails or
+doesn't set `window.Appcues`, `onReady` doesn't run.
+
+Revoking consent or removing a pending loader stops its `onReady` from
+running. A new grant starts a new loader. Recreating the helper before the
+download completes uses the current callback. Recreating it after completion
+doesn't replay `onReady`. Read the current visitor inside the callback, and
+check consent again for later calls. If you start async work inside
+`onReady`, check consent and auth again before you call Appcues after an
+`await`, timer or event.
+
+On revocation, c15t calls the documented
+[`Appcues.reset()`](https://docs.appcues.com/dev-api-data/javascript-api-developer)
+when it's available and removes the loader element. Reset clears user state
+and flows in progress. It doesn't unload the SDK, stop every listener or
+cancel remote JavaScript that was already downloading. Keep
+`reloadOnConsentRevoked` enabled so the next page starts without Appcues. A
+new grant loads the SDK again, and repeated grants don't add another loader.
+
+## Cookies and storage
+
+Appcues documents
+[local and session storage](https://docs.appcues.com/security-privacy/faq-required-cookies-local-storage-and-session-data),
+including the localStorage keys `apc_ann_errors`, `apc_local_id`,
+`apc_user_id` and `apc_next_content_id`. Session keys include `apc_user`,
+`apc_debug_enabled`, `apc_debug_url`, `apc_curr_flow`, `apc_curr_checklist`,
+`apc_cl:{id}` and `apc_followed_test_link`. The SDK can change its storage
+across releases. Reset doesn't promise to erase every Appcues key.
+
+## Verify Appcues
+
+In a fresh browser profile, deny all optional consent and allow measurement
+alone. Check that neither Appcues host is requested, `window.Appcues`,
+`window.AppcuesSettings` and `window.AppcuesReady` are absent, and no Appcues
+cookie, localStorage or sessionStorage key appears. Grant experience and check
+the account loader, the runtime and `onReady`. Revoke consent while the loader
+is still downloading and confirm that `onReady` doesn't run when that download
+finishes. Revoke experience and confirm the page reloads and the loader stays
+absent until a new grant.
+
+The automated monitor uses a fake account and checks that the loader is
+reachable. It doesn't prove that a real account's onboarding flow starts. Use
+your own account to check flow targeting and identification.
+
+Sources:
+[install the Appcues SDK](https://docs.appcues.com/install-appcues-web/install-the-appcues-sdk),
+[JavaScript API](https://docs.appcues.com/dev-api-data/javascript-api-developer)
+and
+[cookies, local storage and session data](https://docs.appcues.com/security-privacy/faq-required-cookies-local-storage-and-session-data).
+
+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/docs/integrations/attentive.md

@@ -0,0 +1,313 @@
+---
+title: Attentive
+description: Load the Attentive tag only after marketing consent with the c15t
+  attentiveTag helper, and check its requests and storage in DevTools.
+seoTitle: Attentive cookie consent with c15t
+seoDescription: Keep Attentive signup units and tracking off the page until
+  marketing consent. Set your site slug and check withdrawal with c15t.
+icon: chart-line
+group: integrations
+---
+
+Attentive shows SMS and email signup units and tracks on-site events for its
+marketing messages. The c15t `attentiveTag` helper waits for `marketing`
+consent before it downloads the Attentive tag. Until then, the page makes no
+request to Attentive.
+
+Attentive has no supported way to stop a running tag. When the visitor
+withdraws, c15t reloads the page, and the next page doesn't load the tag.
+
+## Configure Attentive
+
+Find the site slug in your Attentive tag URL,
+`https://cdn.attn.tv/<siteSlug>/dtag.js`. If you don't have it, ask your
+Attentive contact for the slug or the full tag URL. Then remove the original
+tag from your site, so that c15t controls when it loads.
+
+| 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 { attentiveTag } from '@c15t/integrations/attentive';
+
+export const scripts = [attentiveTag({ siteSlug: 'YOUR_SITE' })];
+```
+
+## 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                                                                                                                                                                                                                    |
+| ----------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `siteSlug`  | Required                                 | Site slug from the tag URL. Whitespace is trimmed. It can contain only ASCII letters, digits, `_` and `-`. A URL, a path, or a missing or blank value logs an error and never loads the tag, even when you set `scriptUrl`. |
+| `category`  | `marketing`                              | Consent condition for the whole loader.                                                                                                                                                                                     |
+| `scriptUrl` | `https://cdn.attn.tv/<siteSlug>/dtag.js` | Exact tag URL from Attentive or your proxy. Blank values use the default.                                                                                                                                                   |
+
+## Loading and revocation
+
+After consent, the helper adds `dtag.js` at the end of the body. It creates no
+queue or globals of its own. Attentive can then download more bundles, create
+an iframe, show signup units and track events.
+
+On withdrawal, the tag element stays on the page. If the visitor allows
+marketing again on the same page, the helper reuses that tag instead of
+adding a second one.
+
+Keep `reloadOnConsentRevoked` enabled. Attentive has no documented client API
+that reliably stops all tag behavior. Removing the tag can't unload code that
+already ran, cancel pending requests or remove every iframe. The helper
+doesn't use Attentive's undocumented enable and disable methods. The next page
+doesn't load the tag while marketing is denied.
+
+## Cookies and storage
+
+Attentive can set `_attn_`, `__attentive_id`, `__attentive_dv`,
+`__attentive_ss_referrer`, `__attentive_pv`, `__attentive_cco`,
+`attntv_mstore_email`, `attntv_mstore_phone`, `__attentive_ceid`,
+`__attentive_domain` and `__attentive_client_user_id`. Some identifiers, such
+as `__attentive_id`, last up to 390 days. The reload doesn't delete them.
+Check cookies and both browser storage areas for your tag configuration.
+
+## Verify Attentive
+
+Filter the Network panel by `attn.tv`. Before consent, and after you allow an
+unrelated category, check that there is no `dtag.js` request, no Attentive
+global or iframe, and no Attentive cookies or browser storage. Allow marketing
+and inspect the tag and the bundles it loads. Withdraw marketing and confirm
+that the reloaded page doesn't load them. Test signup units and message
+delivery only with your own Attentive account.
+
+Sources: Attentive's [tag setup](https://help.attentive.com/hc/en-us/articles/10905920909460-The-Attentive-tag)
+and [cookie list](https://help.attentive.com/hc/en-us/articles/14615673918484-Attentive-cookies).
+
+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.