How to Setup Product Tour Widget on Your Page?

Posted in Articles

An example of what some people call a “product tour widget” looks like this example from Bootstrap Tour    — just click the demo button.

Now that you know what a product tour widget is, how to we get something like that on our page.  If you are using Zurb Foundation 5 framework, then the widget is already in there.  It is known as the “Joyride” widget.

If you are using Twitter Bootstrap, it is not available in Bootstrap 3.0.  However, you can get it from BootstrapTour.  It requires Bootstrap.

If you are not using Bootstrap nor Foundation, but using jQuery, you can use something like PageGuide.js

If you are not using any of those, try Hopscotch or Intro.js.  You just have to include a CSS and a JS file and define your tour steps.

If you are on WordPress, there are page tour plugins such as this one.  Or you can integrate one of the above into WordPress yourself.  An article on Sitepoint shows how to integrate Intro.js into a WordPress plugin).

 

---