Walkthroughs / How to: create a step by step tour

How to: create a step by step tour

In this tutorial, we'll build a step-by-step walkthrough available as a topic in your widget.

Example step

Create the walkthrough

  • Create a new topic and select walkthrough as the type which will start with all the defaults of a step by step tour.
  • Leave the topic as visible in the widget.
  • Click Create topic.

Create the step

  • Add a step
  • Under Elements Scroll down to select the element(s) you want to highlight.

Select an element

Configure the step

  • Under Step options
  • Change positioning - Inline Manual will choose a suitable default position for your step, but you can also position it where it suits you.

Configure position

  • Select to enable the Next button which will advance to your next step when clicked.

Next button

  • Under Backdrop - enable both the Backdrop, and the Cover.
  • The backdrop darkens the area around a selected element. The cover locks down the click-through tour, so they don't get lost or distracted.
  • Backdrop options
  • Under Misc
  • If you need to redirect users to a specific location for a step, you can set this by navigating to where you want them to go, and choosing Get path to fill in the current URL.
  • Backdrop options
  • Find out more about Redirects

Add more steps

  • Follow the instructions above to add steps as needed.
  • For your final step, you can use the End button instead of the Next button.

Tip: Show more with embedded media

Sometimes you may need to show a feature that is not available to a user's current access level or current state. An excellent way to show them would be to embed media, such as a video or a slideshow as a final step on your tour.

  • Images
  • A screenshot or an animated gif.
  • A video
  • A slideshow
  • Use iFrames to embed a Slideshare or other application. Tip: On Slideshare, you can set the size of the slideshow. You can match the width in the Misc options of your step.