Linkedin.github. Hopscotch is a framework to make it easy for developers to add product tours to their pages.
Hopscotch accepts a tour JSON object as input and provides an API for the developer to control rendering the tour display and managing the tour progress. Event Callbacks Callbacks for tour events: onStart, onEnd, onShow, onNext, onPrev, onClose, onError. Shepherd — Guide your users through a tour of your app. Better introductions for websites and features with a step-by-step guide for your projects.
Multi-page introduction, Page 1. Usablica/intro.js. Building A Step-By-Step Guide Using Intro.js [Tutorial] There are numerous plugins for creating your own guided website tour.
![Building A Step-By-Step Guide Using Intro.js [Tutorial]](http://cdn.pearltrees.com/s/pic/th/building-guide-using-tutorial-62499438)
This animated page effect is very useful to new visitors who are just learning the ropes of your website layout. How do they know all the important interface features and menu links? By using a guided tour it is easy to explain all of these features to users who are interested. I want to focus this tutorial onto an open source jQuery plugin called Intro.js.
I really like this choice because of the page dimming feature, also the easy customization of CSS to change how the tooltips look. Tourist.js. Tourist.js is a simple library for creating guided tours through your app.
It's better suited to complex, single-page apps than websites. Our main requirement was the ability to control the interface for each step. Bootstrap Tour. jQuery Joyride Plugin. Create jQuery Feature Tours in a Breeze Setting up Joyride is simple, just attach the needed files, drop in your markup and choose your settings.
Joyride is extremely flexible and lets you take control of how people interact with your tour. We programmed it to be cross-browser compatible with modern browsers and even used some fancy CSS to avoid images. Now let’s see just how easy it is to take your first ride without getting the fuzz involved. New in Version 2. Pageguide by AppNeta. aSimpleTour: Alvaro's Simple Tour Plugin for jQuery v1.0. Bootstro.js demo. Features Works cross-browser, cross-devices .
C'mon, it is bootstrap. Trip.js. Crumble - jQuery Feature Tours. Crumble allows you to quickly and easily build feature tours for your website or app using small bubbles!
The bubbles are visually interesting, will draw attention and due to the small size make sure that you will write using concise language that visitors will read. The tour itself is defined as a standard ordered list in your html, making it accessible. Chardin.js.