Interactive Walkthroughs that Span Across Different URLs
Userpilot makes it seamless to create extremely interactive walkthroughs that can also span across different URLs.
You should use this strategy when you think it's necessary to take the users by hand and show them how to do a certain task one step at a time.
Building interactive walkthroughs
To create an interactive experience, start by adding a driven-action.
Driven actions are the heart and soul of interactive walkthroughs as they intend to drive users to take certain actions such as a mouse click or hover, and would only continue the flow of the experience when such action is done.
After you select the element you'd like to highlight, you will be asked to choose the type of action you'd like to drive.
In this example, we'll drive users to click on a certain option on the screen.
Now, you have two ways on how to continue this experience. Either by creating a different experience on the URL you are sending the users to, or by continuing this same experience.
The advantage of the first approach is that even if users escape the walkthrough on this page, they will still see the next experience on the other URL (when they navigate there on their own) since they are two different experiences. This is generally a better strategy.
Yet, sometimes you'll need to connect both URLs in the same experience.
To do this, just simply navigate to the URL you just called the action on, and add your next step.
The Userpilot builder will realize that there was a page change and will ask you to add it.
You'll have two options here, either to force redirect the user to a URL. Or, simply use silent redirect which will allow your app to determine where to take the user based on their action (recommended.)
Additionally, If you use a silent redirect, then you don't need to worry about dynamic URLs as your app itself will be doing the page change.
You can then continue the flow as usual in the next URL.
To deal with text input actions, just simply use the driven action 'text input' type as shown below.
You'll have a variety of options on how to continue the flow after the user inputs a text such as showing a 'next' button or using the 'Enter' or 'Tab' keyboard buttons.