Tour Guide Available Options

This documentation gives a clear understanding of how to configure each setting for a customized tour experience!

1. Auto Scroll

What it does: Automatically scrolls the page so that the current tour step is visible in the browser window.
When to use it: Enable when your tour steps may be out of view and you want the system to automatically bring them into focus.

2. Auto Scroll Smooth

What it does: Enables smooth scrolling when moving to the next step in the tour.
When to use it: Keep enabled if you want a visually appealing, smooth scrolling effect during the tour.

3. Auto Scroll Offset

What it does: Adds extra space (in pixels) around the target element when auto-scrolling.
When to use it: Adjust this setting if you want to add some buffer space around the highlighted element to improve visibility.

4. Backdrop Animate

What it does: Adds a smooth animation to the backdrop when switching steps in the tour.
When to use it: Keep enabled if you prefer smooth transitions for a polished look.

5. Backdrop Class

What it does: Allows you to apply a custom CSS class to the backdrop element.
When to use it: Use this if you want to customize the backdrop’s appearance with your own styles.

6. Backdrop Color

What it does: Defines the color of the background overlay around the tour step.
When to use it: Use this to match the tour backdrop with your site’s design or to provide a more distinct highlight for the current step.

7. Dialog Animate

What it does: Adds animation to the tour guide dialog when it changes position or resizes.
When to use it: Enable this for smooth transitions between different steps if your dialog content changes in size or location.

8. Dialog Class

What it does: Allows you to add a custom CSS class to the tour dialog for styling purposes.
When to use it: Use this option if you need to customize the appearance of the tour guide box.

9. Dialog Z-index

What it does: Sets the z-index property for the dialog, controlling its stack order on the page.
When to use it: Adjust this setting if your dialog gets hidden behind other elements on the page.

10. Dialog Width

What it does: Forces the dialog to have a fixed width (in pixels).
When to use it: Set a width if your tour guide content includes images or elements that require specific positioning.

11. Dialog Max Width

What it does: Defines the maximum width of the tour dialog.
When to use it: Set a max width to ensure that your tour dialog doesn’t become too wide, especially on large screens.

What it does: Manage multi-page behaviour. Allows navigation to missing step element source page (page where the step is originally created).
When to use it: Activate this option to "Yes" to ensure each tour step is rendered on the page they are created.

If you want to allow redirection to the step original page where the step is created if it is running on a different page and no matching element for the step, set the option to "Maybe".

Leave as "No" to always render the step on the current page irrespective of the attached element resolution.

13. Allow Manual Replay

What it does: Permits users to replay the tour.
When to use it: Enable this feature if you want to provide users the opportunity to revisit the tour content at any time. When enabled, the tour will be added to user available tour widgets for manual replay of tour.

Additional settings:

Hide Next/Previous Button: Toggle these if you want to hide the navigation buttons for more manual progression through the tour.
Progress Bar: Display a progress bar to visually show the user's progress through the steps.
Keyboard Controls: Enable this to allow users to navigate the tour with keyboard arrows or escape to exit.
Exit on Escape/Click Outside: Lets users exit the tour using the escape key or by clicking outside the tour dialog.