Interactive Product Tours To Deliver Training

Interactive Product Tours have long educated potential buyers, and Usetiful’s approach now makes it inexpensive to use similar technology for training your customer-facing teams.

In this article, we will:

• Walk you through the process of setting up Usetiful
• Show you how to create Smart Tips, great for in-context training reinforcement
• Demonstrate how we create a simple product tour

Note that we are writing this walkthrough against the FREE version.

Let’s start with caveats, as these types of solutions generally have a couple.

Caveats

Usetiful has the following requirements.

• The product only works with web-based applications.
• You will want to install the Chrome Extension to capture areas on the screen for adding tours, tips, and checklists.
• You must insert a small snippet of JavaScript code into your web application for the product to work with it.  OR, if you use WordPress, install the plug-in.

Getting started with Usetiful

Since this is our first article on Usetiful, we will quickly review the setup process before we dive into using the product for learning delivery.

Install the Chrome Extension

When you first set up the product, it takes you to the Chrome Store to install the extension.

However, if you did not install it, the user interface will always include a helpful link; simply choose the “Preview with plugin” option.

You will also need to navigate to the “Install to your site…” option which presents you with two choices.

WordPress Note

If you are using the WordPress plug-in, you are asked to enter two keys.  It’s actually the same value that you can find by clicking on the Advanced Set-Up option.  

You will see code similar to:

r.dataset.token = “abcdef123456;
a.appendChild(r);

Grab your value (see bolded above) and copy it into both of the plug-in boxes:

Remember that the data we used in this example is not real data, use what you find in your set up.

If you Don’t use WordPress

If you choose “Anonymous visitors,” you lose tracking capabilities, but all data remains local to the user’s web browser. Your security team will appreciate that.

The choice is to choose “Logged-in users,” which can be valuable for training reinforcement, only showing information to those who have not previously viewed it, for example.

For this walkthrough, we are choosing the Anonymous option. 

Upon doing so, the page refreshes to show you the JavaScript code to insert into the HEAD of your site’s HTML page.

Note:  We tested this set up on a WordPress site, and used the “Insert Headers and Footers Code – HT Script” plug-in to test this code connecting the Usetiful chrome extension to our website.

Creating a Smart Tip

We begin with Smart Tips.

What is a Smart Tip?

Smart Tips allow you to insert helpful popups into the application, whether for interactive product tours or training purposes.

How do we create a Smart Tip?

Choose the “Smart tips” menu option. The page will refresh to look similar to this.

Note: Since we currently have no tips configured, the user interface provides a helpful big button to show you where to start. Just click on the “Create Smart Tips” button.

The page now changes to the creation page.

Click on the target icon next to Element. A popup is displayed asking you what website you will add the tip to; we chose https://trustenablement.com as that is where we added the JavaScript code. 

Select the “Open Page” button, and the website opens.

Now.

As you hover over elements on the web page, they highlight to show you the information you will need to place the Smart Tag.

Simply click on the highlighted blue box and the information is copied.

Creating the Smart Tip

We navigate back to Usetiful and paste the element information back into the window, set the tip title, and now see something like this.

Note the important options on this screen include the following.

Display On

• Choose if you want the Smart Tip to show when you Mouse Over (as the mouse passes over the element)
• Or, Click, requiring the user to click on the element for the tip to show.
• Or, Focus, bring the mouse over the element and leave it there.

Orientation against element

• Do you want to allow Usetiful to place the tip where it feels is best?
• Or, do you want to set positioning to Right, Left, Top, or Bottom?

Let’s look at the right side of the screen and populate the tip with information.

In addition to standard formatting options, you can:

• Include images
• Insert videos from URLs (not uploaded)
• Add a template (beyond the scope of this article).
• Insert code from another application (for example, you could embed a YouTube video).

Set your description, set Save and Exit, then the Publish button.

And now, navigate back to the application

Navigate to the application and refresh the browser.

Scroll over the Latest Recommendations and you will see something similar to this.

You can control the look and feel further with the paid version, but the FREE user interface looks good enough for internal training and interactive product tours.

Create a simple interactive product tour

To create the tour, navigate back to the main menu and choose Tour, which again shows you an easy-to-use screen to get started.  Choose the clearly placed “Create Tour” button.

Creating our tour

The tour creation interface is similar to the smart tip creation screen and flow.

From this screen you:

• Set a title or hide it.
• Set one of the following types:
  • Modal.  Open in the middle of the page
  • Pointer.  Open next to a specific element (you choose the element the same as covered above).
  • Slideout.  Opens from one side of the screen, and you choose Bottom Left or Bottom Right.
