2. User Tours

2.1. Creating User Tours

Follow the steps below to create a new user tour.

If you are using the Client Admin Role, navigate to Site Administration > User Tours. If you are a full site administrator, navigate to Site administration > Appearance > User tours. You will now see a list of your existing user tours, along with three button options:

  1. Create a new tour - click on this to create a new tour
  2. Import tour - click on this to upload a tour file (in .json format)
  3. Tour repository

Select Create a new tour, and then name and describe it. Within the space for “Apply to URL match” you’ll indicate what page(s) will offer this user tour. A few examples are:

  • The Dashboard: /my/%
  • Site Home Page: FRONTPAGE
  • A User Profile field: /user/profile.php%
  • A Course Page: /course/view.php?id=2
    • NOTE: Be sure to include the correct course ID here. Leaving off the ID number will apply the tour to all courses. IE: /course/view.php%

Tours can also be filtered to display based on:

  • User Role
  • Theme
  • Category
  • Course
  • Course Format
  • Account creation
  • First access
  • Last access
Additional Settings

  1. Placement: Top, Bottom (Default), Left, Right. This determines where the step shows relative to its matching block or CSS selector on the page.
  2. Show if target not found: No (Default), Yes. This determines whether the step is shown or not when the target has not been found.
  3. Show with backdrop: No (Default), Yes. If yes, the step appears surrounded by a darkened backdrop to emphasis its content and location.
  4. Move on click: No (Default), Yes. If yes, the tour continues to the next step when the user clicks within the block or area targeted by the current step.

Now that you’ve created the shell for your tour, you can begin to build it out. This is somewhat easier if you have experience working with CSS, but most clients have learned to create their own tours with a bit of research and preparation.

Adding Steps to Your User Tour

Each "step" in the User Tour is a card that displays on screen. To create a new step, click on the "New step" link. Select the appropriate type, or area, of the page to highlight:

  1. Block: Displays next to a matching block on the page.
    • You might choose to use this if you want to highlight the Quickmail block, the calendar, or anything else you’ve newly displayed on the page(s).
  2. CSS Selector: Displays next to a matching selector on the page.
    • Use this if you need to point to a specific element on the page.
  3. Display in the middle of the page: For, well, displaying User Tour cards in the middle of the page.
    • These are most useful when you need to convey information, but it doesn't have to point to something specific on the page. 

If you select Block, select the relevant block from the dropdown. For CSS selectors, type or paste in the relevant selector to identify the target. You can find more information about CSS selectors on the wiki page for User Tours. 

Next, add the title and content for the card. Then configure your display settings:

  1. For all types, select whether to display the step with a darkened backdrop. We strongly recommend using this setting if you're calling out a specific area of the page, or your site uses a very light theme. 
  2. For blocks or selectors:
    1. Select the Placement option for where to place the display (above, below, left, or right). 
    2. Select whether to display the step if its target isn’t found. 
    3. Select whether to move on click, which means the users will have to click on the thing the User Tour is pointing at before they can move to the next step.

Click "Save changes". Your new step will appear at the end of your tour’s current listed steps.

Each individual step has the following Actions options:

  1. Move Up and/or Down: to reorder the steps
  2. Edit: to edit the step settings
  3. Delete: to delete the step entirely

Continue adding new steps until your tour is completed.

Notes to Consider

  • You can have multiple tours created for the same page destination, but you should only have one per page enabled at one time.
  • Tours can be duplicated on the User Tours page. If you have one that works well, consider duplicating and editing it to create new, similar tours.
  • Tours can be downloaded and imported on the User Tours page. Some clients will use their dev site to create new User Tours in advance of a site upgrade, then download the tours from dev and upload them to production.
  • When testing a User Tour, we suggest filtering it so it only appears to Client Admins and/or Site Administrators. This will give you a chance to test your tour before your users see it.