How to: create a step by step tour

In this tutorial, we’ll build a step-by-step walkthrough which is also available as a topic in your widget.

Example step

Create the walkthrough

  • Create a new topic and select Walkthrough as the type. This 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 sensible default position for your step, but you can also position it where it suits you.
    • Configure position
    • Select to enable the Next button. This 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. This will 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 which is not available to a user’s current access level, or the current state they are in. A good 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

    • Click the video button, and paste the URL of any media provider.
  • A slideshow

    • Use iFrames to embed a Slideshare or other application.
    • Click Source and paste in the Slideshare embed code.
    • Tip: On Slideshare, you can set the size of the slideshow. You can match the width in the Misc options of your step.
Was this article helpful?