StepsKit developer docs

StepsKit is a tiny embeddable script that plays product tours in your web app. Drop in a script tag, identify your users, and the tours you build in the dashboard show up at the right moment for the right people.

Quickstart

Add this <script> to your site, right before </body>. Replace YOUR_API_KEY with the key from your project's Integrations page.

<script>
  (function () {
    var stepskit = window.stepskit = window.stepskit || {};
    stepskit._q = stepskit._q || [];

    // Queue API calls made before the SDK finishes loading.
    var methods = ['identify', 'setUserAttributes', 'track', 'refresh', 'playTour', 'stopTour', 'dismissAnnouncement', 'on', 'off', 'destroy', 'validateEnvironment'];
    methods.forEach(function (method) {
      stepskit[method] = stepskit[method] || function () {
        stepskit._q.push([method].concat([].slice.call(arguments)));
      };
    });

    // Load the StepsKit SDK asynchronously.
    var script = document.createElement('script');
    script.async = true;
    script.src = 'https://cdn.stepskit.com/stepskit.latest.js';
    script.setAttribute('data-api-key', 'YOUR_API_KEY');

    var first = document.getElementsByTagName('script')[0];
    first.parentNode.insertBefore(script, first);
  })();

  stepskit.identify({ id: 'user_123' });
</script>

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.

Pick a framework

  • JavaScript / Script tag — for server-rendered apps or any site where you can drop a <script> tag.
  • React — for Vite, Create React App, or any plain React setup.
  • Next.js — uses next/script for optimal loading.

Going deeper