Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
**Optimizely is hiring software engineers in SF** Guiders-JS: A Javascript library for guiders. Requires jQuery.
JavaScript
branch: master

This branch is 111 commits behind jeff-optimizely:master

Support jQuery with noConflict()

Don't assume the global $ exists and it's jQuery – pass jQuery as an argument and use $ internally only.
latest commit e99f252cd7
@nb authored
Failed to load latest commit information.
README.html
README.md
clock.gif
guider.css Use Star hack to display guider arrows PNG for IE6/7
guider.js Support jQuery with noConflict()
guider_arrows.png Use Star hack to display guider arrows PNG for IE6/7
jquery-1.5.1.min.js
promo_gmail.png

README.md

Guider.js

Guiders are a user experience design pattern for introducing users to a web application. Check out README.html for guiders in action!

Setup

Here is sample code for initializing a couple of guiders. Guiders are hidden when created, unless .show() is method chained immediately after .createGuider.

guider.createGuider({
  buttons: [{name: "Next"}],
  description: "Guiders are a user interface design pattern for introducing features of software. This dialog box, for example, is the first in a series of guiders that together make up a guide.",
  id: "first",
  next: "second",
  overlay: true,
  title: "Welcome to Guiders.js!"
}).show();
/* .show() means that this guider will get shown immediately after creation. */

guider.createGuider({
  attachTo: "#clock",
  buttons: [{name: "Close, then click on the clock.", onclick: guider.hideAll}],
  description: "Custom event handlers can be used to hide and show guiders. This allows you to interactively show the user how to use your software by having them complete steps. To try it, click on the clock.",
  id: "third",
  next: "fourth",
  position: 2,
  title: "You can also advance guiders from custom event handlers.",
  width: 450
});

The parameters for creating guiders are:

attachTo: (optional) selector of the html element you want to attach the guider to
buttons: array of button objects
  {
    name: "Close",
    classString: "primary-button",
    onclick: callback function for when the button is clicked
      (if name is "close" or "next", onclick defaults to guider.hideAll and guider.next respectively)
   }
buttonCustomHTML: (optional) custom HTML that gets appended to the buttons div
description: text description that shows up inside the guider
overlay: (optional) if true, an overlay will pop up between the guider and the rest of the page
position: (optional / required if using attachTo) clock position at which the guider should be attached to the html element
title: title of the guider
width: (optional) custom width of the guider (it defaults to 400px)

Integration

Besides creating guiders, here is sample code you can use in your application to work with guiders:

guider.hideAll(); // hides all guiders
guider.next(); // hides the last shown guider, if shown, and advances to the next guider
guider.show(id); // shows the guider, given the id used at creation

You'll likely want to change the default values, such as the width (set to 400px). These can be found at the top of guider.js in the _defaultSettings object. You'll also want to modify the css file to match your application's branding.

In Closing

Guiders are a great way to improve the user experience of your web application. If you're interested in optimizing user experience through A/B testing, check out Optimizely. We're the people who built Guiders in the first place.

If you have questions about Guiders or Optimizely, email us at jeff+pickhardt@optimizely.com or hello@optimizely.com.

License

Released under the Apache License 2.0.

Something went wrong with that request. Please try again.