- ×
A better way for new feature introduction and step-by-step users guide for your website and project.
Filed under miscellaneousShow AllIntro.js
User Onboarding and Product Walkthrough Library
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 yarn
yarn add intro.js
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
andintrojs.css
(or the minified version for production) in your page. Useintrojs-rtl.min.css
for Right-to-Left language support.CDN hosted files are available at jsDelivr (click Show More) & cdnjs.
2) Add
data-intro
anddata-step
to your HTML elements. To add hints you should usedata-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 withclass='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
andnpm
, then first run this command:npm install
to install all dependencies.Now you can run this command to minify all static resources:
npm run build
Contributors ✨
Afshin Mehrabani
💻 📖
bozdoz
💻 📖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
Version 0.5.0