This is an experimental feature.
User tours can be a useful way of presenting additional information on-screen. There are many ways to use this feature including, to walk users through the information on a particular screen, to explain how to complete an action, or to produce a single introductory welcome-styled dialogue box.
For example, when onboarding new users to your site it is important to make sure they are comfortable with navigation and how to find the information they need. This can be tedious and logistically challenging, especially in larger organisations and those whose employees are geographically dispersed. The user tours feature allows you to setup an initial automated walk-through for orientation.
Users can end the tour at any time, navigate back and forth through the steps, or reset the tour then replay it as many times as they want (although it only plays automatically once).
What you end up with is a series of instructional bubbles that will step the users through the page you have created the tour for.
(The video above is taken from the Dashboards and basic theming course in the Totara Academy).
Creating a new tour
A Site Administrator, or another role with the Create, edit, and remove user tours (tool/usertours:managetours) capability, can set up the User tour by following these steps:
- From the quick-access menu go to Development > Experimental > User tours.
- Click on Create a new tour.
- Give the tour a Name and optional Description.
- Enter the URL of the page(s) to which you want to add the tour in the Apply to URL match field.
- Check Tour is enabled, then optionally configure the other settings.
- Optionally configure a range of Tour filters:
- Category: Show the tour on a page associated with a course in the selected category.
- Courses: Show the tour on a page associated with a course.
- Course format: Show the tour on a page associated with courses using the selected course format.
- Role: Limit the tour to only show to users of a certain role. For example you could just show a tour to Site Administrators to explain new features.
- Theme: Only display the tour when a specific theme is used.
- When you have finished, click the Save changes button.
- This will take you back to the list of tours; click on the name of your new tour to start creating steps.
- Next click New step to add your first step.
- Fill out the details of that step (e.g. location and content). See the Step targets section for more information on selecting the location for each step.
- When you are done click Save changes.
- Repeat until you have added all steps in the tour.
When creating a step in a user tour you can decide which feature to highlight using the settings in the Step target section.
First select the Target type from the following options:
- Block: This option allows you to select a block type from the Block dropdown list. If a block of this type is present on the selected page it will be highlighted.
- Selector: Highlight part of the page using the selector from an element's CSS code. Find out more below.
- Display in middle of page: This option displays the step as a pop-up in the middle of the page. This can be useful for introductions or general guidance that isn't specific to a block or layout element.
If the element you want to highlight isn't a block you will need to use the Selector option. These steps will outline how to find the relevant CSS in Google Chrome, but the method may be different in other web browsers. Follow these steps to find the selector:
- Navigate to the page containing the element you wish to highlight in Google Chrome.
- Press Ctrl+ Shift + I to open the Developer tools. Alternatively open the menu and go to More tools > Developer tools.
- Click the inspect element icon ( ) or press Ctrl + Shift + C.
- In Totara select an element (e.g. the navigation bar or a button) and a section of CSS code will be highlighted in the Elements window of the Developer tools panel.
- With the code selected, click the ellipse icon next to it, then Copy > Copy selector.
- Paste the selector (which should look something like '#yui_3_17_2_1_1610030264859_192') into the CSS selector field for the user tour step.
- Test the user tour to ensure that the step points to the correct element.
Finalising your user tour
When you've created all of your steps your tour is ready. If you've not enabled it already, enable it (by going into the tour settings) to make it active.
Now you can browse to where your tour starts and experience it.
There is a Reset user tour on this page link in the footer than can be used to re-experience a tour.
Alternatively you can navigate Quick-access menu > Development > Experimental > User tours and select a tour, then click force the tour to be displayed again. All users will then see the tour when they next visit the relevant page.
After you have setup at least one tour you will be able to manage your existing user tours by going to Quick-access menu > Development > Experimental > User tours.
Within this page you can edit the name or description of a tour by clicking the pencil icon next to it.
The Actions column allows you to perform the following to the tour in the same row as the icons:
- Enable/disable the tour (eye icon)
- Edit the settings (cog)
- Export the tour (up arrow)
- Delete the tour (cross)
Import a tour
You may wish to import a user tour (perhaps if you have multiple Totara sites), this can be done from the user tours management interface. Before you can import you will need an exported tour file, which will have the extension .json.
- Click the Import tour button.
- Add the file using File picker or by dragging and dropping the file.
- Finally, click Save changes.
You will then be shown the steps within the imported tour, so that you can edit them as desired.
The Totara Academy has a whole course dedicated to using Dashboards and basic theming in Totara. Here you can learn more on how to customise your site's appearance, see best practice, and give it a go yourself.