A review of “site tour” Javascript libraries

I recently had a need to display a “site tour” to point out important features to our users. I was happy to discover that there are some very easy-to-use libraries out there for this purpose. However, I found that each library was ultimately lacking at least one vital feature. I wish these authors would put their heads together and build the ultimate site tour.

Until they do, I present my review of a few of the leading candidates

Intro.js

http://usablica.github.io/intro.js/ (11KB minified)

  • Pros:
    • aesthetically pleasing popup
    • uses a full-page overlay with a really nice gradient
    • code is wrapped in AMD module
    • highly configurable
  • Cons:
    • doesn’t handle fixed-position elements

If it weren’t for the one con I listed, Intro.js would have been my selection. I dug deep for a fork that included fixed-element support, but never found one. If you find one, let me know!

Trip.js

http://eragonj.github.io/Trip.js/ (8KB minified)

  • Pros:
    • aesthetically pleasing popup
    • reasonably configurable
  • Cons:
    • doesn’t do a full-page overlay to help highlight the tour element
    • popup is just a little too subtle without an overlay; it would be easy for the user to miss it
    • doesn’t handle fixed-position elements

It looked like there was some code in the works to handle highlighting the tour element with an overlay, but it didn’t seem to work yet. For me, the subtlety of the popup was a show-stopper.

Hopscotch

https://github.com/linkedin/hopscotch (20KB minified)

  • Pros:
    • aesthetically pleasing popup
    • handles fixed-position elements properly
    • reasonably configurable
  • Cons:
    • doesn’t do a full-page overlay to help highlight the tour element

Hopscotch wins by default. It has just enough visual oomph that I can overlook the lack of an overlay.

One thing I didn’t see at first was that there is an undocumented option for suppressing the numeric indicator on the popup. So you can use the library in situations where you’re not strictly building a sequential tour. The option is “isTourBubble”, and you apply it at the tour level:

Leave a Reply

Your email address will not be published. Required fields are marked *