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:
- Add references to pageguide.js & pageguide.css
- Add a simple <ul> to pages you want page guide to appear on
Add the following block of code to your page
- 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.
pageguide.js attaches CSS pseudo elements to whatever features you define on your pages.
The numbered arrows can be placed on top, bottom, left or right of whatever you are trying to highlight.
Change the style of the pageguide as much as you want. We include both CSS and LESS in the repo. We even attach a class
to the body of the page when the guide is open.
The page guide also scrolls for you. Just use the forward and back arrows on the left to move been elements.
We include custom tracking for all the actions of the pageguide. Simply toss in your tracking code from Mixpanel, KISSMetrics, HubSpot, etc.
and find out what people are interested in.
Welcome to pageguide.js
Here's an example welcome message: Interested in pageguide.js? Fire up our tour to learn more!