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

Add this <script> tag to your index.html — at the project root for Vite, or in public/ for Create React App. Loading from HTML keeps StepsKit out of your bundle and lets the browser cache it across reloads.

<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 identify. StepsKit re-evaluates which tours should play now that it knows who the visitor is.

async function handleLogin(credentials) {
  const user = await login(credentials);

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

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: {
    identify(attrs: StepsKitAttributes): Promise<void>;
    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 identify. Tours targeted at anonymous visitors will still play, and "show once" rules fall back to a session-scoped check.