• You name the buttons and add additional ones.

And, on the bottom half of this screen, not visible in the above screenshot, you see more options (shown here with all options selected so as to simplify our walkthrough).

You can define what prompts the tour to begin if feedback is collected via emojis in the middle of the window

Create the flow to your heart’s content, Save and Exit, then Publish.

Final thoughts

We hope this walkthrough of Usetiful’s training-related capabilities was helpful.

Product Updates

November 2022

• With the latest update, Usetiful now supports content versioning, making it easy to revert to previous content as necessary.

Around The Web

FAQs

Latest Blog Content

• The Impact of Digital Adoption on Change Management
  August 29, 2023 by Bei
   The business world is in constant flux. Disruptive technologies emerge to break up the status quo; companies change course to serve exciting new markets; while new management, personnel, and best practices come and go.Most changes happen well outside our control. Regulations, political upheaval, and macroeconomic trends are just some of the things businesses need to […]
• How Customer Self-Service Can Benefit Your Business
  August 18, 2023 by Bei
   Customer-self service is everywhere. Over the last decade, the process has been adopted by leading businesses, such as Apple, Amazon, and Netflix, with small to medium-sized enterprises following suit. Now, it's a must-have if you want happy customers and efficient business operations.Let's explore the practice and some of its benefits before sharing how you can […]
• Steps to Creating a Flawless User Onboarding for Your Shopify Page
  August 8, 2023 by Bei
   Shopify is an excellent solution for anyone who wants to sell products or services online. However, winning and holding on to customers is challenging in this ultra-competitive business environment. Creating a great user onboarding experience can help you beat the odds and outwork your rivals.Image by rawpixel.com on FreepikOur Shopify user onboarding guide will show […]
• The Ultimate Guide to Usetiful Extension
  August 2, 2023 by Bei
  Employee onboarding has never been more critical. Acquiring top talent is costly and time-consuming. So when you find suitable new hires, you must ensure that you give them the best chance of becoming valuable contributors. However, despite research showing how essential a good employee onboarding experience is to retention, reputation, productivity, and even revenue, too many […]
• Which Digital Adoption Platform is Best For You?
  July 18, 2023 by Bei
   A recent article by G2 underlined the importance of digital adoption in modern working environments. Empowering your employees to use digital tools to their full extent is crucial for fostering innovation, being competitive, and increasing ROI on software investments.However, as the article points out, there are several barriers to achieving digital adoption, including increased IT […]
• Keeping Your Data Safe and Secure: How Usetiful Protects Your Security and Privacy
  July 11, 2023 by Bei
   Companies rely heavily on third-party vendors in our increasingly connected and specialized digital landscape. However, cybercrime is growing each year in both volume and sophistication. These third-party connections have become a point of vulnerability.  Image by FreepikKeeping your client data safe and secure has never been more critical. However, a recent report from SecurityScorecard and the […]
• Onboarding More Than One Product? Here's What You Need to Know!
  July 4, 2023 by Bei
   Modern software stacks are enormous. Zylo's 2023 SaaS Management Index suggests that even small businesses use an average of 172 apps. While some software is intuitive and easy to use, most require extra guidance to ensure product adoption among clients and employees. Based on sheer numbers alone, 3rd party software onboarding can be a big headache […]
• How DAP & LMS Work Together to Improve Employee Experience and L&D
  June 29, 2023 by Bei
   Learning and development is a big deal. Get it right, and you can increase employee retention, engagement, and overall productivity. But what's the best way to get these critical learning materials in front of your employees?Digital adoption platforms (DAPs) and learning management systems (LMSs) are two popular software solutions for employee learning and development. But […]

Usetiful Competitors

Pricing

The product offers a free version and multiple paid packages.

Free

• 1 product tour & 1 page with smart tips
• 2000 assists / month
• 1 team member

Plus

Everything in Free, plus:

• €29/month
• Unlimited tours, smart tips, and checklists
• 5.000 assists / month
• up to 2 team members
• Onboarding Checklist
• Customizable themes for a native look
• Usage analytics
• Basic segmentation
• Priority email support
• 14-day free trial
• 30-day money-back guarantee

Premium

Everything in Plus, and:

• €99/month
• Unlimited tours, smart tips, and checklists
• 20,000 assists / month
• up to 7 team members
• No Usetiful watermark
• Additional account security
• Email & video support
• Data Processing Agreement

Enterprise

Everything in Premium, plus:

• Price not provided
• as many assists as you need
• as many team members as you need
• Advanced team permissions
• Custom contract and DPA
• Integrations