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.


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!

Popular posts from this blog

How User Onboarding Checklists will help your User Adoption

User onboarding checklists are a crucial tool for developers who are launching products or want to improve product adoption.   What are User Onboarding Checklists? User onboarding checklists are a way to onboard new users. This digital adoption strategy works by splitting the onboarding experience into manageable atomic pieces. By making a checklist with various tasks, you can ensure that users are guided towards getting instant value from your product.     How to Build an Onboarding Checklist? Onboarding checklists are easy to build with no-code tools like Usetiful . By using an onboarding checklist template, your product can benefit from greater user engagement and acquisition. Benefits of User Onboarding The most common reason users abandon a digital product is: a) They can't understand how to use it b) The products value is not clear to them   A good user onboarding process directly addresses both of these issues. Any worthwhile digital adoption strategy needs to assist and dir

Build your first Welcome Message

Why Welcome message? Welcome message has a great impact on how users perceive your application - you can set up a very friendly and human tone of conversation. On top of that - it is really easy to create one with Usetiful! Benefits: Introduce your product from human perspective and let users know you appreciate them Activate your users with call-to-action  Get your Usetiful ready for more complex opportunities Build the modal In the Overview menu, click on " Add tour " Tour name - Give your Welcome message a name so you can find it later Let's keep it simple - page targeting should remain "All pages", trigger should remain to "Launch automatically". You can change these settings anytime later. Click " Continue ". Usetiful creates the first example modal for you. Click inside of the modal and update the content! Pro tip: Include pictures or video! Buttons - your call to action Usetiful allows you to set up actio

User onboarding best practices

" You will never get a second chance to make a first impression. " When people see your product or your new feature for the first time, the success depends on the first impression.