Quickstart

Add PlayStep to a website with one script tag, mark a button, and see your first guide in about 10 minutes.

The script tag is the fastest way to start on the web. It works with any site or framework. If you use a bundler, see npm or React.

Create a free account

PlayStep is opening to teams one at a time: request a demo to get an account. Then name your workspace and add your app. You get a development and a production key. Start with the development key.

Add the script tag

Paste this before </body> on every page, with your development key:

HTML

<script async src="https://cdn.playstep.app/sdk/v1/loader.js"
        data-app-key="ps_pub_dev_your_key"></script>

The loader is under 3 KB. It fetches your published guides once and loads the guide UI only when a guide is about to show. As soon as a page loads it, the dashboard shows SDK connected.

Mark the elements your guides point at

Add a data-guide attribute to each element a step should spotlight:

HTML

<button data-guide="new-invoice-btn">New invoice</button>

Anchor ids are lowercase words separated by dashes. They stay the same when you restyle or move the element, so guides keep working.

Build and publish a guide

In the dashboard, choose New guide, start from the welcome tour, point a step at new-invoice-btn, and Publish to development. Reload your page: the guide plays within a minute.

Tell PlayStep who the user is

Guides work for anonymous visitors. If people sign in, call identify so progress follows them across devices and segments can target them:

HTML

<script>
  playstep.identify(currentUser.id, { plan: currentUser.plan })
</script>

The id is hashed in the browser before it is sent.

Next steps

Your first guide walks through the dashboard in detail.
Triggers decide when a guide starts.
The web SDK reference lists every method.