Intro JS header small text goes here...

Installation

Intro.js

Step-by-step guide and feature introduction

View Official Website
No dependencies, fast and small

10KB JavaScript and 2.5KB CSS, that's all (minified, gzipped).

User-friendly

Navigate using keyboard or mouse. Easily change the themes for your website.

Browser compatibility

Works on Google Chrome, Mozilla Firefox, Opera, Safari and even Internet Explorer.

<!-- required files -->
<link href="../assets/plugins/intro.js/minified/introjs.min.css" rel="stylesheet" />
<script src="../assets/plugins/intro.js/minified/intro.min.js"></script>

<!-- html -->
<a class="btn btn-lg btn-primary" href="#" onclick="javascript:introJs().start();">Demo</a>

<h1 class="display-4" data-step="1" 
  data-intro="Hello world! I'm Intro.js" 
  data-hint="Hello world! I'm Intro.js" 
  data-hintPosition="top-middle" 
  data-position="bottom-right-aligned">
  Intro.js
</h1>

Examples

Progress bar

Add progress-bar to your step-by-step introduction. It's as easy as adding .setOption('showProgress', true) option to your Intro.js instance.

Demo
<script>
  introJs().setOption('showProgress', true).start()
</script>

Hint

Hints enables you to add additional descriptions to any part of a web page. You can define hints by adding data-hint attribute to the HTML elements.

Demo
<script>
  introJs().addHints();
</script>

Enable/disable options

You can enable or disable options like buttons, progress-bar and bullets by calling the setOption('showBullets', false) function and pass option name.

Demo
<script>
  introJs().setOption('showBullets', false).start();
</script>
App Settings
Header Fixed
Header Inverse
Sidebar Fixed
Gradient Enabled
Admin Design (5)
Language Version (7)
Frontend Design (5)
Documentation Reset Local Storage