Usage

Once the Tour Guide module/plugin is activated, a new Tour Guide menu will appear in the main sidebar. From this menu, you can create, manage, and customize all your tours.

Tour Guides

Tour Guide Menu

The Tour Guide menu offers the following key features:

  • Create: Create new tours from scratch.
  • Edit: Update and modify existing tours.
  • Setup: Configure steps, target elements, and trigger conditions for each tour. This can be done for the admin, staff, and client portal.
  • Translate: Localize your tour steps into multiple languages.
  • Preview: View how your tour will look for users.
  • Delete: Permanently remove a tour when it is no longer needed.

Tour Guide Form

Creating a New Tour

To create a new tour, follow these steps:

  1. Click the "Create" button:
    This will open a form where you can input the details of your new tour.

  2. Fill in the form:
    Complete the form with the following details:

    • Tour Title: Give your tour a descriptive title.
    • Description: Provide a brief explanation of the tour’s purpose, which will be shown to users on the tour widget.
    • Status: Set the tour to "Active" or "Inactive." Inactive tours can be edited without being visible to users.
    • Trigger Type: Set up the rules that will trigger the tour. You can define multiple rule sets.

    Note: If you prefer to start the tour manually via the widget, you can leave the trigger rules empty.

    Common trigger types include:

    • URL: The tour is triggered when a user visits a specific URL.
    • User Role: The tour starts based on the role of the logged-in user.
    • Finished Tours: The tour starts after the completion of other specified tours.
    • Path: The tour begins when a URL path matches a given pattern. This is useful for multi-domain or subdomain applications.

    Note: Advanced triggers, such as "Tour Completion Triggers," may only be available when editing an existing tour.

    Tour Guide Trigger

  3. Review Settings:

    Review and customize the settings for the tour guide, including accessibility options. We offer several customization features to enhance the user experience.

    Hover over the question mark (?) next to each option for more detailed information.

    Some key settings include:

    • Complete on Finish: When enabled, the tour will not automatically replay for users who have already completed it.
    • Allow Manual Replay: Enable this to allow users to manually play or replay the tour via their tour widget.
    • Step Navigation: If a step element isn't found on the current page, this option redirects the user to the correct URL where the step was created, provided it's located on a different page; when set to 'Yes'.

    Set to 'Maybe' to enable navigation to the step source page when the step is rendered on another page with no matching element.

    • Remember Step: Enable this to ensure the user starts from their last completed step if they re-enter the tour later.
    • Next, Back, and Finish Labels: Customize the text for the "Next," "Back," and "Finish" buttons. Leave these fields empty to use default translation text.

  4. Click "Save":
    Once the form is complete, click the Save button to create your new tour.

Editing an Existing Tour

To edit an existing tour:

  1. Go to the Tour Guide menu:
    Locate the tour you want to modify and click the pencil icon next to it.

  2. Edit the Tour:
    The form is similar to the creation form but includes additional options, such as the ability to configure trigger rules.

  3. Save Your Changes:
    After making your changes, click Save to update the tour.

Adding Tour Steps

Tour Guide Setup

Once a tour is created, you can add steps to guide users through the experience:

  1. Go to the Tour Guide menu:
    Select the tour you want to modify, click the setup icon, and choose the portal where you wish to add steps (admin, staff, or client). The setup widget will appear on the homepage of the selected portal.

    The setup widget includes options to autosave, minimize/maximize, or close the setup. You can also switch between different tours from the dropdown menu.

  2. Click "Add New Step":
    In the Setup Widget, click the Add New Step button. A drop zone will appear where you can drag and drop the element that will be highlighted during the tour step; this element is referred to as selector. The selector can be updated or modified further for optimization.

    For each step, you can manage the following:

    • Step Title: Provide a title for the step.

    • Description: Write a detailed description or instruction for the step. The description input box support HTML content (including images).

      • Click on the '' icon located next to the description box to access the advanced text editor (WYSIWYG). This editor provides additional formatting options, making it easier to style your content effectively.

      • If the '' icon is not visible or is obscured by the emoji icon, simply click outside the description box. This action should refresh the view and reveal the shielded '' icon.

      • HTML can directly be typed into the description box without enabling the advance editor.

      Ensure you create comprehensive and visually engaging instructions that will assist users in understanding the tour guide step more effectively.

    • Click Step (Forward):Define the sequence of clicks the user must follow to reach this step. Click the Add Click Steps (Forward) button within the step, then follow the necessary click actions until the target element is displayed. Once done, return to the widget to stop recording and save the click sequence.

    • Click Step (Backward): Similar to forward, define the reverse click steps needed to return to the previous state.

  3. Drag and Drop to Reorder Steps:
    You can rearrange the steps by dragging and dropping them to adjust the order in which they appear to users.

  4. Save the Steps:
    After adding and arranging your steps, click Save.

  5. Preview the Tour:
    You can preview each step by clicking the play icon next to it to ensure everything looks correct.

Updating Step Selector (Advanced)

After adding a step, the drag-and-drop selectors are generally accurate. However, we recognize that there may be instances where you need to update the selector entirely or modify it to select a parent element.

To update the selector, click on the + icon. This action will reveal the selector label along with action buttons labeled Edit and Replace.

  • Editing the Selector:

    If you wish to remove parts of the selector or completely modify its value, click the Edit button. This will present you with:

    • A visual tree representation of the selector, allowing you to remove any of the items within it. You can detach the step from any selector by removing all items.
    • An input field where you can write a custom selector string. Please ensure the selector is valid and conforms to CSS selector syntax. To detach the step from any selector, simply enter "body" or simply clear the input (the value will always fallback to "body" when empty during rendering). Use " > " to separate nexted selector where neccessary. i.e div#wrapper > .row

  • Replacing the Selector:

    Click on the Replace icon to utilize the drag-and-drop interface for selecting a new element for the step. This allows for a more intuitive selection process, ensuring you can easily find the appropriate element.

By following these steps, you can efficiently manage and update your step selectors, ensuring they function as intended within your application.

Ensure you click on the save button after updating selector.

See the video illustration for better understanding.

Translating Tour Steps

Tour Guide Form

To translate the steps of a tour into multiple languages:

  1. Click the "Translate" button:
    In the Tour Guide menu, select the tour you want to translate and click Translate.

  2. Enter Translations:
    A form will appear where you can add translated text for each tour step.

    You can also choose to auto-translate for all supported languages.

  3. Save Translations:
    Once you’ve entered all the translations, click Save.

Previewing a Tour

Tour Guide Preview

To preview a tour before making it live:

  1. Click the "Preview" button:
    The preview mode allows you to experience the tour from the user's perspective, ensuring the steps are in the right order and tooltips are positioned correctly.

Deleting a Tour

To delete a tour:

  1. Select the tour from the list:
    In the Tour Guide menu, find the tour you wish to delete and click the delete icon next to it.

  2. Confirm the deletion:
    Confirm your action to permanently delete the tour.

Additional Notes

  • If you want to hide the tour guide widget from users, ensure no tours have "Allow manual replay" enabled.
  • You can add emojis to tour titles, descriptions, and step titles to enhance the user experience.
  • Enable the autosave feature in the setup widget to prevent losing any progress on step creation.
  • While building a tour, set its status to "Inactive" to avoid users seeing it before it’s ready.