# Appcues

The c15t appcues helper loads Appcues only after visitors allow experience in Inth. It calls Appcues.reset() on withdrawal, and c15t reloads the page.

## Key facts

- **Tool:** Appcues
- **Category:** Other
- **Consent categories:** Experience
- **Setup method:** c15t package
- **Package:** @c15t/integrations

## Links

- [Documentation](https://c15t.com/docs/integrations/appcues)
- [Appcues](https://www.appcues.com/)

Show Appcues flows, tooltips and checklists only after visitors allow experience. Send signed-in users to Appcues from one onReady callback.

Inth keeps the consent record of each choice, with the visitor’s country and the policy that applied.

[Start for free](/dashboard/sign-up)

## Before you start

You need an Inth project that connects to your app, c15t in that app and the account ID from the Appcues installation snippet. Set region: 'eu' for an EU account.

New to c15t? Complete the quickstart for your framework first. Keep its Inth endpoint, policy, styles and consent UI.

[Open the quickstart for your framework](https://c15t.com/docs/frameworks)

## How consent works with Appcues

Before experience has permission, the c15t appcues helper sets no AppcuesSettings and requests nothing from Appcues.

After permission, the helper sets AppcuesSettings and loads the account loader. onReady runs one time per successful load, while the script still has consent.

On withdrawal, the helper calls Appcues.reset() and removes the loader. Then c15t reloads the page. reset() clears the user and each flow in progress, but the SDK runs until the reload.

A withdrawal during the download stops onReady.

[Read the Appcues JavaScript API](https://docs.appcues.com/dev-api-data/javascript-api-developer)

## Installation

Appcues has one load mode in c15t. The helper waits for experience permission.

### Wait for permission

No request goes to Appcues until the visitor accepts experience. On withdrawal, Appcues resets, and c15t reloads the page.

```ts
appcues({ accountId })
```

An opt-out policy or no policy gives optional categories permission before a choice. Then Appcues loads on the first page. This guide uses an opt-in policy.

## Setup steps

#### Install the integration package

Add the helpers next to c15t. An import alone does not start Appcues.

```
pnpm add @c15t/integrations
```

#### Add your account ID

Put the identify, group and track calls in onReady. Use the real ID of the signed-in user. Skip the calls for visitors without a sign-in.

```
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.
      // window.Appcues?.identify?.('CURRENT_USER_ID');
    },
  }),
];
```

An empty account ID logs an error, and Appcues does not load. To change the category, set category on the returned script when you register it.

### Register it with your existing setup

#### Next.js

Add scripts to c15t.config.ts, next to next.config.ts. Keep the rest of your config, such as mode, in the same call. App Router, Pages Router and static export read the same file.

```
import { defineConsentConfig } from 'c15t/next';
import { scripts } from './src/consent-scripts';

export default defineConsentConfig({ scripts });
```

#### TanStack Start

Pass scripts to the ConsentRoot in your root route. Import helpers in the route module, not in a server function: script configurations carry callbacks.

```
import { scripts } from '../consent-scripts';

<ConsentRoot state={consent} scripts={scripts}>
```

#### React

Add scripts to the options of your ConsentProvider, next to mode. Keep the banner, dialog and preferences link inside the provider.

```
import { scripts } from './consent-scripts';

<ConsentProvider options={{ mode, scripts }}>
```

#### Nuxt

Register scripts under the c15t key in app.config.ts. Keep them out of nuxt.config.ts, which reaches the browser as JSON and drops the helper callbacks.

```
import { scripts } from '../src/consent-scripts';

export default defineAppConfig({
  c15t: { scripts },
});
```

#### Vue

Pass scripts to the c15tVue plugin call you have now. The plugin starts one script loader when the app mounts.

```
import { c15tVue, manifest } from 'c15t/vue/vue-plugin';
import { scripts } from './consent-scripts';

app.use(c15tVue, {
  mode: manifest(),
  scripts,
});
```

#### Astro

Add scripts to the client entrypoint, which the integration finds on its own. Keep helpers out of astro.config.mjs: its options are serialized into the page.

```
import type { C15tClientOptionsExtension } from 'c15t/astro';
import { scripts } from './consent-scripts';

export default { scripts } satisfies C15tClientOptionsExtension;
```

#### Svelte

Pass scripts as a prop to the ConsentProvider you have now. The provider owns the loader and disposes it on unmount.

```
<script lang="ts">
  import { ConsentProvider, manifest } from 'c15t/svelte';
  import { scripts } from './consent-scripts';
</script>

<ConsentProvider mode={manifest()} {scripts}>
  <!-- Your app and consent UI -->
</ConsentProvider>
```

#### SvelteKit

Add scripts to the ConsentRoot in the root layout. Import helpers in the layout component, not in +layout.server.ts: a server load cannot send functions to the browser.

```
<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()}
</ConsentRoot>
```

#### HTML: Paste the vendor’s snippet behind consent

The helpers need a bundler. On a page with the c15t script tag, paste the vendor’s own snippet instead and keep it inert until visitors allow its category. Helper options, such as loadMode, do not apply.

```
<script type="text/plain" data-c15t-category="experience">
  // The vendor's snippet, unchanged
</script>
```

#### JavaScript

Pass scripts to init() from @c15t/browser, next to your mode. With createConsentRuntime, pass scripts to it instead.

```
import { init, manifest } from '@c15t/browser';
import { scripts } from './consent-scripts';

const consent = init({
  mode: manifest(),
  scripts,
});
```

Remove the Appcues snippet and each tag manager entry, so Appcues loads only through c15t. If sign-in ends after onReady, check consent for experience and the appcues vendor first. Then make the identify call.

## Verify your setup

Use a fresh browser profile with an opt-in policy. Open DevTools Network and Application, and filter by appcues. Then test the three states.

- **Before a choice**: No request goes to an Appcues host. window.Appcues and window.AppcuesSettings are absent, and no apc\_ storage key appears. Allow only measurement and check again.

- **After you allow experience**: The account loader and the runtime load without a page reload, and onReady runs.

- **After you withdraw experience**: Save your choice. c15t reloads the page, and the loader stays absent until a new grant.

reset() does not promise to erase every Appcues key. Test which flows show, and for which users, with your own Appcues account.

[Open the full Appcues guide](https://c15t.com/docs/integrations/appcues)

## Related guides

- [Dynamic Yield](/integrations/dynamic-yield)

- [Optimizely Web Experimentation](/integrations/optimizely)

- [Wisepops](/integrations/wisepops)