Tour Application

The XWiki Tour Application allows to create guided tours for any wiki page in order to better familiarize users with the most relevant features on that page. To access it, click the DrawerMenuIcon.png icon which launches the drawer menu, then on "Application Index" in order to display the list of installed applications and finally on "Tour".

ApplicationIndexDrawer.pngTourAppIndex.png

Launch a Tour

The tour is automatically launched when the user accesses the target page. The gallery below contains screenshots for the main wiki home page.


To close the tour without going through all the steps, the user has to option to click the "x" button in the upper right corner of the popup, in which case a "Show tour" button will be displayed on the bottom right of the page in order to launch it at a later time.

LauchTourButton.png

A tour having the target page specified can be also played by clicking on the "Launch" link in the live table on the Tour Application home page.

TourHomePage.png

Create a Tour

Supposing you wish to create a tour for the main elements of your user profile page, go to the Tour Application home page and click on "Add Entry" in the "Actions" panel.

CreateNewTourLink.png

Next, enter the name of the tour page and click the green "+" button. The tour form has 3 fields:

  • Description - an optional field which is not used by the application as is it purely for informative purposes.
  • Active - whether the tour should be displayed or not. You can use this option to hide an incomplete or deprecated tour from other users.
  • Target Page - the reference (full name) of the page where the tour should be displayed, like for instance XWiki.Admin.
  • Target Class - the class name for which the tour entries should be displayed, like for instance XWiki.XWikiUsers.

and a list of steps, each one corresponding to a page element you want to include in the tour.

UserProfileTour1.png

To create a step, click on "+ New Step" located in the upper right corner of the "Steps" table and fill in the required fields:

  • Element - the CSS selector for the page element you wish to attach a popover to. If the element is not specified, the popover will be displayed in the center of the page. In order to obtain the CSS selector, you can use any browser's developer tools.
  • Title - it can be plain text or a translation key.
  • Content - the text to display (you can use plain text, wiki syntax or even macros).
  • Placement - the position of the popover in report to the page element: the possible values are Top, Bottom, Left and Right.
  • Order - the step index.
  • Backdrop - allows to hide all the elements of the page that are not concerned by the current step.
  • Target Page - represents the reference of the page where the step should be displayed and it is used for multiple page tours.

UserProfileTour2.png

After clicking on "Add Step" you should see the entry displayed in the table.

UserProfileTour3.png

The final list of steps corresponding to the user avatar, profile information and "Settings" panel should be similar to the one in the image below:

UserProfileTour4.png

Once you are done adding steps, save the tour form and go to your user profile page in order to launch it.

Related Pages

Search this space