Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Fetching latest commit…

Cannot retrieve the latest commit at this time

..
Failed to load latest commit information.
test
README.md
pilotfish-usher.js

README.md

About

Pilotfish quality rating: 0.5 fish

This is a plugin for the Pilotfish user experience toolkit, that aims to usher users to what they want to accomplish, showing them around for the first time and pointing them to what they are looking for. Inspired by other guided-tour plugins.

Features

  • Guided tours for new users
  • Easy setup - just add data attributes of elements to guide through:
    div content
  • Integrated event tracking with the recorder plugin

Usage

This is a pilotfish plugin, and as such these instructions assume you already have pilotfish on your page.

Basic:

Pilotfish('require', 'usher');

// Start the tour on page load for first time users
Pilotfish('usher', 'welcome');

Advanced:

Pilotfish('require', 'usher');
jQuery(window).load(function() {
    // Start the tour
    Pilotfish('usher', {
        selector        : ".usher", // CSS3 selector of the elements to walk through
        textAttr        : "data-help-text", // Text to display for the hint
        sortAttr        : "data-help-order", // Which order to walk through the divs
        scrollSpeed     : 500, // number of milliseconds to take to scroll to the next element.
        record          : true, // record the start/stop of the tour with recorder plugin

        // Display an automated welcome message asking them to take the tour
        welcome         : {
            delay           : 2500,
            sessionVariable : 'usherWelcomed',
            text            : 'Take a tour?'
        }
    });
});

Trigger the tour via a button with:

<input type=button onClick="Pilotfish('usher')"/>

Download/hosting

The source is hosted on a CDN for your convenience. You may point your script tag there (which will also give you the latest stable updates as we release them), or you may download it and host it yourself.

http://cdn.pilotfish.io/client/plugins/usher/pilotfish-usher.js

Issues/Requests/Support

Please check out the existing issues, and if you don't see that your problem is already being worked on, please file an issue

History

0.5.1
  • Record the pathname with the event so we know which tour it is

0.5.0

  • NEW: Event tracking with recorder

0.4.0

  • NEW: Welcome new users with a tour message with Pilotfish('usher', 'welcome')

0.3.0

  • NEW: Auto scroll to the element
  • Much improved CSS. Thanks BladeBronson!
  • Last item in the tour says Done instead of Next.
  • FIX: outerHeight() returns an object with some installations of jQuery, use height() instead for positioning.

0.2.0

  • Sort order to determine which order to cycle through (data-help-order attribute on the div)
  • Use 'Next' button instead of × closer

0.1.1

  • The great whitespace cleanup of 2012

0.1.0 MVP

  • Scan the page looking for a selector ('.usher' by default) and cycles through them, displaying the data-help-text for each one when the previous one is closed

License

See LICENSE

Something went wrong with that request. Please try again.