Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/usablica/intro.js
Lightweight, user-friendly onboarding tour library
https://github.com/usablica/intro.js
cdn guide html introjs javascript minify tour ux
Last synced: about 2 months ago
JSON representation
Lightweight, user-friendly onboarding tour library
- Host: GitHub
- URL: https://github.com/usablica/intro.js
- Owner: usablica
- License: other
- Created: 2013-03-10T15:12:45.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2024-07-28T20:57:38.000Z (about 2 months ago)
- Last Synced: 2024-07-29T21:57:16.953Z (about 2 months ago)
- Topics: cdn, guide, html, introjs, javascript, minify, tour, ux
- Language: TypeScript
- Homepage: http://introjs.com
- Size: 48.1 MB
- Stars: 22,693
- Watchers: 452
- Forks: 2,586
- Open Issues: 82
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: license.md
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome - usablica/intro.js - Lightweight, user-friendly onboarding tour library (TypeScript)
- awesome-github-repos - usablica/intro.js - Lightweight, user-friendly onboarding tour library (TypeScript)
- awesome-javascript-cn - 官网
- awesome - usablica/intro.js - friendly onboarding tour library (JavaScript / UI Widget)
- awesome-javascript - intro.js - A better way for new feature introduction and step-by-step users guide for your website and project. - ★ 17345 (Tours And Guides)
- awesome-star-libs - usablica / intro.js
- awesome - usablica/intro.js - Lightweight, user-friendly onboarding tour library (TypeScript)
- awesome-starred - usablica/intro.js - Lightweight, user-friendly onboarding tour library (javascript)
- StarryDivineSky - usablica/intro.js
- jimsghstars - usablica/intro.js - Lightweight, user-friendly onboarding tour library (TypeScript)
README
# Intro.js
[](https://travis-ci.org/usablica/intro.js)
[](https://www.jsdelivr.com/package/npm/intro.js)
[](https://www.jsdelivr.com/package/npm/intro.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](http://www.jsdelivr.com/projects/intro.js), [2](https://cdnjs.com/libraries/intro.js))
## 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](http://www.jsdelivr.com/projects/intro.js) (click Show More) & [cdnjs](https://cdnjs.com/libraries/intro.js).
**2)** Add `data-intro` and `data-step` to your HTML elements. To add hints you should use `data-hint` attribute.
For example:
See all attributes [here](https://introjs.com/docs/intro/attributes/).
**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](http://introjs.com/docs).
## Using with:
Intro.js has many wrappers for different purposes. Please visit [Documentation](http://introjs.com/docs) 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 ✨
## Support/Discussion
- [Stackoverflow](http://stackoverflow.com/questions/tagged/intro.js)
## Usage Trends
- [Usage Trends of Product Walkthrough Libraries](https://npm-compare.com/intro.js,@reactour/tour,driver.js,vue-tour)
## 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](http://introjs.com/#commercial)
### Open-source license
GNU AGPLv3
