Awesome open source JavaScript product tour libraries

When you go to a hospital, the first thing you would look at is the signs that tell you where the doctor is, how you pay for your visit or where to ask a question.

Without a user guidance, you are lost.

This is also true with apps. If your application don't have a proper user onboarding experience, you'll lose your customers.

This is mainly because they have seen your service the first time and they have no idea what to do.

If you don't guide them, they will click on that big cross button, even remove their accounts or say "I'll do this later", not realizing they have already abandoned the app.

Enter product tour libraries. They provide awesome guides by providing step-by-step tips so you know what to do as you kick the tires.

In this blog post, we'll cover 5 open source libraries we love.

Why use an open source product tour library?

You obviously have two options when it comes to licenses and the freedom to use a product tour environment. Either you use one of the libraries and or go with a third party service.

While we are not against using a third party service it may end up costly especially if you are a startup.

This is why we cover only open source, javascript product guide software in this blog post.

The downside is that it will take some time to implement with your in-house development team. If you go with a 3rd party product tour software service, you'll have way more features and can be up and running in a few days' time.

If you would like to go with a service-based product tour software, we suggest one of the supported, SaaS alternatives out there, eg Userguiding, Stonly or Userflow.

Intro.js

This is a lightweight, user-friendly onboarding tour library. The reason we placed it on top is that this library has been developed since 2014, and is one of the oldest and well-maintained user guiding libraries out there.

It has both a commercial and an open source license (AGPLv3). For a lifetimee fee starting from $9.99, you get a commercial license. However, the $9.99 Starter package doesn't give you any commercial support (for understandable reasons). Those who can't live without email/phone support may want to purchase a commercial license.

What we love about Introjs is its clear documentation. It is well laid out and provides several examples for themes, how to start with Intro.js and configure different parameters.

The company behind Intro.js claims it has been trusted by 5000+ teams around the world, including Amazon, Nestle and SAP. There is seemingly a good community on StackOverflow as well.

What we like:

 ➕ Intro.js doesn't have any dependencies other than its JS and CSS files.

 ➕ It has well-kept, to the point documentation and installation is a no brainer.

What we dislike:

   ➖ None

Tourguide.js

Tourguide is a simple, clean, and small library for creating guided product tours for your web app.

Installation is fairly straightforward - just need one line to initialize Tourguide.js. This library is customizable, can also be used with a keyboard navigation, and uses JSON or HTML in the tour content. The look and feel can also be customized.

Just like other libraries we cover here, it can highlight a particular screen element as well.

However, the documentation is kept on Github, and provides few examples. This may be an irritating factor for some of the developers.

What we like:

 ➕ Simple installation and initialization

 ➕ Clean user interface

What we dislike:

   ➖ Lack of detailed documentation

Shepherd

Shepherd is an actively maintained Javascript tour guide with more than 10K stars on Github. Shepherd helps guide your users through a tour of your app.

Shepherd, just like other tools, is easy to integrate into your app. You only need to include Shepherd and nothing else, and the styles (all the look and feel) are bundled with Shepherd.

With an MIT license, Shepherd is also ready to drop into your application using React, Ember, Angular, Vue.js, ES Modules, or plain Javascript.

Its documentation is also quite good, making Shepherd one of the best open source product tour guides out there.

What we like:

 ➕ Simple installation and initialization

 ➕ Good documentation

What we dislike:

   ➖ Somehow not-so-modern UI

Chardin

Chardin is quite different when it comes to what it does. It shows an information box next to each element that needs a description.  We can safely say that Chardin is a good-looking tooltip tool plus a product tour guide.

You can use Chardin in sequenced mode, where one element will be displayed at a time, moving on to the next with a mouse click (or automatically after a set delay).

Being a simple overlay to display instructions on existent elements, Chardin does what it claims in a great manner. Once you add its JavaScript and CSS files, it will display a message next to an element programmatically.

With over 10K stars on Github, Chardin is still maintained actively.

Chardin has an Apache 2.0 license.

What we like:

 ➕ Simple installation and initialization

 ➕ Use it either in sequenced mode or tooltip mode.

What we dislike:

   ➖ None

React Joydride

React Joyride is a tour library that helps you create customizable, interactive, tooltip-style, step-by-step tours to guide your users through your web application.

While the name may confuse you, it is not related to React apps - you can use this library even though you use any frameworks out there including Bootstrap, Vue or Svelte.

One thing we loved with React Joyride tour is that its documentation is very clear. What you need to do is explained in a concise and also to the point.

What sets apart React Joyride from others is that you can implement several types of actions from within the library:

• Multi-route: You can stop a tour and start with another one.
• Controlled: You can interact with your own components through the spotlight.
• Custom: You can add custom HTML and get input from the end user (e.g collect email for a newsletter).
• Scroll: You can also scroll within the page to show the most relevant area.

What we like:

 ➕ Lots of features compared to others

 ➕ More customization options

What we dislike:

   ➖ None

FAQs

What is a product tour library?

A product tour library is a software library that helps developers create a guided tour or walkthrough of a product or website. It typically provides a set of tools and APIs that allow developers to define the steps in the tour, customize the appearance of the tour interface, and control the behavior of the tour.

What are product tour libraries used for?

Product tour libraries are often used to introduce new users to a product or to highlight new features of an existing product. They can be helpful in helping users understand how to use a product and can increase user engagement and retention.

Do product tour libraries actually work?

It depends on the type of the product. The effectiveness of a product tour library will depend on how it is implemented and used. It is important to carefully plan and design the tour to ensure that it is clear and easy to follow, and to use the library's customization options to tailor the tour to the specific needs of the product and target audience.

Conclusion

While there are other SaaS JavaScript onboarding services out there, going open source can be a cost effective and simpler way to introduce users to your app.

The applications we mentioned consist of usually just two files to drop in your app, and they are indeed easy to initialize.

How they look and feel depends on your design guide. We don't recommend to use them as is, as they may not work well with the overall colors in your app.

Until next time, happy useronboarding!

Team Magny