Install StepsKit (HTML)

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

Add the script tag

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

<script
  src="https://cdn.stepskit.com/stepskit.latest.js"
  data-api-key="YOUR_API_KEY"
  async
></script>

async lets the browser keep parsing your page while the script downloads. StepsKit initializes itself once it loads — no extra wiring needed.

Identify the user

If your server can render the current user into the page, pass their details via data-user-* attributes. 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"
  data-user-company="Acme Inc"
  async
></script>

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

Anonymous visitors

If you don't have a user object yet (marketing site, signed-out screens), just leave the data-user-* attributes off. 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.