intro.js

Lightweight, user-friendly onboarding tour library

23,480 stars TypeScript Markdown Skills API Spec #cdn#guide#html#introjs
AI Prompts & Specs

Repository: usablica/intro.js


Stars: 23612

README.md

Intro.js

![Build Status](https://travis-ci.org/usablica/intro.js)
![](https://www.jsdelivr.com/package/npm/intro.js)
![npm](https://www.jsdelivr.com/package/npm/intro.js)

User Onboarding and Product Walkthrough Library

<p align="center">
<a href="https://introjs.com">
<img src="https://raw.githubusercontent.com/usablica/intro.js/gh-pages/img/introjs-demo.png">
</a>
</p>

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

text
2) Using yarn
yarn add intro.js
text
3) Using npm
npm install intro.js --save
text
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:
html
<a href='http://google.com/' data-intro='Hello step one!'></a>
text
See all attributes here.
3) Call this JavaScript function:
javascript
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:

npm run build

Contributors ✨

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
<tr>
<td align="center"><a href="http://afshinm.name"><img src="https://avatars3.githubusercontent.com/u/314326?v=4" width="100px;" alt=""/><br /><sub><b>Afshin Mehrabani</b></sub></a><br /><a href="https://github.com/usablica/intro.js/commits?author=afshinm" title="Code">💻</a> <a href="https://github.com/usablica/intro.js/commits?author=afshinm" title="Documentation">📖</a></td>
<td align="center"><a href="https://bozdoz.com"><img src="https://avatars0.githubusercontent.com/u/1410985?v=4" width="100px;" alt=""/><br /><sub><b>bozdoz</b></sub></a><br /><a href="https://github.com/usablica/intro.js/commits?author=bozdoz" title="Code">💻</a> <a href="https://github.com/usablica/intro.js/commits?author=bozdoz" title="Documentation">📖</a></td>
</tr>
</table>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

Support/Discussion


- Stackoverflow


- Usage Trends of Product Walkthrough Libraries

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