Shepherd is a popular open-source tool for building product tours. However, there are better options to meet the demands of modern onboarding. Here are some great alternatives that can help boost user adoption.
What is Shepherd?
Shepherd is a JavaScript library. It was built to help onboard new users with product walkthroughs. It's a flexible tool that allows you to drop product tours into your app using popular languages like:
Angular
Ember
ES Modules
Vue.js
Javascript
Shepherd comes with a few default themes, but its primary selling point is that it allows you to customize your tours.
The problems with Shepherd as an onboarding tool
We're not here to rip Shepherd. It's a good tool that does what it sets out to do. However, it falls short of a great modern onboarding tool for several reasons.
#1. Limited accessibility
Shepherd is relatively easy to use if you have good technical knowledge. However, you're out of luck if you don't know how to code.
In an era where no-code tools allow non-technical teams to achieve outstanding results across a broad domain of applications, Shepherd lacks the accessibility of rival tools.
#2. Limited functionality
Shepherd helps build product tours. But that's about it. Modern onboarding experiences require more flexibility, with features like smart tips, checklists, hotspot beacons, videos, etc.
#3. Technical issues
The library also has a lot of technical issues. If you go to the Shepherd GitHub page, you'll notice many problems, like inactive buttons, issues with steps, and a lack of browser compatibility.
As you might expect from a free product maintained by developers purely out of love, customer support can be slow. When you're building product tours, you need a tool you can rely on, and part of that reliability includes having access to quick resolution of any problems.
Again, we're 100% not trying to trash Shepherd. It's a good tool, but user onboarding is such an essential feature of modern product design and customer experience (CX) that it's simply not going to work for every team.
So, what should you do when you need a similar product but don't have a budget to spring for a more polished library?
Here is a list of open-source JS tour libraries that can help you design excellent onboarding experiences.
Eight JS tour libraries to use instead of Shepherd
#1. Floating UI
Floating UI is a lightweight, low-level library for creating various onboarding elements. Some of the elements it can help you build are:
Tooltips
Popovers
Dropdowns
Menus
and more.
Floating UI has a vibrant and active developer community. Many similar libraries have become slowly inactive over the years, meaning support and updates are thin on the ground. Floating UI doesn’t have that problem, which partly explains its popularity.
If you’ve been around the open-source onboarding game for a while, you’ll recognize the names Popper and Tether. Developers have for a long time used both libraries to position floating elements on the screen to drive digital adoption.
Floating UI is the evolution of these open-source tools. While Popper v2 is still active, Floating UI was built to replace it. One of the most critical parts of the upgrade is a more modern and powerful API. Unlike Popper 2, which only runs on the web using DOM, Floating UI supports the web, Canvas, React Native, and more.
Speaking of support, Usetiful is a big supporter of open-source onboarding initiatives. We sponsor Floating UI so that teams can reduce their development lifecycle and also build better onboarding experiences.
#2. React Joyride
React Joyride is a React component for creating product tours for your app or website. You can add tooltips, beacons, dialogue boxes, and more.
The library allows you to customize the styles of each step and use custom components too.
The front page of their website also doubles up as a demo of what this JS tour library can do. You can use it to highlight elements in your website and populate them with dialogue blocks. We love that feature.
Getting started is pretty straightforward, and the library comes with thorough documentation. Sure, this JS tour library isn't perfect, but it's a cool open-source alternative to Shepherd.
#3. Crumble
Crumble is over a decade old. In fact, it doesn't seem to have been updated at that time. However, it's a fun JS tour library that does one thing and does it well: creating bubble tooltips for helping onboard uses.
It uses grumble.js and allows you to choose bubbles of different colors and sizes to overlay on your website.
The interactive tours it creates aren't complex or elegant. It's not going to win any prizes for design. However, this is a nice tool if you're looking for something simple and easy to implement. And if you're looking to add something retro to your app, it could be a good choice.
#4. Product Tour JS
Product Tour JS is a JavaScript library that is very useful for basic product onboarding.
One of its best features is fine-grain repositioning (allowing you up to five positioning inputs). Tooltip placement is an integral part of any product tour, so Product Tour JS's flexibility is very welcome. That said, the controls are a bit fiddly at first but easy enough to get the hang of.
While the app is mobile-ready, the developer hasn't quite sorted out dynamic positioning for floating tips. That’s a serious disadvantage in our modern smartphone-obsessed environment. Finally, the library is customizable. You can replace the default items with the config object in JS.
Overall, this is a good JS tour library. It hasn't been updated in a few years, but it's still more than capable of doing the job, as long as you're not looking for something super slick and detailed.
#5. Intro.js
Next up is Intro.js. It's one of the most well-known js tour libraries out there. Per their website, this library is used by over 5,000 teams across the globe, including Nestle and Amazon.
Intro.js is easy enough to install. It consists of a JavaScript and CSS file. The library is lightweight, without any external dependencies. Additionally, it has a simple API that can achieve decent results.
Some of the better features included are progress bars, tooltips, and tours with either buttons or bullets.
Like all good JS tour libraries, Intro.js is customizable. Additionally, Intro.js can find elements even when they are placed within scrollable environments. Finally, it supports all browsers and has excellent documentation too.
Again, this app isn't perfect. It doesn't seem to have been updated in a while, and a quick glance at its GitHub shows a lot of unaddressed issues.
Intro.js is free to use on a non-commercial product. However, it has a tiered pricing system, which is as follows:
One project - $9.99
Five projects = $49.99
Unlimited projects = $299.99
The higher tiers offer customer support.
#6. Driver.js
Driver.js, as the name implies, was built to drive the user's attention to your page. It's lightweight, powerful, and capable of performing some fairly simple user onboarding duties.
It's one of the more feature-packed open-source js tour libraries. You can use it to:
highlight any on-page element
create feature introductions
block user interactions
add focus shifters
It's easy to install, too, and it still has a relatively active community of users.
It's not simply a JS tour library. You can also use it to add overlays on any app or website. It is highly customizable thanks to a robust API. Our favorite feature of the app is the way it can dim the background to let the user focus on a particular element.
Overall, this is a good product. It doesn't look the slickest, but it's very functional and a nice option for a free library.
#7. Tourist.js
Tourist.js is one of the most straightforward js tour libraries out there. It's very easy to use and can create guided tours on apps. It's probably less well-suited to websites. However, it can still do the job despite the developers recommending you should mainly use it for single-page apps.
Like the other js tour libraries on our list, Tourist is open-source. Installation is simple. Once you have the JavaScript library, you can add a CSS file with styling. Tourist allows you to control the interface in each step, with progress driven by user interaction.
Sadly, Tourist hasn't been updated in a while. It was created by the now-defunct Easel Inc. and seems to have been neglected since its demise. However, it's a great free alternative that can still do a job, so it earns its place on our list.
#8. Usetiful Free
While the other JS tour libraries on our list are all worth a try, if you're looking for something that meets the demands of modern user onboarding, you should give Usetiful Free a try.
The free version of our user onboarding tool comes with lots of great features that will help you build:
hotspot beacons
tooltips
Usetiful is also a great option for people without technical skills too. Our no-code tool can help you build your product tours quickly, thanks to our interactive tour builder. What's more, we even provide email support with Usetiful Free, meaning you'll always be able to get the most out of our product.
Of course, while Usetiful Free will allow you to achieve almost anything possible with the other JS tour libraries on our list, our Plus, Premium, and Enterprise versions are built for more advanced onboarding needs.
If you want to segment your users, add customized themes, collect user analytics, or onboard employees, Usetiful should be your number-one choice.
Usetiful can be used for a wide range of business functions, too, like customer support, sales, HR, and product management.
Click here to learn more about how we are helping drive digital transformation by bringing digital products and users together.
Conclusion
Shepherd is a simple yet functional JS tour library. However, it’s far from the only open-source tool available. There are some solid alternatives out there, like React Joyride, Driver, and Intro, that can help you achieve the same tasks.
However, when you need to provide more complex user onboarding, try out Usetiful Free.