---
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
lastModified: "2026-10-26T22:16:35Z"
lastAuthor: Kaylee
---
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](/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](/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](/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](/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](/docs/frameworks/react/quickstart). Keep the banner,
dialog and preferences link inside the provider. See
[React scripts and embeds](/docs/frameworks/react/scripts).

**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](/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](/docs/frameworks/vue/scripts).

**Astro**

Add the scripts to the client entrypoint from the
[Astro quickstart](/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](/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](/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](/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](/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](/docs/integrations/building-integrations), 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](/docs/integrations/overview#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](/docs/integrations/overview#vendor-switches-and-cookie-cleanup). The
[consent verification guide](/docs/guides/verify-consent) covers navigation,
expiry and hosting checks.