JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    A better way for new feature introduction and step-by-step users guide for your website and project.
    Filed under 

    • 🔾88%Overall
    • 17,477
    • 4.8 days
    • 🕩2227
    • 👥11

    Intro.js v2.9.3

    Build Status

    Better introductions for websites and features with a step-by-step guide for your projects.

    Where to get

    You can obtain your local copy of Intro.js from:

    1) This github repository, using git clone https://github.com/usablica/intro.js.git

    2) Using bower bower install intro.js --save

    3) Using npm npm install intro.js --save

    4) Download it from CDN (1, 2)

    How to use

    Intro.js can be added to your site in three simple steps:

    1) Include intro.js and introjs.css (or the minified version for production) in your page. Use introjs-rtl.min.css for Right-to-Left language support.

    CDN hosted files are available at jsDelivr (click Show More) & cdnjs.

    2) Add data-intro and data-step to your HTML elements. To add hints you should use data-hint attribute.

    For example:

    <a href='http://google.com/' data-intro='Hello step one!'></a>
    `
    

    See all attributes here.

    3) Call this JavaScript function:

    introJs().start();
    `
    

    Optionally, pass one parameter to introJs function to limit the presentation section.

    For example introJs(".introduction-farm").start(); runs the introduction only for elements with class='introduction-farm'.

    Documentation

    Please visit Documentation.

    Using with:

    Intro.js has many wrappers for different purposes. Please visit Documentation for more info.

    Build

    First you should install nodejs and npm, then first run this command: npm install to install all dependencies.

    Now you can run this command to minify all static resources:

    make build
    

    Instant IntroJs

    Want to learn faster and easier? Here we have Instant IntroJs, Packt Publishing.

    Buy and Download

    Release History

    Authors

    Afshin Mehrabani

    Benjamin J DeLong

    Other contributors

    Contributing

    View contribution guidlines

    Support/Discussion

    License

    Commercial license

    If you want to use Intro.js for a commercial application, theme or plugin the commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase a commercial license at introjs.com

    Open-source license

    GNU AGPLv3

    Show All