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:
- Add references in your code to pageguide.js, jQuery & pageguide.css
- Add a document ready callback to setup the page guide
- Add a simple
<ul>to the bottom of the pages you want the pageguide to appear on. - Customize the page guide tour title.
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
