Step editor

The Step Editor is a modal window that is displayed after selecting a page element with the Element selector.

In this window, creators can add a step description and choose how the end-user navigates on specific steps. The step description is what the end-user sees on a step when running the tour. It should describe the current step and help the user understand what she needs to do next.

Step description examples:

  • “Click this element/button”
  • “Let’s select an option from the dropdown”
  • “Check the appropriate setting”
  • “Fill in your details”
step editor
Step editor

Optional step

Marking a step as optional allows the tour to automatically skip a step in case the anchor element isn’t found on the page.

We strongly recommend marking a step as optional, whenever dealing with a login barrier. If created properly, the product tours will work properly for both logged-in and non-logged-in users.

When you right-click a page element in order to mark it as a step, the system gives creators the option of choosing how the navigation to the next step will be performed.

nav options
The navigation options section inside the “Step editor” window

Next button navigation

With this option checked, the end-users will have to press the [Next step] button in order to advance in the tour.

When selecting the navigation via Next Step, an extra option, named “Allow element interaction” becomes available. This lets the end-user interact with the element before pressing next. A good use case for using this option is when typing in a text input before going to the next step. By default, this option is off.

If creators want to block the interaction with the step element, they can let the option unchecked. This is useful when recording steps within an onboarding tour that contains links or buttons that might slow down the progress of the tour.

next step
The step pop-up with the navigation set to the [Next Step] button. The user has to press the [Next Step] button to continue

Element click navigation

The alternative way to navigate to the next step is to ask end-users to click a page element. In this case, the [Next step] button will be hidden. This navigation option is useful for Helper-type guides or when you are trying to make a user perform an action on that step, thus developing muscle memory for returning users.

elem click
The step pop-up with navigation is set to “Element clicking”. The user has to press the 3-dots element to continue

The tour builder will automatically detect the state where the user is, and will keep her informed at all times. In the below picture, the user is currently handling the options for the first step of a product tour.

Screenshot 2022 12 16 at 11.01.57
The tour builder informs the user to configure the options for a step

Helper tour building scenario

Let’s say we want to create a tour that teaches users how to register on the website, and then log in

We plan to have the following steps:

  1. Fill in the registration form (navigation: next step – element interaction ON)
  2. Press the [Register] button (navigation: click element), you will be redirected to the login
  3. Fill in the login information (navigation: next step – element interaction ON)
  4. Press [Login] button (navigation: click element)