1. You know how to code #
2. You want to save money #
One of the big advantages of JS-built product tours is that they’re often open-source libraries, which means it’s free of charge. There are services that charge for commercial licenses, but they are often for a lifetime and are peanuts compared to what you would pay for a more robust no-code product adoption platform.
3. You want to be agile #
If you type product tours or onboarding tours on GitHub you’ll find quite a number of options. But not all of them are good. Some are just unmaintained and outdated like Hopscotch. Others are just really underwhelming like Trip.js.
1. Intro.js #
2. Shepherd.js #
Shepherd.js is a JavasScript library for creating product tours that relies on another open-source library called Floating UI to create dialogs for each step. You can create single tooltips with their floating dialogs or have an entire product tour with multiple steps.
3. Bootstrap Tour #
Bootstrap Tour is a widely used open-source HTML, CSS, and JS-based frontend framework. So if your website is built on Bootstrap, Bootstrap Tour might be a good fit to build an onboarding flow with because it draws its design fundamentals from Bootstrap. Despite that, you can still use it even if you’re not using Bootstrap for your website’s frontend.
4. Codyhouse #
5. Chardin.js #
Chardin.js is truly a barebones solution for creating onboarding tours. Essentially, it’s a layer of instructions that go over your app. You can either set the instructions to all show at once or have them go in a sequence.
6. Product Tour JS #
7. Smartour.js #
8. Tooltip Sequence #
9. Webtour.js #
Webtour.js is one of the more robust product tour open libraries out there. It comes with basic product tour building features, but it also has several advanced functionalities such as highlighting elements, dynamic element targeting, and keyboard control.
10. Tourguide.js #
These are our 10 suggestions for you if you’re looking for product tour open libraries. And if you’re thinking, “well, these all seem quite similar”, you would be correct, since there seems to be an agreed-upon format that they usually follow. But any number of these can be an adequate option if you have a super simple product that needs an onboarding tour.
Don’t know how to code? Need something more robust? You’ve got options #
Coding is hard, and it’s not for everyone. Or maybe you are a coding wizard, but you just don’t want to waste much time on building and maintaining user onboarding tours yourself.
You can use a no-code tool instead 😉 Chameleon provides a robust product tour builder that allows you to create fully customizable and highly targeted onboarding flows. It also integrates with your favorite tools and offers so much more. If you’re looking for something better than just a sequence of dialogs, then you need a dedicated product adoption platform.
Try for free, and see the difference for yourself.