User retention is a big concern for software developers. That's true whether you are building an app or a website. Rising marketing costs mean that once you do get your product in front of users, you must ensure they make an impact.
Interactive walkthroughs and product tours are one of the best ways to onboard users. When a user first sits down with your website, you want them to learn how they can get value from it immediately. Your potential customers need to know what actions they can take to solve their pain points and become regular users of your website.
If you use a WordPress website — and there is a good chance you do because the platform has 43% of the global market share — then you should learn how to design an interactive walkthrough for your site.
Just follow these simple steps, and you can educate your users and boost your retention and loyalty.
Install Usetiful on WordPress
If you want to unlock the power of product tours and walkthroughs, the first thing you need to do is install Usetiful on WordPress. Thankfully, the process is very straightforward.
Go to your WordPress admin dashboard
Select “Plugins,” then hit “Add New”
Type in “Usetiful” and press the search button
Locate the Usetiful plugin and press “Install Now”
Go to usetiful.com and open your existing account or register a new one
On the left-hand side of the Usetiful page, in the “Overview” panel, select “Install to your site”
Scroll through the script and locate your Usetiful key, and copy it
Return to WordPress, select Usetiful Settings on the left, and enter the key
Boom! It’s that simple, and you’re ready to start creating interactive walkthroughs for your WordPress website.
Design walkthroughs for your WordPress website
OK, so now that you know why you need walkthroughs and how you can install the Usetiful plug on your WordPress website, it’s time for the next step: How to design interactive walkthroughs.
Usetiful is incredibly user-friendly. Designing simple product tours is very easy. Even complex walkthroughs are easy to do if you follow this straightforward guide.
Think about what you want to achieve
Before you start building a walkthrough, you need to decide what you want to achieve. Do you want to show everything you can do on your website? Or do you want to show a few core functions?
Understand what outcome you want before you start building your walkthrough because it will help you to plan what you need.
How Usetiful works
Next, you need to think about how Usetiful works.
Usetiful is a no-code digital adoption tool. You can use it to build layers on top of your website. These layers can be tied to certain elements and actions that you choose, allowing you to educate your users on how to use them.
When the user enters your website, you can trigger Usetiful to pop up and display a message inviting them to take a product tour or walkthrough. You can use this overlay on your home page, or you can create multi-page product tours.
Step-by-step guide for designing interactive walkthrough on a WordPress website
#1. Create a tour
The first thing you need to do is log into your Usetiful account. In “Overview,” select “New Tour”.
Then, create a tour name so you can easily remember your walkthrough.
#2. Set up your tour
Next up, you need to define the settings of your tour.
The first thing you need to do is select which of your web pages will contain the interactive walkthrough.
In the “Page Targeting” section, select either:
Any page
Only certain pages
Select any page, and your walkthrough will display on every page of your WordPress website. Otherwise, you can display on specific pages by:
Entering a URL
Selecting a particular HTML element on a page
Adding text conditions.
Usetiful is very flexible. You can choose to display your walkthrough based on text conditions, such as:
Whether a URL does or doesn’t contain a specific word; or based on which page the user has redirected from.
If the user has or hasn’t experienced the tour already
If particular HTML elements appear on the page
Which device or operating system the user has entered your site with.
You can select one of these conditions or a combination of them all.
For a deeper dive into these options, check out our help page on Page Targeting.
#3. Select tour properties
Once you’ve defined your conditions, there are specific properties you can choose. These are:
Autoplay: the walkthrough will display will pop up once the page is loaded
Remember last step: your walkthrough (and each user's progress) be remembered so the users can pick up where they left off
Show progress: shows a progress bar for the walkthrough
Show Usetiful button: Show a button in the bottom right-hand corner where to tour can be accessed
Once you’ve decided on the parameters of your tour, you can move on to the exciting part: creating the tour content.
#4. Tour content
Creating the content that will display on your WordPress website is simple, thanks to our user-friendly visual editor.
On the left panel, you can create each step. On the right, the content will preview.
The first step is a simple Welcome message (that you can edit) and a button that prompts the user to start the tour or not.
Editing steps are straightforward. You simply click on the item in the preview area, and you can change the following:
The text
Alignment
Font
Color
You can also add images, insert links, or change HTML code (if you have those skills).
Next, you can decide how each step behaves by clicking “Edit Step.”
The “Step Settings” section allows you to change the title of each step and also choose if it’s a:
Modal
Dialog
Slideout
Pointer.
These options let you alter how your product tour looks on the screen.
#5. Tour steps
When you are designing your tour, you should break it down into steps.
Each step can be linked to either a starting page or elements on your website.
As you add each step, you can alter how users navigate through the tour.
Some options here are:
Buttons
Elements
Clicking anywhere on the screen
Or Triggers for one of the next steps
You can also add a variety of progress bars to help the user know where they are on the tour.
#5. Multiple walkthroughs with one tour
You can also make one tour that contains several walkthroughs.
It involves choosing how each step follows the other. For a deeper dive into this idea, check out this article.
#6. Publish your tours
Once your walkthrough is completed, it’s time to publish it to your website. No code installation is needed, just install the Usetiful plugin on your WordPress. Now you can guide your users with an interactive step-by-step walkthrough, and show them how to make the best out of your product.