# Optimizely

The c15t optimizelyWeb helper loads the Optimizely Web snippet only after visitors allow experience in Inth. On withdrawal, c15t removes the snippet and reloads the page.

## Key facts

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

## Links

- [Documentation](https://c15t.com/docs/integrations/optimizely)
- [Optimizely](https://www.optimizely.com/)

Run Optimizely Web experiments only after visitors allow experience. A withdrawal reloads the page, and Optimizely stops.

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 your Optimizely project number. Find it before .js in the snippet URL under Settings > Implementation.

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 Optimizely

Before experience has permission, the c15t optimizelyWeb helper creates no Optimizely global and sends no Optimizely request.

After permission, c15t adds the snippet to the head with async: false. Optimizely starts its experiments when the snippet runs.

The SDK cannot unload after it starts. So on withdrawal, c15t removes the snippet and reloads the page. The new page blocks the snippet until the next grant.

Visitors can see the original page before Optimizely applies a variation. Plan your experiments for this flicker and for visitors who do not give consent.

[Read the Optimizely snippet guide](https://docs.optimizely.com/web-experimentation/docs/implement-the-one-line-javascript-snippet)

## Installation

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

### Wait for permission

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

```ts
optimizelyWeb({ projectId })
```

An opt-out policy or no policy gives optional categories permission before a choice. Then Optimizely 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 Optimizely.

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

#### Add your project number

The helper loads https://cdn.optimizely.com/js/\<projectId>.js. Use a category condition such as { and: \['experience', 'measurement'\] } if your policy needs both.

```
import { optimizelyWeb } from '@c15t/integrations/optimizely';

export const scripts = [optimizelyWeb({ projectId: '12345678' })];
```

A blank or non-numeric project number logs an error, and the snippet does not load. Use one Optimizely snippet per page.

### 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 original Optimizely snippet and each tag manager copy. For an opt-out that stays, call optOutOptimizely(). It sets a ten year optimizelyOptOut cookie that a later grant does not clear.

## Verify your setup

Use your own test project and a clean browser profile with an opt-in policy. Open DevTools Network and filter by optimizely.com. Then test the three states.

- **Before a choice**: The snippet does not load. The optimizely global, Optimizely cookies and optimizely\_data$$ keys are absent.

- **After you allow experience**: The project .js request appears, and window.optimizely.get is a function. Check experiment behavior in your test project.

- **After you withdraw experience**: Save your choice. c15t reloads the page, and the snippet stays blocked. Allow experience again and make sure that experiments come back.

A reload keeps cookies and localStorage. Use the clear on revocation setting of your framework to remove the storage that your site uses.

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

## Related guides

- [Wisepops](/integrations/wisepops)

- [Adobe Target](/integrations/adobe-target)

- [Appcues](/integrations/appcues)