StepsKit developer docs

StepsKit plays product tours in your web app. Install the package, identify your users, and the tours you build in the dashboard show up at the right moment for the right people.

Quickstart

If your project has a package.json and a bundler, it's one dependency and one call. Replace YOUR_API_KEY with the key from your project's Integrations page.

npm install stepskit

React, Next.js, or Remix — render the component once, at the root of your tree. It renders nothing and is StrictMode-safe.

import { StepsKit } from "stepskit/react";

// Render once, at the root of your app.
<StepsKit apiKey="YOUR_API_KEY" />

Anything else that bundles — Vue, Angular, Svelte, Astro, plain JavaScript — call init() once, at your entry point.

import stepskit from "stepskit";

// Call once, at your app's entry point. SSR-safe and idempotent.
stepskit.init("YOUR_API_KEY");

Then tell StepsKit who the visitor is, as soon as your auth state resolves. Calls made before the engine finishes loading are queued and replayed in order, so you never have to wait for it.

import stepskit from "stepskit";

stepskit.identify({ id: user.id, email: user.email, plan: user.plan });

That's it. StepsKit fetches the active tours for your project and decides which (if any) to play based on the rules you set in the dashboard.

id is the key that makes "show once" and audience targeting work — without it every visitor looks new.

No build step?

WordPress, a CMS theme, Google Tag Manager, plain HTML, or a server-rendered app with no JavaScript build: paste the <script> snippet instead — there is nothing to bundle a dependency into. It loads the same engine and behaves identically at runtime. Use one or the other; running both loads two embed instances.

Pick a framework

The install overview covers the package itself — init() options, CSP, TypeScript, CommonJS — and links every guide. The common ones:

Going deeper