How to add a product tour to a web app

A product tour is a short series of pop-ups that points at parts of your app and says what they do. Done well, it gets a new person to the thing that makes them stay. Done badly, it is five pop-ups people close in two seconds. Here is how to add one, and how to write one people finish.

Option 1: build it yourself

A tour is a positioned box, an outline around the target element, and Next and Back buttons. You can write that in an afternoon. The work that takes longer is everything around it:

• Waiting for the target to exist, because single-page apps render late.
• Repositioning on scroll and resize, and flipping above the element near the bottom of the screen.
• Remembering who finished or closed it, across devices, so it never shows twice.
• Letting someone who is not a developer change the copy without a deploy.

If you have one tour that rarely changes, building it is fine. Keep the state on the server against the user id, not in localStorage, or people get the tour again on every new laptop.

Option 2: an open-source library

Libraries such as Shepherd.js, Intro.js and Driver.js handle positioning and the step buttons. You still write each tour in code, ship it with a deploy, and store completion yourself. Check each library’s license before using it in a commercial product, since some require a paid license for that.

Option 3: a hosted tool

A hosted tool gives you a script tag, an editor for steps, and completion tracking. The trade-off is another script on your page and a monthly bill. Look at three things: how big the script is, whether pricing is published, and whether you can test a tour on your live app before customers see it. OnboardingTours is one option: about 4 KB, $0 up to 500 people a month, and every tour starts as a draft you can preview with a URL parameter.

Write a tour people finish

1. Three to five steps. Each extra step loses people. If you need ten, you need two tours on two pages.
2. Point at the action, not the menu. “Create your first invoice here” beats “This is the sidebar.”
3. Say why in one line. The title says what it is, the body says what they get from it.
4. Show it where it matters. Use a page rule so the invoices tour only runs on the invoices page.
5. Always let people close it. A closed tour is data. A tour people cannot close is a reason to leave.

Measure it

Track how many people saw step 1, how many reached the last step, and where the rest stopped. If most people drop at step 2, rewrite step 2. Then track the action the tour was for (for example Created invoice) and compare people who finished the tour with people who closed it.