jQuery Plugin For Step By Step Website Introduction - Hemi Intro

Hemi Intro is a simple and fast jQuery plugin that creates an interactive step-by-step guide for your website or web application to let your visitors learn about new features and functions.

How to use it:

1. Load the jQuery Hemi Intro plugin's files after jQuery library.

<link href="src/jquery.hemiIntro-1.0.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="src/jquery.hemiIntro-1.0.js"></script>

2. Load Twitter's Bootstrap framework in your project. The plugin uses Bootstrap's popover and modal components to build the guide steps.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

3. Initialize the plugin and attach the steps to any elements as you want.

$(function () {
  var intro = $.hemiIntro({
    steps: [
      {
        selector: ".SELECTOR-1",
        placement: "bottom",
        content: "Text",
      },
      {
        selector: ".SELECTOR-2",
        placement: "bottom",
        content: "TEXT",
        offsetTop: 100
      },
      {
        selector: ".SELECTOR-3",
        placement: "right",
        content: "TEXT"
      },
    ],
  });

  intro.start();

});

4. Default options & callbacks.

// debug mode
debug: false,

// an array of steps
steps: [],

// start step
startFromStep: 0,

// backdrop
backdrop: {
  element: $("<div>"),
  class: "hemi-intro-backdrop"
},

// custom popover template
popover: {
  template: '<div class="popover hemi-intro-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
},

// custom buttons
buttons: {
  holder: {
    element: $("<div>"),
    class: "hemi-intro-buttons-holder"
  },
  next: {
    element: $("<button>Next</button>"),
    class: "btn btn-primary"
  },
  finish: {
    element: $("<button>Finish</button>"),
    class: "btn btn-primary"
  }
},

// welcome modal on page load
welcomeDialog: {
  show: false,
  selector: null
},

// scroll animation
scroll: {
  anmationSpeed: 500
},

// current step
currentStep: {
  selectedClass: "hemi-intro-selected"
},

// callback functions
init: function (plugin) {},
onLoad: function (plugin) {},
onStart: function (plugin) {},
onBeforeChangeStep: function (plugin, step) {},
onAfterChangeStep: function (plugin, step) {},
onShowModalDialog: function (plugin, modal) {},
onHideModalDialog: function (plugin, modal) {},
onComplete: function (plugin) {}

5. API Methods.

$(function () {
  var intro = $.hemiIntro();

  intro.start();
  intro.next();
  intro.prev();
  intro.finish();
  intro.goToStep(1);
  intro.getCurrentStep();
});

Change log:

2016-08-02

• JS update

2016-01-14

• add new method: getCurrentStep

2015-04-17

• fix scroll bug

---

This awesome jQuery plugin is developed by heminei. For more Advanced Usages, please check the demo page or visit the official website.