Manual steps are interactive prompts that require user action to proceed through a tour. These steps engage users, ensuring they understand and interact with key features before moving on to the next part of the journey.

Different Types of Manual Steps:

1- Modal: A window that overlays the main content, capturing the user's attention by appearing in the center of the screen.

Configure options:

  • By default, the modal appears center with a 100px top margin, and its position is not fixed.
  • Position: Adjust the placement by modifying the border margin.
  • Fixed position: Enable this option to keep the modal fixed in place, ensuring it stays visible as the user scrolls.

2- Pointer: A tooltip that highlights and points to a specific element on the page, helping users focus on important parts of the UI.

element Positioning: link the pointer step to a specific HTML element using the browser extension.


Configure Options:

  • Highlight: Set whether the element should. be highlighted by darkening everything except the element and the pointer bubble.
  • Coordinates: Define the absolute position of the pointer.
  • Orientation: specify whether the pointer appears at the bottom, top, left, or right of the element.

3- Slideout: A panel that slides into view from the bottom left or right corner, providing additional information without covering the entire screen.


Configure Option:

  • Set its position to appear at the bottom left or bottom right corner.


Configure Button Options and Progress in Tour Steps


1- Buttons and Their Functions



  • Next Step: Moves the users to the next step in the tour.
  • Previous Step: Returns the user to the previous step.
  • Go to Step: Takes the user directly to a specific step within the tour.
  • Go to URL: Redirects the user to a specific web page.
  • Another Tour: Starts a new tour after the current one.
  • Check again after 3 days: Once clicked, the tour will pause and resume after 72 hours.
  • Close Tour: ends the current tour.


2- Button Alignment

  • Left: Align the buttons to the left side of the step.
  • Center: Centers the buttons within the step.
  • Right: Align the buttons to the right side of the step.


3- Tour Progress Options


Note: The following progress options are available for the Pointer and Slideout steps.

You can define how users progress through the tour based on their actions,


  • Click of button: Clicking the designated button moves the user forward in the tour.
  • Click of element: Clicking a specific element (defined in the Element field) moves the user to the next step.
  • Click Anywhere on the screen: A click anywhere on the page will move the user to the next step.
  • The Next Step Trigger: The user will move to the next step once a trigger condition is met (e.g., an element appears or a hover event).
  • On a reply to survey: After a user responds to a survey (e.g., emoji or NPS), the next step is automatically shown without displaying the "Thank you" message.