• 1. Introduction
• 2. Getting started
• 3. Creating a tour
  • 3.1 Creating product tours
  • 3.2 Tour types
  • 3.3 Using the Chrome extension
  • 3.4 Element selector
  • 3.5 Step editor
  • 3.6 Finalizing a tour
  • 3.7 Testing a tour
  • 3.8 Editing a tour
  • 3.9 Duplicating a tour
• 4. Tour run methods
• 5. Tour analytics
• 6. Teams
• 7. UI Themes
• 8. Multi-languages
• 9. Launch widget
• 10. Web app pages
• 11. Script installing methods

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”

The "Step editor" window appears after right-clicking something with the element selector

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.

The navigation options section inside the "Step editor" window

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.

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

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.

The step pop-up with navigation set to "Element clicking". The user has to press the 3-dots element to continue

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

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)