KingTour - Royal On-Page Tours¶ ↑

You can make screenshots, movies or write a manual for your web app .. OR go for on-page tutorials.

On-Page tutorials, as the name suggests, live directly in your app. A user clicks his way through the web-application while reading your help bubbles

A KingTour can serve as:

• Getting started tour

• Help

• Documentation with video and images

• Show-case your app within a demo account

• just about anything you can imagine, as long as it’s html

Usage¶ ↑

See example here: salesking.github.com/king_tour/

Look into the source and use firebug to get a grasp of it .. as long as the docs are sparse :-)

Basics¶ ↑

A tour is a div, identified by its id attribute. For each tour step the main tour wrapper contains divs with the real bubble content. The content can be any html.

The tour and its steps are configured inside the div’s title element, with options interpreted by javascript.

Example¶ ↑

Setup KingTour with some custom options. For detailed options see github.com/salesking/king_tour/blob/master/king_tour.js#L141

KingTour.tourId = 'MyTourDivId';
//custom skin, located in skins folder
KingTour.skinId = 'salesking';
//whatever base you've got
KingTour.BASE_URL = '/javascripts/king_tour/';
//where to go on close
KingTour.closeUrl = '#';
//stay here when in multi-page tour
KingTour.onCloseClickStay = true;
//enable mouse click for prev/next .. actually pretty confusing
KingTour.mouseNav = true;
//go for it
KingTour.open();

Tour html definition and div title options:

<div style="display: none;" id="defaultTour" class="kTour"> 
  <!-- title element refering to the current page => url, 
        with multiple tours add div's on this level with own url -->
  <div title="http://salesking.github.com/king_tour/"> 
    <!-- tour step element options. Dont miss the ' around string options: 
        el => jQuery element selector
        padding => padding around the selected element
        pos => position of the bubble around the el
        Add divs on this level for more steps. the options can be in any order -->
    <div title="el:'h1', padding:15, pos:'bcc'"> 
      <p>This is Tourstep one</p>        
    </div>     
  </div> 
</div>

Size¶ ↑

17.2K compressed(lf, comments)

5.7K gziped

Credits¶ ↑

This repo started with a clone of amberjack2 and was jQueryfied with lots of fixes and enhancements during it’s implementation at SalesKing. amberjack was originally developed by Arash Yalpani. I would be glad to commit back to the origin if Arash puts up his sources on Github.