Step editor

The Step Editor is a section within the tour builder that is displayed after starting the creation of a product tour.

In this section, creators will be guided, step by step, on how to create content using Bytes Route.

  • First, users can choose the type of step. The current options are: ‘tooltip’ and ‘modal window’
  • Second, users will be informed to select either an element on the page or the entire page for a step tour to be anchored to.
Screenshot 2023 02 02 at 09.57.56
The tour builder points the user to select an anchor element for a step
  • Third, users will be able to configure the options for that specific step, after it has been anchored.
Screenshot 2023 04 28 at 14.19.03
Configuring step options

The options for a step are:

1. Change step anchor

This option allows the content creator to select another anchor element for the current step. This is useful in case there is a user error in selecting the current step. Also, changing the step anchor might prove useful, if for some reason the HTML element is no longer present in the DOM.

2. Step content

This section allows creators to design rich content within a tour step for end-user consumption.

The creator can opt for textual, image, and video content.

We recommend providing a textual description that briefly describes the current step, helping the user understand what needs to be done next.

Once the description is filled in, a preview of the step will be available.

Step description examples:

  • “Click on this button”
  • “Let’s select an option from the dropdown”
  • “Fill in your details”
Screenshot 2023 04 28 at 14.31.43
Preview of a step containing the step description

Creators can use the rich text editor to provide end-users with in-step images (up to 200kb), videos, lists, and hyperlinks. They can also use various fonts, font stylization, headings, and alignments for advanced customization of the step content.

Note: The rich text editor may not be available on all subscription plans.

3. Step is mandatory/optional

Marking a step as optional allows the tour to skip a step in case the anchor element isn’t found on the page. Mandatory steps cannot be skipped. In case the anchored element is not found on the page, the end user will be informed by an error message.

We strongly recommend marking a step as optional, whenever dealing with a login barrier, in order for the tour to be able to skip the actual login process. If created properly, the product tours will work properly for both logged-in and non-logged-in users.

The tour builder gives creators the option of choosing how the navigation to the next step will be performed.

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, “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.

next step
A ‘step 1’ modal with the navigation set to the [Next Step] button.

Clicking on the selected element

The alternative way to navigate to the next step is to ask end-users to click on the anchored 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-dot element to continue

The tour builder gives creators the option of displaying a gray background overlay on a step. This option is only available for Modal Windows.

Screenshot 2023 10 25 at 14.10.09

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)
  5. Welcome new user – use a modal window step type, write using the step content a very short introduction text with background overlay ON

Need Help with Onboarding?
Tell Us Your Challenges.