How to create a "guided tour" in Rails app? [closed]

Question

I'm looking for ideas, best practices, gems (if such exist) that would allow me to easily create a guided tour for an existing Rails 4 web application.

I would like any new user that signs up to be greeted with a welcome message that explains some of the site's features. When they click "Next", they should go to another page (say, projects list) where another explanatory message appears. Next step would be yet another page (e.g. tasks list) with message and so on... I'd like the explanatory messages to be as unobtrusive as possible, similar to flash messages.

The possibility to skip or hide the guided tour and start it over later would be, of course, very nice to have.

I know that I could create it "by hand" using cookies and some additional controller logic (flash messages) but wouldn't like to pollute all of the controllers with additional logic for guided tour.

Answer 1

I've been using Shepherd.js for the last several months in my Rails apps. I found it handles itself best of all the JavaScript tour libraries in a responsive webapp, as the mobile experience is an important part of our product. Plus, its provided themes were easy to integrate into our existing look-and-feel. (You can install the Shepherd.js rails-assets gem for easier use in the asset pipeline.)

I've since wrapped Shepherd.js into a Rails gem called Abraham to make it easier to configure tour content, track which users have seen each tour, and allow users to skip a tour for now.

Answer 2

Another option is IntroJs http://usablica.github.io/intro.js/, both this and Baldrick's answer are great options.

Answer 3

You could use the jQuery plugin Joyride for this.

I would create a controller dedicated to the guided tour that renders some of your existing views (for example '/tour/1', '/tour/2', 'tour/3', ...), but add inside the hidden html ol used by Joyride (see the doc). At the end of the tour on each page, use the Joyride callback postRideCallback to redirect user to the next page of the tour.