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.

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.

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.
  • 
  • Select to enable the Next button. This will advance to your next step when clicked.
  • 

• 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.
  • 

• 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.
  • 
• 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.