JavaScript Library To Help Guiding New Users: Guiders.js

Guiders.js, a JavaScript library developed and used by the popular A/B testing service Optimizely, is recently open sourced and enables us to create flexible guiders.


A guider is a dialog box that guides a user through your application.  This improves the user experience of a web application by visually introducing the user to important features.  Enough text, let’s show you what we mean.

Here are a couple examples:


Image Source:

Guiders can be attached to an element on your web page, or they can be centered on their own.  Attaching a guider to an element on your page is as simple as using the appropriate jQuery selector and a position value 1-12. The position value determines which direction the guider attaches to the element, according to the numbers on an analog clock. below example show guider is attached with a position value of 2.


Image Source:

Custom event handlers can be used to hide and show guiders. This makes interactively showing the user how to use your software by having them complete steps possible.

It requires jQuery and very easy to setup by simply creating the list of guiders, ordering them and attaching the events we want to each.

Requirements: jQuery
Compatibility: All Major Browsers

We hope, We will become the best, creative and inspiring community for web and graphics. Join Us! Can be part of the growing Team. Just write something Creative and Interesting. Click here to become a member.


Comments Closed
Copyright © 2022 Karachi Web, Free Fonts, WordPress Themes, Logos & Tutorials. All Rights Reserved.
Powered by Wordpress.
About Us | Advertise | Write For Us | Contact Us