Three onboarding tools compared

UX
Mandy Trilck

Mandy Trilck

Onboarding users with product tours has become a standard practice. Software solutions to create these tours abound, at widely varying price points. But just how much onboarding software does your business need?

Free or full service?

Users have come to expect friendly modals and tooltips to pop up when they open an app for the first time, or when a new feature appears in an app they are already using.

For a user experience team, it’s obvious that making product tours is essential to retain users. How to implement a tour is sometimes less clear, however. Many software solutions exist to assemble product tours, but they vary widely, making it difficult to evaluate which is the right one for the task.

Some solutions are free but rely on custom work by developers. Others are multi-featured SaaS (software-as-a-service) platforms that aim to take the coding and technical difficulty out of implementation and include extras like analytics. The more these products offer, the more expensive they become, some charging several hundred dollars (or more) per month.

Every business has a different budget and set of needs. We will look at three examples of onboarding tools that cover the spectrum from DIY to full service, to see what kind of features are offered at each price point.

Appcues

Code-free tours and more

Appcues has been around since 2013 and is one of the most well-known onboarding tools. It’s also great for marketing and design teams as almost no technical is experience required to create highly customized product tours.

Pricing 

Starts at $259/month and goes up based on features and number of active users.

Easy to start

Appcues works with a Chrome extension. You download the extension and then navigate to the page for which you would like to create a product tour. From there, you can turn on the Appcues dashboard and start creating tours.

Other team members can be added to a project so that they can contribute too.

Code-free tour customization 

A high degree of customization can be achieved without touching any code. You can select a theme to use (including your own) and a template. In the dashboard, you can make style and placement choices, and define the type of tour modules you need and their order of appearance.

Powerful extras 

Some additional features include Appcues’ analytics and customer service. You can create and track specific user types and their interactions in order to see where tours are working best. Premium plans come with a personal account representative who can help you get the most out of the platform.

Good documentation 

The developer documentation has sections written for all common frontend web technologies, making it easy for developers to know where to add the required code for a published tour.

If your team wants to add custom CSS, Appcues provides a full list of classnames with what they target in order to make this as simple as possible.

Overall

Appcues offers a powerful set of features. However, the big price tag is not necessarily worth it unless your team would benefit significantly from everything the product offers.

Help Hero

Easy, affordable tours

Help Hero is an inexpensive and easy way to create product tours. The platform comes with many helpful extras including analytics.

Pricing

Starts at $25/month and goes up based on number of active users.

Short learning curve

Like Appcues, you get started through a Chrome extension. You can also create themes with some basic style choices (or whatever you want via custom CSS).

Help Hero’s dashboard can be understood quickly. Unlike some products that overwhelm with options, Help Hero makes it obvious what to do next and what options are available. You create tour “steps” with the text and buttons that you like. Styling is handled with markdown, a simple formatting syntax, and custom CSS.

Customization via CSS

The out-of-the-box style choices are limited so in order to get the exact look you want, you will probably need custom CSS.

In order to add custom CSS, you specify a classname which allows you to target a certain step. CSS properties are added as inline styles so they often require !important to work. While this gets the job done, it may be irksome to have to add CSS in a way that would normally be considered a bad practice.

Bonus features

More advanced features include: tour checklists, the ability to target tours to specific devices and create user types and events, and an analytics dashboard to monitor tour step completion.

Easy installation

For React and other single page apps, you can install Help Hero as an NPM package. For vanilla JS, you only need to add a script tag. A small amount of additional code is needed to trigger other features such as identifying users.

Overall

Help Hero represents an excellent value for the price. You get a simplified version of what a product like Appcues offers but for a fraction of the price. The main drawback is that Help Hero requires some CSS skills to customize tours.

Intro JS

Straightforward solution for coders

Intro JS is an open source javascript library that allows you to create a product tour by adding a small amount of code directly into your app.

Javascript libraries are handy blocks of code that can be easily integrated into existing software. Using a library means that there’s no third-party platform in between your app and product tour, as in the previous two solutions discussed. Instead it’s like using a custom coded solution, but without having to start from scratch.

Pricing 

Commercial use requires a one-time licencing fee of $10 for one project and $100 for unlimited projects.

Lightweight

Intro JS is just 10kb of javascript and 2.5kb of css, minified and gzipped, so there are no worries about it slowing down your site.

Customization control

You can download the code and make it your own. Or you can install it as an NPM package, whatever you choose. 

Styles are changed by modifying the original CSS, or by creating a separate theme CSS file.

To create tour steps, you add a data-intro code into the HTML, which can optionally specify position and order:

<a href='http://example.com/' data-intro='Hello step one!'></a>

Overall

Intro JS is a straightforward solution for product tours. It’s clean and performant, with full customization control.

The main drawback of a library like Intro JS is that it requires a developer. It’s quite easy to install and setup, but frequent changes could be problematic. Other tools allow a user experience team to move faster and work more independently.

The couple other drawbacks are the lack of analytics, and lack of documentation for certain technologies (there’s nothing for React, for example).

Conclusion

Every business will have different needs when it comes to product tours. Teams with a strong focus on using product tours to drive their sales numbers may find a high-powered tool to be a worthwhile investment. But not every team fits this mold, and there are tools for every use case to be found. It’s not about finding the best tool, but the one that makes the most sense for your business.

Helios – an innovative financial risk analysis tool

The business risks of overlooking software documentation

12 CSS tips and best practices

Share This