Build your first onboarding guide in 10 minutes

Install the SDK, mark three buttons, record three clips, and publish a welcome tour that checks itself off.

You will build a three-step welcome tour for an invoicing app: open the invoices page, start a new invoice, and send it. Swap in your own app's three most important actions.

Before you start

A PlayStep account (Free is enough)
Access to your app's code, or someone who can add one script tag

Install the SDK

Add the script tag with your development key to your app's layout:

HTML

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

Open your app once. The dashboard's install page turns green: SDK connected.

Mark three anchors

HTML

<a href="/invoices" data-guide="invoices-nav">Invoices</a>
<button data-guide="new-invoice-btn">New invoice</button>
<button data-guide="send-btn">Send</button>

Record three short clips

Record each action on its own, 3 to 5 seconds, at the size your users see. The clip guide has the details. Upload them in Clips; on Free they are compressed in your browser.

New guide › Welcome tour, name it Get started. For each step, set the anchor, a verb-first title (Open Invoices, Tap New, Send it), one sentence, and its clip. Keep They tap the anchor as the completion rule.

Preview, then publish to development

Use the live preview to click through it. Then Publish › Development, reload your app, and play it as a new user. Use a private window, since the welcome tour shows once per user.

Go live

Publish › Production. Check Overview tomorrow: the completion rate of a first onboarding guide is usually 60% or more. If one step loses people, the funnel shows which.

Keep it short. Three to five steps is the sweet spot. Teach the first win, not every feature.