jQuery Plugin To Create Guided Website Feature Tours - PageIntro.js

PageIntro.js is a lightweight jQuery plugin for highlighting DOM elements and creating step-by-step interactive tours to introduce new features and recommended content on your web app.

How to use it:

1. Load the stylesheet pageintro.css to style the guided tours.

<link href="dist/pageintro.css" rel="stylesheet">

2. Create the DOM elements you want to highlight.

<h1 id="step1">This is step 1</h1>
<p id="step2">This is step 2</p>
<p id="step3">This is step 3</p>

3. Load jQuery library and the jQuery PageIntro.js script at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/pageintro.js"></script>

4. Add custom website tours in the JavaScript as these.

var options = {
    container: 'body',
    spacing: 20,
    actions: {
      next: {
        text: 'Next step',
        class: 'btn btn-default'
      },
      finish: {
        text: 'OK! I know',
        class: 'btn btn-success'
      }
    },
    entries: [
      {
        selector: '#step1',
        text: 'You know, this is title'
      }, {
        selector: '#step2',
        text: 'This is description'
      }, {
        selector: '#step3',
        text: 'This is example text',
        onEnter: function () {
          $('#step3').text('Good job!');
        },
        onExit: function () {
          $('#step3').text('This example text is changed!');
        }
      }
    ]
};

5. Initialize the plugin and start the tour on page load.

PageIntro.init(options);
PageIntro.start();

---

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