> ## 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.

# Quickstart

> Add Zenstep to your app in under 5 minutes — install the snippet, call identify, and verify it's working.

## What you'll build

By the end of this guide you'll have:

* The Zenstep snippet loading on your site
* User identity flowing into the Zenstep dashboard
* A test flow visible on your page

***

## Step 1 — Get your Snippet Key

Your snippet key is on the **Install** page in the [Zenstep dashboard](https://app.getzenstep.com/install). It looks like:

```
a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
```

Every organisation has one key. Keep it out of `.env` files that get committed — it's safe to be public (read-only by design), but avoid accidental exposure.

***

## Step 2 — Add the snippet

Paste this `<script>` tag just before `</body>` on every page you want Zenstep to run on.

```html theme={null}
<script
  async
  src="https://cdn.getzenstep.com/v1/snippet.js"
  data-zenstep="YOUR_SNIPPET_KEY"
></script>
```

Replace `YOUR_SNIPPET_KEY` with the key from Step 1.

<Note>
  The `async` attribute is required. Zenstep loads after the page renders — it
  never blocks your page's critical render path.
</Note>

***

## Step 3 — Identify your users

Call `window.zenstep.identify()` after a user signs in. Pass their unique ID and any attributes you want to use for targeting.

```javascript theme={null}
// Call after login / on every page load for authenticated users
window.zenstep.identify("user_123", {
  email: "ada@example.com",
  plan: "grow",
  role: "admin",
  company: "Acme Corp",
  createdAt: "2024-09-01",
});
```

<Tip>
  You can call `identify()` before the snippet has fully loaded — it queues the
  call automatically and replays it once the snippet initialises.
</Tip>

**Attributes are optional.** If you only have a user ID:

```javascript theme={null}
window.zenstep.identify("user_123");
```

***

## Step 4 — Verify installation

1. Open your site in Chrome with the [Zenstep Chrome Extension](https://chrome.google.com/webstore/detail/zenstep) installed.
2. The extension toolbar icon turns **green** when the snippet is detected.
3. In the dashboard, go to **Install** — you'll see a "Snippet detected" confirmation within 30 seconds of the snippet loading.

Alternatively, open the browser console and check for:

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

***

## Step 5 — Publish your first flow

1. In the dashboard, go to **Guide → Tours → New Tour**.
2. Use the Chrome Extension to point-and-click your way through the steps.
3. Click **Publish** — the flow goes live immediately.
4. Reload your app — the tour appears.

***

## Next steps

<CardGroup cols={2}>
  <Card title="Framework guides" icon="code" href="/installation/overview">
    React, Next.js, Vue, plain JS, and Webflow installation guides.
  </Card>

  <Card title="identify() reference" icon="user" href="/snippet-api/identify">
    Full parameter reference for `identify()`, including all supported attribute
    types.
  </Card>

  <Card title="Targeting rules" icon="filter" href="/targeting-reference/overview">
    Show flows only to the right users, on the right pages, at the right time.
  </Card>

  <Card title="REST API" icon="server" href="/rest-api/authentication">
    Authenticate and call Zenstep's REST API from your backend.
  </Card>
</CardGroup>