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.

​
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

React

useEffect hook, conditional loading, SPA navigation support.

Next.js

App Router and Pages Router patterns, next/script, identify in Server Components.

Vue

Options API and Composition API patterns, Nuxt support.

Plain JavaScript

Vanilla JS, jQuery, or any non-framework setup.

Webflow

Add the snippet via Webflow’s custom code editor.

​
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 — it shows a green indicator in the toolbar when the snippet is detected on the current page.