Skip to main content

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.

​
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. 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. 
<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.
The async attribute is required. Zenstep loads after the page renders — it never blocks your page’s critical render path.

​
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. 
// 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",
});
You can call identify() before the snippet has fully loaded — it queues the call automatically and replays it once the snippet initialises.
Attributes are optional. If you only have a user ID: 
window.zenstep.identify("user_123");

​
Step 4 — Verify installation

  1. Open your site in Chrome with the Zenstep Chrome Extension 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

Framework guides

React, Next.js, Vue, plain JS, and Webflow installation guides.

identify() reference

Full parameter reference for identify(), including all supported attribute types.

Targeting rules

Show flows only to the right users, on the right pages, at the right time.

REST API

Authenticate and call Zenstep’s REST API from your backend.