Skip to main content

Creating an Interactive Walkthrough for Your WordPress


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.

  1. Go to your WordPress admin dashboard

  2. Select “Plugins,” then hit “Add New”

  3. Type in “Usetiful” and press the search button

  4. Locate the Usetiful plugin and press “Install Now”

  5. Go to usetiful.com and open your existing account or register a new one

  6. On the left-hand side of the Usetiful page, in the “Overview” panel, select “Install to your site”

  7. Scroll through the script and locate your Usetiful key, and copy it

  8. 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:

  1. Entering a URL

  2. Selecting a particular HTML element on a page

  3. 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. 


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.