heytappr.book a demo

free tool

build a product tour by clicking, then take the code

click the buttons you want in the demo app, write what each step says, watch it play, and export it for driver.js, shepherd, intro.js, react joyride or reactour. no signup, nothing leaves your browser.

invoices

customeramountstatus
northwind$1,200paid
globex$860overdue
initech$2,450draft

click anything in the demo app to add it as a step. the badge is how likely that selector is to survive a redesign.

steps (3)

  1. 0195/100
  2. 0278/100
  3. 0380/100

export

npm install driver.js
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const tour = driver({
  showProgress: true,
  steps: [
    {
      element: "[data-testid=\"new-invoice\"]",
      popover: {
        title: "create your first invoice",
        description: "start here. pick a customer and add a line item.",
        side: "bottom",
      },
    },
    {
      element: "button[aria-label=\"Export CSV\"]",
      popover: {
        title: "get your data out",
        description: "export every invoice on this page as a csv.",
        side: "bottom",
      },
    },
    {
      element: "#invite-teammate",
      popover: {
        title: "bring in your accountant",
        description: "invite a teammate so they can see invoices too.",
        side: "left",
      },
    },
  ],
});

tour.drive();

license: MIT. free for commercial use.

use it on your own app

drag this button to your bookmarks bar, open your app (localhost and staging work too), and click it. hover to highlight, click to add a step, press done. the steps open back here, ready to export. desktop browsers only.

✦ tour builder

some sites block bookmarklets with a strict content security policy. if nothing happens when you click it, that's why. the selectors are picked the same way as in the demo above, preferring test ids and labels over position.

why we made a tour builder

most teams that pick an open-source tour library end up writing the steps by hand. someone opens devtools, copies a selector, pastes it into a config file, reloads, and repeats that for every step. it works. it's also slow, and the selectors people copy out of devtools are usually the worst ones on the page, full of generated class names and nesting that won't survive the next refactor.

so this builder does the boring part. it picks the sturdiest selector it can find for each element, prefers test ids and labels over position, and tells you when a step is resting on something flimsy. the export is plain code you own. there's no script to load from us and nothing to sign up for.

picking a library

if you don't have a strong opinion, start with driver.js. it's small, it has no framework dependency, and it's MIT licensed. in a react app, react joyride and reactour let the tour live next to your components. shepherd and intro.js are both capable and well documented, but they're AGPL, so check the license before you ship them in a closed-source product.

the part no builder fixes

a hand-written tour is a snapshot of your markup on the day you wrote it. rename a class, move a button into a menu, and a step quietly points at nothing. stable attributes help a lot (our selector checker explains why), and so does running the tour as part of release qa.

it's also the reason we built heytappr the way we did. instead of a fixed tour everyone clicks through, users ask for help in their own words and heytappr walks them through a guide your team approved, spotlighting the real controls. when a release breaks a step, it shows up in a needs-attention list before users run into it. more on that in why everyone skips your product tour.

questions

Which product tour library should I use?

Driver.js is small and MIT licensed, so it's a good default for most web apps. React Joyride and Reactour fit React apps that want tours as components. Shepherd.js and Intro.js are mature and flexible, but both are AGPL, which means closed-source commercial use needs a paid license.

Is this product tour builder free?

Yes. There's no signup, and everything runs in your browser. The tour you build is saved only in the page's URL, which is how the share link works.

Can I build a tour for my own app, not the demo?

Yes. Drag the bookmarklet to your bookmarks bar, open your app and click it. Click the elements you want, press done, and the steps open in the builder ready to export. Sites with a strict content security policy can block bookmarklets.

Why does each step have a score?

Every tour step points at a CSS selector. The score estimates how likely that selector is to keep matching after a redesign. Test ids and labels score high; generated class names and position-based selectors score low.

Will the exported tour break when our UI changes?

It can. Hand-written tours are tied to the markup at the moment you wrote them. Stable attributes like data-testid make them last much longer, and it's worth re-running the tour in release QA.