> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getzenstep.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation Overview

> Install Zenstep in any web framework. The snippet is a single async script tag — no npm package required.

## How the snippet works

The Zenstep snippet is a CDN-hosted IIFE bundle (`≤30 KB gzipped`). When it loads it:

1. Reads `data-zenstep` from its own `<script>` tag to get your snippet key
2. Fetches your published flows from the Zenstep API
3. Renders guides inside an isolated Shadow DOM — no style leakage to or from your app

Because it's async and isolated, Zenstep has **zero impact** on your Core Web Vitals.

***

## Installation methods

<CardGroup cols={2}>
  <Card title="React" icon="react" href="/installation/react">
    useEffect hook, conditional loading, SPA navigation support.
  </Card>

  <Card title="Next.js" icon="triangle" href="/installation/nextjs">
    App Router and Pages Router patterns, next/script, identify in Server
    Components.
  </Card>

  <Card title="Vue" icon="vuejs" href="/installation/vue">
    Options API and Composition API patterns, Nuxt support.
  </Card>

  <Card title="Plain JavaScript" icon="js" href="/installation/plain-js">
    Vanilla JS, jQuery, or any non-framework setup.
  </Card>

  <Card title="Webflow" icon="globe" href="/installation/webflow">
    Add the snippet via Webflow's custom code editor.
  </Card>
</CardGroup>

***

## Environment separation

Use a different snippet key for staging vs production. Create a second organisation in Zenstep (or use a second project if available on your plan) and copy its snippet key for staging.

This keeps your internal testing flows completely separate from what your real users see.

***

## Content Security Policy

If your app uses a strict CSP, add these directives:

```
script-src 'self' https://cdn.getzenstep.com;
connect-src 'self' https://app.getzenstep.com;
```

The snippet does not use inline scripts or `eval`.

***

## Verifying the snippet is active

After installing, open the browser console on your site. Within a few seconds you should see:

```
[Zenstep] Loaded N flow(s)
```

If you see `[Zenstep] No snippet key found` — check that `data-zenstep` is set on the `<script>` tag.

You can also install the [Zenstep Chrome Extension](https://chrome.google.com/webstore/detail/zenstep) — it shows a green indicator in the toolbar when the snippet is detected on the current page.