User Onboarding

jQuery Website Tours: When Are They A Good Idea?

September 16, 2016

Ah, jQuery. The faciliator of billions of website interactions every day, this little Javascript library has grown over the past decade to power 65% of the world’s websites, allowing neat animations, seamless events and the development of thousands of handy plugins.

Including, of course, many jQuery website tours, which are many developers’ first port of call when they’re looking to educate users or simplify onboarding. And for good reason; they're free, they're easy and they (normally) look pretty good.

Arguably the most popular plugin in the mix comes from Bootstrap Tour — originally a plugin for Twitter’s widely-used Bootstrap CSS framework, it’s now a self-contained library with well over 3000 stars on Github and a large cohort of contributors. It’s easy to install and widely used, though perhaps not as feature-rich as some of the other solutions.

Another popular option is Joyride, authored by the fine folks at Zurb Studios and powering guided tours since 2011. It’s been starred 1,287 times on Github and is ridiculously easy to use — anyone with a basic understanding with HTML and jQuery will likely be able to set it up in no time. That said, customization is a breeze and for this reason Joyride is often seen as a stronger choice for those who want to do a little more with their website tour.

We’d be remiss if we didn’t point out that other solutions are available — a ton of them in fact. For instance, you could try intro.jsHopscotchtrip.jsCrumbleRighthere for WordPress, or Power Tour, or any of the 20 other solutions listed here by the good fellas at NinoDezign.

However, we’re less interested in the options and more interested in results here — website tours are often much-of-a-muchness, and there may not be much to distinguish them from no-code solutions such as, ahem, Nickelled.

So with that in mind…

When should you use a jQuery Website Tour?

1) When you don’t want to pay

This is, of course, the most obvious reason for opting for jQuery over a hosted website tour solution. Many hosted website tour providers are designed for large or enterprise businesses and run upwards of hundreds of dollars monthly (our cheapest package starts at $99/m, which may still be out of bounds for smaller businesses), so hacking together your own solution can seem like an attractive option. If you're cash-poor but development-time rich, you can probably put together your own solution for free.

2) When you can code

Even if you could afford a hosted solution, many developers prefer to code their own alternatives. And if you have the time and skills, why not? jQuery website tours were a leap forward in terms of simplicity, so the bar is relatively low — all you really need to be able to do to use Joyride, for instance, is embed the library on your page and set up a few lines of HTML.

One gotcha here is that even if you choose to code your own, be mindful of deploy cycles or code freezes. If you work in a large business, deployment cycles can run into weeks or months, meaning a ‘quick’ change to the copy or positioning of a website tour may not be that quick at all. A benefit of hosted solutions is generally that the steps and copy aren’t stored on the page itself (rather, they are loaded from a database), and are therefore independent of deployment cycles, code freezes, and other large website nastiness.

3) When your content’s all on one page

Generally, jQuery website tours are easy to use on one page and a nightmare to use across multiple pages. A tour which needs to cover three different pages on a website, for instance, will require some fairly complex customization to ensure that the user is sent to the right page and the tour reappears at the right step. If your tour needs to span multiple pages, our recommendation would be to use a hosted solution or settle in for some fairly heavy development.

4) When you need advanced customization

Most of the libraries we referenced above are open source, which makes them super-easy to fork and customize. This is an obvious advantage over hosted website tours. With Nickelled, for instance, you can change fonts and styling, but if you want to make your steps zoom in from the top of the screen, or fold over, or use some other eye-watering CSS effect, you’ll probably want to code it yourself.

5) When you don’t need stats

As they run on the client side, jQuery website tours don’t save any data to a server (unless you’ve done some pretty extensive customization). So if you want to know your guide completion rate or get feedback, you’ll have to hack that together yourself. It’s not too arduous – perhaps as simple as sending an event call to Google Analytics for every step completed, but it’s something to consider.

(Note: one Bootstrap Tour user has already considered this here in a feature request, with some sample code).

6) When you have time to maintain

Like many code-based solutions, jQuery website tours suffer from some scaleability issues — even after deployment, they will require the time and resources of the development team to keep up to date.

The biggest issue we see here is with content changes — even if you need to tweak a word or two, you’ll need to fight for dev time to get it done (unless you’re able to make changes yourself). That problem tends to go away with hosted solutions, as they have separate front-end edit interfaces which anybody with access can log into and deploy changes instantly.

Another common maintenance issue arises with website changes. Unless a close eye is kept on who’s editing what, website tours which are based on page elements can break easily, usually because someone renames or deletes an element without realizing that there’s a tour step attached to it. Again, easy to fix if you have the development time, but very difficult to keep maintained if the guide owner sits in a different part of the organization.

7) When you can support yourself

Finally, the libraries themselves are generally licensed under the MIT license and are maintained by an enthusiastic group of volunteers. That’s great — offering solutions like this to the community helps keep the web free and Github encourages constant innovation and continuous improvement.

That said, a look at the Github issues pages for both Joyride and Bootstrap Tour suggests that keeping libraries up-to-date is an ongoing battle. A hosted solution will likely be better maintained and offer better support when things do go wrong.

Over to you

Have you had good or bad experiences using jQuery website tours? Let us know in the comments, or hit us up @nickelledapp on Twitter.