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.
Was this article helpful?