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.

Show/Hide Close (X) Button: In the tour step settings you can choose to display or hide the close (X) button on Modal, Pointer, and Slideout steps. This gives users the option to exit the tour at any point during the step.



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.