Building a tour in your app

Open your app with the builder on top, pick elements and write each step where it will show.

You build a tour on your own app's pages, so each step looks exactly as your users will see it. No code and no browser extension are needed.

1. Open your app

In the tour's editor, press Edit in your app and enter the address of the page the tour starts on. It opens in a new tab with the builder on top.

Sign in to your app first if the page needs it. If your app sends you to its login page, the builder doesn't come along.
If the builder doesn't appear, reload that page with Cmd/Ctrl + Shift + R. Your browser may still be using an older copy of the widget.

2. Pick an element

The bar at the bottom says Click the element this step should point at. Move over the page: the element under the pointer is outlined and named. Click it to create the step.

The builder in pick mode, with the Reports link outlined and the bar at the bottom of the page

While you pick, clicks don't reach your app. To use your app normally, for example to open a menu or go to another page, switch to Use the page, or hold Shift.
For a step that points at nothing, press No element: make it a pop-up.

3. Write the step

Type the title and the text in the step itself. The icons below the text add an image or GIF (up to 10 MB), a video (a YouTube, Vimeo or Loom link, or an MP4 up to 25 MB) and a link button.

A step being written next to the Reports link, with its settings panel beside it and the tour's steps in the bar

The panel beside the step sets:

Shows as: a tooltip that points at the element, or a pop-up in the middle of the page.
Position: above, below, left or right of the element. Automatic takes the first side with room.
Go to the next step when they: click Next, or click the element itself.
Dim the rest of the page and Let them close it.
Next button text, and When they click Next. See Moving between pages, tours and app actions.
Advanced shows the element's CSS selector, which you can edit.

Everything saves as you type: the bar says Saved.

4. Add more steps, preview, and finish

The numbers in the bar are your steps. Click one to edit it, and + to add a step.
Preview plays the tour on the page as your users will see it.
Done takes you back to the tour in UserSignal, where you can reorder steps and publish.

The builder stays open while you move around your app in the same tab, for up to 8 hours. After that, open it again from UserSignal.