Walkthroughs
A walkthrough in app development is a guided tour of the app's features and functionality, typically presented to the user when they first launch the app. It is designed to help new users understand how to use the app and navigate its various sections.
For example, consider a news article app. When a new user opens the app for the first time, they might be greeted with a series of pop-ups that highlight key features such as watching article videos, subscribing to article updates, and filtering articles by tags.
Adding walkthrough
The steps to create and display a walkthrough in your app are as follows:
1. Create walkthrough
To create a walkthrough:
Navigate to Settings and Integrations > General > Walkthroughs > click Create New.
Start with providing the Name, Description and then select the Page on which you want to show the walkthrough. The name you enter will be used to initiate the walkthrough later.
Now, we must add the steps for our walkthrough. Each step that we add here acts as a separate screen or popup that nicely animates to highlight the UI element. To add steps:
Click on the + Add Step.
Choose the widget to highlight by clicking Widget Unset. In the right-side preview, select the desired widget and click Confirm.
When the widget is in focus, you may want to present information about it; this could be a simple text or a custom component (e.g., a text with an arrow). You have complete control over what you want to display via a component. Click the diamond icon to create a new component and then set it to Content.
You can also choose where the Content will be displayed by setting the Content Alignment.
Choose a Focus Shape for the widget—either Circle or Rectangle.
Pick an Overlay Color that you want to display when the widget is highlighted.
By default, we also add a skip button on the screen, and you can align it using the Skip Alignment option.
Add additional steps by repeating the process for all UI elements you wish to feature.
To preview the walkthrough, click the Start Preview button and use the arrows to navigate through the steps.
To rearrange the steps, enable the Reorder option and then use the arrows to adjust their sequence.
Click the Add Walkthrough to save.
2. Start walkthrough
After creating a walkthrough, you can display it on a page using the Start Walkthrough action.
3. Get notified on walkthrough skipped and completed
Sometimes, you might want to get a callback to know whether the walkthrough is skipped or completed. For example, you could set up a callback to gather analytics or trigger a specific action once the walkthrough is finished, such as directing the user to a new page or enabling certain features of the app.
When a walkthrough is added on a page, you'll see the following types of actions (aka callbacks), and you can choose any of them to add actions under it.
On Walkthrough Complete: Actions added under this will be triggered whenever the user finishes all the steps of the walkthrough.
On Walkthrough Skip: Actions added under this will be triggered whenever the user chooses to skip the walkthrough.
Here's how you do it:
Open the page, select Actions from the Properties panel (the right menu), and click Open. This will open an Action Flow Editor in a new popup window.
Select On Walkthrough Complete or On Walkthrough Skip and add actions under it.
Video guide
If you prefer watching a video tutorial, here's the one for you:
FAQs
How do I fix when walkthrough misaligns on a widget, not focusing on the component?
This issue typically arises when a widget's animation and the walkthrough start simultaneously. As the walkthrough initiates, it captures the widget's initial position before the animation completes. Consequently, after the animation concludes, the widget may have shifted to a different location, leading to misalignment.
To resolve this, simply add a delay (Wait action) before initiating the walkthrough. Remember, the wait duration must be equal to or greater than the duration of the animation.
My widget is not highlighting on a scrollable page. What should I do?
We are aware of a limitation where widgets that are not visible on a page (i.e., you need to scroll down to see them) may not be highlighted. We are actively working to resolve this issue. As a temporary workaround, you can try placing the widget in an area that is visible without scrolling. We appreciate your patience and hope to have a fix soon!
Last Updated Date: April 10, 2024
Last updated
