intro.js Documentation

1. Project Overview & Quickstart (usablica/intro.js) Copy Chapter

File: README.md Copy Chapter

Intro.js

User Onboarding and Product Walkthrough Library

Where to get Copy Chapter

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 Copy Chapter

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:

[](http://google.com/)

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 Copy Chapter

Please visit Documentation.

Using with: Copy Chapter

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

Build Copy Chapter

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 ✨ Copy Chapter

Support/Discussion Copy Chapter

• Stackoverflow

Usage Trends Copy Chapter

• Usage Trends of Product Walkthrough Libraries

License Copy Chapter

Commercial license Copy Section

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 Copy Section

GNU AGPLv3

File: docs/readme.md Copy Chapter

Moved to https://introjs.com/docs (repo: https://github.com/usablica/introjs-website) Copy Chapter

File: example/bootstrap/v3/README.md Copy Chapter

[Start Bootstrap](http://startbootstrap.com/) - [Agency](http://startbootstrap.com/template-overviews/agency/)

Agency is a one page agency portfolio theme for Bootstrap created by Start Bootstrap. This theme features several content sections, a responsive portfolio grid with hover effects, full page portfolio item modals, a responsive timeline, and a working PHP contact form.

Getting Started Copy Chapter

Several options are available to get started quickly:

• Download the latest release on Start Bootstrap
• Clone the repo: git clone https://github.com/BlackrockDigital/startbootstrap-agency.git
• Fork the repo

Developing Using Source Files Copy Chapter

To use the source files, you will need to have npm installed globally along with Gulp.js. To start:

• Run npm install in the root directory
• Run gulp dev and edit the files as needed

If you need to update the plugins included with this template, simply run the following tasks:

• First run npm update to update the dependencies
• Then run gulp copy to copy the new versions to their proper destinations

Bugs and Issues Copy Chapter

Have a bug or an issue with this template? Open a new issue here on GitHub or leave a comment on the template overview page at Start Bootstrap.

Creator Copy Chapter

Start Bootstrap was created by and is maintained by David Miller, Owner of Blackrock Digital.

• https://twitter.com/davidmillerskt
• https://github.com/davidtmiller

Start Bootstrap is based on the Bootstrap framework created by Mark Otto and Jacob Thorton.

Copyright and License Copy Chapter

Copyright 2013-2016 Blackrock Digital LLC. Code released under the MIT license.

File: docs/README.md Copy Chapter

Moved to https://introjs.com/docs (repo: https://github.com/usablica/introjs-website) Copy Chapter

File: docs/Readme.md Copy Chapter

Moved to https://introjs.com/docs (repo: https://github.com/usablica/introjs-website) Copy Chapter

2. Official Technical Reference & Guides (usablica/introjs-website) Copy Chapter

File: README.md Copy Chapter

Intro.js website

Intro.js website, documentation and examples

Installation Copy Chapter

yarn install

Local Development Copy Chapter

yarn start

This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.

Build Copy Chapter

yarn build

This command generates static content into the build directory and can be served using any static contents hosting service.

Deployment Copy Chapter

GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy

File: docs/developers/build.md Copy Chapter

title: Build Copy Chapter

You can build the source code yourself after making any modifications.

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

File: docs/examples/events/confirm-before-exit.md Copy Chapter

title: Confirm before exit
keywords:

• javascript
• tour
• guide

import { LiveExample } from "../../../lib/liveExample.js";
import { DemoWidget } from "../../../lib/demoWidget.js";

Use the onbeforeexit callback to get a confirmation before closing the tour:

<LiveExample children={
introJs().onbeforeexit(function () { return confirm("Are you sure?"); }).start()
} />

File: docs/examples/customizing/css-class.md Copy Chapter

title: CSS ClassName
keywords:

• javascript
• tour
• guide

import { LiveExample } from "../../../lib/liveExample.js";
import { DemoWidget } from "../../../lib/demoWidget.js";

You can customize your product tour using the tooltipClass option:

.customTooltip * {
  color: #4a4a4a;
  font-size: 18px
}

.customTooltip .introjs-tooltip-title {
  color: #0a41c9;
}

<LiveExample children={
introJs().setOptions({ tooltipClass: 'customTooltip' }).start()
} />

File: docs/examples/customizing/disable-interaction.md Copy Chapter

title: Disable element interaction
keywords:

• javascript
• tour
• guide

import { LiveExample } from "../../../lib/liveExample.js";
import { DemoWidget } from "../../../lib/demoWidget.js";

When an element is highlighted, users can interact with the underlying element. For example, if a button is focused, users can still click the button.

To disable this behavior, use the disableInteraction option:

<LiveExample children={
introJs().setOptions({ disableInteraction: true, steps: [{ title: 'Welcome', intro: 'Hello World! 👋' }, { element: document.querySelector('.card-demo'), intro: 'You cannot select the text because "disableInteraction" is enabled' }, { element: document.querySelector('.card-demo-link'), intro: 'This link is not clickable either' }, { title: 'Farewell!', element: document.querySelector('.card__image'), intro: 'And this is our final step!' }] }).start();
} />

File: docs/examples/customizing/html-tooltip.md Copy Chapter

title: HTML in tooltip
keywords:

• javascript
• tour
• guide

import { LiveExample } from "../../../lib/liveExample.js";
import { DemoWidget } from "../../../lib/demoWidget.js";

<LiveExample children={
introJs().setOptions({ steps: [{ title: 'Welcome', intro: 'Hello World! 👋' }, { element: document.querySelector('.card-demo'), intro: 'This **STEP** focuses on an image. We also used some HTML tags!' }, { title: 'Farewell!', element: document.querySelector('.card__image'), intro: '' }] }).start();
} />

File: docs/examples/customizing/progress-bar.md Copy Chapter

title: Progress bar
keywords:

• javascript
• tour
• guide

import { LiveExample } from "../../../lib/liveExample.js";
import { DemoWidget } from "../../../lib/demoWidget.js";

<LiveExample children={
introJs().setOptions({ showProgress: true, }).start()
} />

File: docs/examples/customizing/rtl.md Copy Chapter

title: Right-to-left tour
keywords:

• javascript
• tour
• guide

import { LiveExample } from "../../../lib/liveExample.js";
import { DemoWidget } from "../../../lib/demoWidget.js";

Intro.js supports RTL by default. Simply include introjs-rtl.css and customize buttons:

import * as style from 'intro.js/introjs-rtl.css';

<LiveExample children={
introJs().setOptions({ nextLabel: 'بعد', prevLabel: 'قبل', doneLabel: 'اتمام', steps: [{ intro: '👋 سلام دنیا' }, { element: document.querySelector('.card-demo'), intro: 'یک مرحله دیگه' }, { title: 'بدرود', element: document.querySelector('.card__image'), intro: 'باحال نیست؟' }] }) .start();
} rtl={true} />

File: docs/examples/customizing/without-bullets.md Copy Chapter

title: Tour without bullets
keywords:

• javascript
• tour
• guide

import { LiveExample } from "../../../lib/liveExample.js";
import { DemoWidget } from "../../../lib/demoWidget.js";

Use the showBullets flag to show/hide the bullets in your product tour:

<LiveExample children={
introJs().setOptions({ showBullets: false }).start()
} />

File: docs/examples/customizing/without-buttons.md Copy Chapter

title: Tour without buttons
keywords:

• javascript
• tour
• guide

import { LiveExample } from "../../../lib/liveExample.js";
import { DemoWidget } from "../../../lib/demoWidget.js";

Use the showButtons flag to show/hide all buttons in your product tour:

<LiveExample children={
introJs().setOptions({ showButtons: false }).start()
} />