Pageguide.js for Creating Interactive Guides with jQuery and CSS3

PageGuide.js is an interactive visual guide to elements on web pages. Instead of cluttering your interface with static help message, or explanatory text, add a pageguide and let your users learn about new features and functions. It's easy to implement and non-invasive. PageGuide.js has built-in interaction tracking hooks. This enables you to track usage of PageGuide.js via your preferred analytics tool. Check out the steps below & an example to get a better idea how pageguide.js works:

1. Add references in your code to pageguide.js, jQuery & pageguide.css
2. Add a document ready callback to setup the page guide
3. Add a simple <ul> to the bottom of the pages you want the pageguide to appear on.
4. Customize the page guide tour title.

Image may be NSFW.
Clik here to view.

An example:

Step 1 - Add pageguide.js

Add <script src="pageguide.js"></script> to the bottom of your html document, right before your closing </body> tag.

We provide both the standard js as well as a minified version.

Step 2 - Add pageguide.css

Add <link rel="stylesheet" href="stylesheets/pageguide.css"> to the header of your html document.

We provide a css file as well as a minified version. Alternatively, we use LESS CSS at Tracelytics, so we provide that as well.

Step 3 - Add setup code

Add the following block of JavaScript to your html document:

$(document).ready(function() { tl.pg.init({ /* optional preferences go here */ }); });

Step 4 - Choose the elements that you want included in the page guide.

pageguide.js matches the first occurrence of the selector you specify in the <ul> you put on your pages in the next step.

Step 5 - Add the pageguide.js <ul> near the bottom of your pages.

<ul id="tlyPageGuide" data-tourtitle="REPLACE THIS WITH A TITLE">
  <li class="tlypageguide_left" data-tourtarget=".first_element_to_target">
    <div>
      Here is the first tour item description. The number will appear to the left of the element.
    </div>

  </li>
  <li class="tlypageguide_right" data-tourtarget="#second_element_to_target">
    <div>
      Here is the second tour item description. The number will appear to the right of the element.
    </div>
  </li>
  <li class="tlypageguide_top" data-tourtarget=".third_element_to_target">

    <div>
      Here is the third tour item description. The number will appear above of the element.
    </div>
  </li>
  <li class="tlypageguide_bottom" data-tourtarget="#fourth_element_to_target">
    <div>
      Here is the fourth tour item description. The number will appear below of the element.

Requirements: jQuery
Compatibility: All Modern Browsers
Website: http://tracelytics.github.com/pageguide/
Download: https://github.com/tracelytics/pageguide

Like what we post? Share your thoughts on the comments below. If you wish to get regular updates on what we post, Do Subscribe to our Feed

Permalink | Leave a comment  »