Skip to main content

Cover multiple page walkthrough with just one product tour

Our Digital Adoption Platform simplifies complex product flows with the step-by-step walkthroughs and smart tips. This article provides tips and tricks on how to deliver structured learning paths with Usetiful, especially when you need to:

  • cover multiple pages within just one product tour to keep your users focused
  • reduce the number of tours to keep the content management simple

One product tour rules them all

Usetiful allows you to cover multiple pages with just one product tour. All you need is to set up the tour and its steps correctly.

Example:

Let's say we want the tour to cover Home (index.php) and Form (form.php) pages of our demo application. 
Welcome page
Form page
Firstly, we need to define the Page Targeting to ensure that the tour appears on these 2 pages only. We enter the tour settings and set up the condition "URL contains" with the value "index.php|form.php". This way the tour appears only on pages that have "index.php" or "form.php" as part of their URL.


We want the tour to autoplay once users reach the first page, so we enable the "Autoplay" option. Also we want to remember user's progress with the tour, so the feature "Remember the last step" is also enabled.


Now we can continue to build the content of the tour. Our demo scenario is that the user is introduced to features on the Home page first (index.php is the landing page that the user needs to visit before reaching other parts of the application). Then the user navigates to the Form page (form.php) where the tour should automatically continue.



The steps before "redirect" will be available on the Home page and steps after the "Redirect to Form.php" will display once the user reaches the Form page. Let's have a look at how the redirect is configured:


The redirect step contains the address of the Form page in the field "Next page address". It is also defined that the current tour continues on the target location

Users can be redirected either automatically, when the previous step ("Step 3") is completed, or you can let a user navigate to the next page manually. In that case, you need to make clear to users what they need to do in order to continue the tour.

Let's update the content of "Step 3" to point to the "Add media" button with instructions. Click on the button will redirect users to the Form page.

In the step details, set up the field "Progress on click of" value to Element, so the next step (automatic redirect) is activated when users click on a given element (".btn-primary" in this case). 


When users reach the Form page, the tour automatically continues with the "Step 5".

What if I need to support multiple tours on just one page?

You can target several product tours on the same page. If it isn't specified which product tour takes precedence from another we display a menu that lets users choose from all available tours on a given page.
A button that activates the selection of tours.

List of available tours.

If you encounter any issues or need different options, feel free to contact us.

Don't have Usetiful account yet? Start free today!

Related:

Popular posts from this blog

How the 40% Rule Can Help You Find and Identify Product-Market Fit

  Finding product-market fit (PMF) is the Holy Grail for startup founders. Figuring out if sustainable demand for your product exists is something you want to do as early as possible so you can change course or make the necessary adjustments. However, many startups only realize they don’t have PMF well after going to market.  This article will look at how you can identify and achieve PMF, even if things aren’t quite going as expected.  Image by creativeart on Freepik What is the 40% Rule? Sean Ellis is well-known in the software development space. In a legendary 2010 blog post, he coined the term “growth hacking ,” which revolutionized how founders think about product marketing. As if that were not enough, he also popularised the Sean Ellis Rule, also known as the 40% Rule. The 40% Rule is very straightforward. All it requires is asking your users one simple question: "How would you feel if you could no longer use our product?" The respondents then have a choice of one of...
Read more

Metrics That Are Better Than NPS?

  Net Promoter Score (NPS) is a deceptively powerful and widely used metric for measuring customer loyalty and satisfaction. It works because it asks one simple question: On a scale of 0 to 10, how likely are you to recommend our product to a friend or colleague? From there, respondents are split into one of three groups, which are: Promoters (9-10): Loyal, enthusiastic advocates for your product. Passives (7-8): Users who are happy enough but could switch to a rival product under the right circumstances.  Detractors (0-6): Unsatisfied customers who are more likely to complain to friends or social media about your product. Once you have counted your responses, you get your NPS score by subtracting the percentage of Detractors from the percentage of Promoters.  However, not everyone loves the NPS score. Here are a few of the weaknesses associated with the customer loyalty metric. It’s too simple to capture the true complexity of customer sentiment. People who respond to...
Read more

Alternatives to Shepherd: Which One Is Right for You?

  Shepherd is a popular open-source tool for building product tours. However, there are better options to meet the demands of modern onboarding. Here are some great alternatives that can help boost user adoption. What is Shepherd? Shepherd is a JavaScript library. It was built to help onboard new users with product walkthroughs. It's a flexible tool that allows you to drop product tours into your app using popular languages like: Angular Ember ES Modules Vue.js  Javascript Shepherd comes with a few default themes, but its primary selling point is that it allows you to customize your tours.  The problems with Shepherd as an onboarding tool We're not here to rip Shepherd. It's a good tool that does what it sets out to do. However, it falls short of a great modern onboarding tool for several reasons. #1. Limited accessibility Shepherd is relatively easy to use if you have good technical knowledge. However, you're out of luck if you don't know how to code. In an era whe...
Read more