[Summary view] [Print] [Text view]

   1  Guiders.js (version 1.2.6)
   2  ==========================
   3  
   4  Guiders are a user experience design pattern for introducing users to a web application.  
   5  
   6  Live Examples
   7  -------------
   8  
   9  Here are a couple examples hosted online.  You can also check out `README.html` for guiders in action!
  10  
  11  [http://jeffpickhardt.com/guiders/](http://jeffpickhardt.com/guiders/)
  12  
  13  [https://optimizely.appspot.com/edit#url=www.google.com](https://optimizely.appspot.com/edit#url=www.google.com)
  14  
  15  
  16  Setup
  17  -----
  18  
  19  Here is sample code for initializing a couple of guiders.  Guiders are hidden when created, unless `.show()` is method chained immediately after `.createGuider`.
  20  
  21  ~~~ javascript
  22  guiders.createGuider({
  23    buttons: [{name: "Next"}],
  24    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.",
  25    id: "first",
  26    next: "second",
  27    overlay: true,
  28    title: "Welcome to Guiders.js!"
  29  }).show();
  30  /* .show() means that this guider will get shown immediately after creation. */
  31  
  32  guiders.createGuider({
  33    attachTo: "#clock",
  34    buttons: [{name: "Close, then click on the clock.", onclick: guiders.hideAll}],
  35    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.",
  36    id: "third",
  37    next: "fourth",
  38    position: 2,
  39    title: "You can also advance guiders from custom event handlers.",
  40    width: 450
  41  });
  42  ~~~~
  43  
  44  The parameters for creating guiders are:
  45  
  46  ~~~
  47  attachTo: (optional) selector of the html element you want to attach the guider to
  48  autoFocus: (optional) if you want the browser to scroll to the position of the guider, set this to true
  49  buttons: array of button objects
  50    {
  51      name: "Close",
  52      classString: "primary-button",
  53      onclick: callback function for when the button is clicked
  54        (if name is "close" or "next", onclick defaults to guiders.hideAll and guiders.next respectively)
  55     }
  56  buttonCustomHTML: (optional) custom HTML that gets appended to the buttons div
  57  classString: (optional) custom class name that the guider should additionally have
  58  description: text description that shows up inside the guider
  59  highlight: (optional) selector of the html element you want to highlight (will cause element to be above the overlay)
  60  offset: fine tune the position of the guider, e.g. { left:0, top: -10 }
  61  onShow: (optional) additional function to call before the guider is shown
  62  onHide: (optional) additional function to call when the guider is hidden
  63  overlay: (optional) if true, an overlay will pop up between the guider and the rest of the page
  64  position: (optional / required if using attachTo) clock position at which the guider should be attached to the html element. Can also use a description keyword (such as "topLeft" for 11 or "bottom" for 6)
  65  title: title of the guider
  66  width: (optional) custom width of the guider (it defaults to 400px)
  67  xButton: (optional) if true, a X will appear in the top right corner of the guider, as another way to close the guider
  68  ~~~
  69  
  70  
  71  Integration
  72  -----------
  73  
  74  Besides creating guiders, here is sample code you can use in your application to work with guiders:
  75  
  76  ~~~ javascript
  77  guiders.hideAll(); // hides all guiders
  78  guiders.next(); // hides the last shown guider, if shown, and advances to the next guider
  79  guiders.show(id); // shows the guider, given the id used at creation
  80  ~~~
  81  
  82  You'll likely want to change the default values, such as the width (set to 400px).  These can be found at the top of `guiders.js` in the `_defaultSettings` object.  You'll also want to modify the css file to match your application's branding.
  83  
  84  Lastly, if the URL of the current window is of the form `http://www.myurl.com/mypage.html#guider=foo`, then the guider with id equal to `foo` will be shown automatically.
  85  
  86  
  87  In Closing
  88  ----------
  89  
  90  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](http://www.optimizely.com).  We're the people who built Guiders in the first place.
  91  
  92  If you have questions about Guiders, you can email me (Jeff Pickhardt) at `[email protected]`.  Optimizely inquiries should be directed to `[email protected]` or `[email protected]`.
  93  
  94  
  95  License
  96  -------
  97  
  98  Released under the [Apache License 2.0](http://www.apache.org/licenses/LICENSE-2.0.html).