Adding a step without opening your app

Type an element's CSS selector in UserSignal to add or edit a step, and keep tours working when your app changes.

If you know the element's CSS selector, you can add or edit a step straight from UserSignal. In the tour's editor, press Add here, typing the element, or the pencil next to a step.

The step form: tooltip or pop-up, the element's CSS selector, title and text, an image or video, and what Next does

The form has everything the builder has: tooltip or pop-up, the element, title and text, an image, GIF or video, position, how the step moves on, what Next does, and a link button. A tooltip needs an element; a pop-up doesn't.

Writing a selector

An id: #save-button.
A class: .nav .payments.
An attribute: [data-usersignal-target="invite"].

If several elements match, the tour uses the first one on screen.

Keep tours working when your app changes

A selector built from generated class names or from an element's position breaks the next time your app's layout changes. The most durable way is to give the elements your tours point at an attribute of their own:

<button data-usersignal-target="new-report">New report</button>

When you pick an element in the builder, it uses data-usersignal-target first, then test ids such as data-testid, then ids and the class names your team wrote, and avoids generated ones.