An interactive guide for web page elements using jQuery and CSS3.

View the Project on GitHub tracelytics/pageguide

What's AppOptics?
Full stack application performance insight.
Watch your entire environment in one place. start tracing now!

Hosted on GitHub Pages — Theme by orderedlist

See pageguide.js in action!

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.

Need some more information about this box?
Click the page guide button!
This too! Click the page guide button!

It's easy to implement and non-invasive:

  1. Add references to pageguide.js & pageguide.css
  2. Add a simple <ul> to pages you want page guide to appear on
  3. Add the following block of code to your page
    <script type="text/javascript">
    $(document).ready(function() {;
  4. Profit! (and measure it with built-in interaction tracking hooks).

If you like to learn by example, view the source of this page and check out how we did it!

More down here? Let pageguide.js take care of the scrolling for you.

Welcome to pageguide.js

Here's an example welcome message: Interested in pageguide.js? Fire up our tour to learn more!