Install StepsKit (JavaScript)

For server-rendered apps or any site where you can edit the markup, the simplest install is one <script> snippet.

Add the script tag

Place this just before the closing </body> tag on every page where you want tours to be available:

<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);
  })();
</script>

StepsKit initializes itself once the script loads — no extra wiring needed.

Identify the user

Once you have the current user, call stepskit.identify() to pass their details for tour targeting:

<script>
  stepskit.identify({
    id: "user_123",
    email: "user@example.com",
    plan: "pro",
    company: "Acme Inc",
  });
</script>

id is the one to always pass if you can — frequency capping and visitor identification both rely on it.

For static, server-rendered installs you can also pass user details via data-user-* attributes on a plain script tag — StepsKit reads any data-user-<key> attribute and exposes it for targeting:

<script
  src="https://cdn.stepskit.com/stepskit.latest.js"
  data-api-key="YOUR_API_KEY"
  data-user-id="user_123"
  data-user-email="user@example.com"
  data-user-plan="pro"
  async
></script>

Anonymous visitors

If you don't have a user object yet (marketing site, signed-out screens), just leave the data-user-* attributes off and skip the identify call. Tours that don't require a specific user will still play, and "show once" rules degrade gracefully.

Updating user data after page load

If the user logs in or upgrades plan after the script has loaded, call window.stepskit.setUserAttributes() from JavaScript. See the JavaScript API reference.

Attribute limits

StepsKit validates every attribute you pass via data-user-* or stepskit.identify(). The rules below match what the dashboard's targeting editor enforces. Violations are logged as console.warn and the offending key is dropped — the rest of your payload still goes through. Check stepskit.validateEnvironment().warnings to see the accumulated drops.