Let users replay guides

Add "Replay product tours" to your own menu, turn off the floating button, and let guides start again without signing anyone out.

People skip a tour, or come back weeks later and want a refresher. PlayStep gives you two tools for that: the launcher, a list of the guides people can replay, and resetProgress(), which lets guides start again on their own. Neither signs the user out or needs a reload.

Before you start

The SDK, version 0.2 or later. The /sdk/v1/ script tag gets it automatically.
At least one live guide with List it in the launcher on, in the guide's settings.

The floating "?" button sits in a corner where many apps already have a chat or help button. To use an item in your own menu instead:

Turn off the floating button

In the dashboard, open Guides › Launcher for the environment and turn off Show the floating button. Your guides stay listed; only the button goes.

HTML

<button type="button" onclick="playstep.openLauncher({ anchor: this })">Replay product tours</button>

anchor opens the list next to your button instead of in a corner. In React, call usePlayStep().openLauncher({ anchor }); in Flutter, PlayStep.openLauncher().

Try it

Open the list from your menu. It opens next to your menu item and takes focus. Its close button or Esc closes it and gives focus back to your menu item. If a guide is showing, it waits while the list is open and carries on when it closes.

Each guide the user has started shows Replay, which plays it again from its first step. Start over lets every guide start again, as if the user had never seen them.

Let guides start again on their own

For a setting such as "Show me the tips again", clear what the browser remembers about guides:

TypeScript

playstep.resetProgress()

Guides for the current page start again straight away. Others start the next time their trigger fires: a visit to their page, or your event. Guides with once: true get one more turn.

To replay one guide right now:

TypeScript

playstep.resetProgress('create-first-invoice')
playstep.start('create-first-invoice')

What stays and what goes

	`resetProgress()`	`reset()`
Guide progress	Cleared, for one guide or all	Cleared
The user and their traits	Kept	Forgotten
Device id	Kept	Forgotten
Guides for the current page	Start again straight away	Start on the next page view
Use it for	A "replay tours" option	Sign-out

Each resetProgress() reports a progress_reset event, with guide_id when you named one guide, to your onEvent handler. Count them to see how often people ask for a refresher.

Good to know

Progress is stored on each device for now. A reset applies to the browser or app it runs in, and a guide someone finished on a laptop can start again on their phone.
A preview from the dashboard's Open in my app keeps its progress in memory. It never changes the progress stored in your browser, so after testing a draft you still see the live guide as your users do.

Guides that start anywhere

A guide played from the list can start on any page. Begin it with a page step that points at the menu link and completes on the page it opens: the guide skips it when the user is already there.

Testing a once-guide? Run playstep.resetProgress() in your browser's console to see it again without clearing storage.