Tourscript

Jquery takes a tour

a lightweight jquery script for building tours around sites
by Thomas Diehl, www.dievolution.com

Imagine you developed a nice web application in your favorite language. Everything works fine, it is easy to use, but it could use an even better documentation. Something like an interactive tour...

Let's try Tourscript! It is a little javascript app based on jquery providing you a very easy way to show your users your site, your app or whatever you can think of. It uses json formatting on the backend, so you can feed it directly from the page, via a seperate file or via a database.

Demo

Click the demo button on the right or the start demo tour button on the top right to start the demo tour.
I am using this script in my application www.pomodorohelper.com, go there if you want to see a working example.

Install

Follow this steps to install Tourscript on your site:
  1. Download Tourscript from Github by clicking the big download button
  2. Add jquery, jqueryUI (for the blinking stuff) and the tour.js to your websites head: click here to show code
  3. Load the tour: click here to show code

How to build a tour

Tours are stored in the json format. If you want to create a static tour, the easiest way is to create a .json file. Inside, use an array of hashs to display the tour. Sounds complicated? Here is an example:

Each hash is one item in the tour.

"element" and "label" should always be in a touritem, "options" and "highlight" are optional.

If you have problems using the script, use github or the "normal" ways to contact me.

I'm also always interested in new ideas and bugfixes for the script.

Demo Download from Github

Feature overview

start demo tour