A jQuery plugin that creates a walkthrough guide for use in educating users about stuff on the page.
Concierge is jQuery plugin that creates a walkthrough guide for use in educating users about stuff on the page. It basically just lets you set up a bunch of popovers that fire in order.
It was written in Coffeescript and requires Twitter's Bootsrap Tooltip and Bootstrap Popover plugins, and of course jQuery. The Bootstrap Transition plugin is required if you want animation support.
Concierge works by calling the plugin on a jQuery element that you want to scope actions to, then defining an array of steps.
var guideSteps = [
{
element: $('header h1'), // The Element the popover will be attached to
title: "This is the name of the plugin", // Title of the popover
content: "Isn't it clever?", // Can be text, HTML, or a jQuery object
placement: 'bottom' // positioning of popover: top/bottom/left/right
},
{
element: $('#dependencies'),
title: "What you'll need",
content: "Because I'm lazy.",
placement: 'top'
},
{
element: $('#example-code'),
title: "Example usage",
content: "This is what is being run right now.",
placement: 'top'
},
{
element: $('header ul li:eq(0)'),
title: "Download the zip",
content: "Download it and use it for something. I can't promise it will change your life, though.",
placement: 'bottom'
},
{
element: $('header ul li:eq(1)'),
title: "Download the Tar Ball",
content: "...really?",
placement: 'bottom'
},
{
element: $('header ul li:eq(2)'),
title: "Help me make this better",
content: "Or just look at the code and laugh.",
placement: 'bottom'
}
];
$('.concierge').click(function() {
$('.wrapper').concierge({
steps: guideSteps,
onStep: function(stepIndex, $el) {
},
afterAll: function() {
alert('This is a callback after all the steps are completed. Good job!')
},
nextText: "Next →",
nextClass: "next btn",
nextEvent: "click",
startingStep: 0,
animation: true
});
});