Install StepsKit (React)

For React apps built with Vite, Create React App, or any plain React setup. Next.js users — there's a dedicated guide that uses next/script.

Add the script tag to index.html

Loading StepsKit from your index.html keeps it out of your bundle and lets the browser cache it across reloads:

<!-- public/index.html (CRA) or index.html (Vite) -->
<script
  src="https://cdn.stepskit.com/stepskit.latest.js"
  data-api-key="YOUR_API_KEY"
  async
></script>

Once the script loads, StepsKit reads data-api-key, fetches your project's active tours, and waits for instructions.

Identify the user after login

Anywhere you have the user object — your auth callback, a TanStack Query onSuccess, your Zustand/Redux login action — call setUserAttributes. The autoRefresh: true option tells StepsKit to re-evaluate which tours should play now that it knows who the visitor is.

function onLoginSuccess(user: User) {
  window.stepskit?.setUserAttributes(
    {
      id: user.id,
      email: user.email,
      plan: user.plan,
    },
    { autoRefresh: true },
  );
}

The optional chaining (?.) is important: in development the script might not have finished loading yet when your auth callback fires.

TypeScript

StepsKit ships its own type declarations from @stepskit/embed. If you're not importing the package and just want types for the global, add a one-line ambient declaration:

// global.d.ts
type StepsKitAttributes = Record<string, string | number | boolean>;

interface Window {
  stepskit?: {
    setUserAttributes(
      attrs: StepsKitAttributes,
      options?: { autoRefresh?: boolean },
    ): Promise<void>;
    playTour(tourId: string): Promise<void>;
    stopTour(): void;
    refresh(): Promise<void>;
    // ...see /docs/api for the full surface
  };
}

See the JavaScript API reference for the complete list of methods.

Without a backend user

For signed-out routes you can simply skip setUserAttributes. Tours targeted at anonymous visitors will still play, and "show once" rules fall back to a session-scoped check.