Build Guided Website Tours with Free Hopscotch Library

By . in Toolkit. Updated on .

Every so often I find a script that really stands out and deserves praise. Hopscotch is one of those scripts, a free tooltip-based website tour script developed by the team at LinkedIn.

We’ve written tutorials on building website tours using free JS plugins. But Hopscotch is a newer type of library that runs on JSON directions.

Read Also: 40+ Useful Tooltips Scripts with CSS, JavaScript, and jQuery

Hopscotch tour plugin

If you visit the main project page you’ll find a lot more info about Hopscotch.

It’s developed to parse a JSON object and create a custom API for easier page manipulation. This way you can easily change the direction, speed, and behavior of your guided tour.

You define whichever callbacks you want and when they should run. This includes custom JavaScript functions that run on multiple pages throughout the tour. Pretty crazy!

The entire thing is powered by Vanilla JS so you only need to add 2 specific Hopscotch files: a CSS stylesheet and the JS library. From there you can write your own tour based on simple JSON code that targets which elements to hit, how to structure the tooltip, and how the tour should respond to user input.

To get started have a look at the general usage guide which covers a very basic setup on a simple webpage. Underneath that, you’ll find a whole list of custom options you can add into the JSON object, along with techniques for writing your own callback methods for various user behaviors:

  • Starting/stopping the tour.
  • Clicking next/prev buttons.
  • Handling the tooltip close and skip buttons.

After skimming the main GitHub repo I can’t say it has a ton of direction for getting started. I think it’s better to dig through the main Hopscotch page and start with their guide.

Simple hopscotch touring web plugin

Please note that you should be comfortable with JavaScript and JSON before using this library. You can get by without any prior knowledge but it helps if you’ve put in the time to learn the basics.

Either way, Hopscotch is a game changer for website tours and it’s probably the best vanilla JS script out there with all these options.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail