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

1. Intro.js
Better introductions for websites and features with a step-by-step
guide for your projects.
Copyright (C) 2012 Afshin Mehrabani
(afshin.meh@gmail.com)
© usabli.ca 2013 - A weekend project by Afshin Mehrabani
Provider -> omidkh68@gmail.com
4-Feb-14

2. Features
Easy to Use
Just include the js and css files and add data-step and data-intro to your code.
Fast & Small
4 KB JavaScript and 2.5 KB CSS (gzip). That's all.
Keyboard + Mouse navigation
Ability to navigate with the mouse, or the keyboard - ←, →, ENTER and ESC to exit.
Browser Compatibllity
Better compatibility is on the roadmap, but currently it should work in recent versions
of Firefox, Chrome and IE8 also.
Free & Open-Source
Free and open-source (including commercial use). Published under MIT license.
PROVIDER -> OMIDKH68@GMAIL.COM
2

3. Where to get
1) This github repository, using :
git clone https://github.com/usablica/intro.js.git
2) Using bower :
bower install intro.js --save
3) Download it from CDN (Content Delivery Network)
• http://www.jsdelivr.com/#!intro.js
• http://cdnjs.com/#introjs
PROVIDER -> OMIDKH68@GMAIL.COM
3

4. 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
to-Left language support.
2) Add data-intro
For Example :
and
data-step
introjs-rtl.min.css
for Right-
to your HTML elements.
<a href='http://google.com/' data-intro='Hello step one!'></a>
3) Call this JavaScript function:
introJs().start();
PROVIDER -> OMIDKH68@GMAIL.COM
4

5. API (Popular)
introJs.start()
Start the introduction for defined element(s).
introJs().start();
introJs.goToStep(step)
Go to specific step of introduction.
introJs.goToStep(2).start(); // start introduction from step 2
introJs.exit()
Exit the introduction.
introJs().exit();
introJs.oncomplete(providedCallback)
Set callback for when introduction completed.
introJs().oncomplete(function(){
alert(“ end of introduction ”);
});
PROVIDER -> OMIDKH68@GMAIL.COM
5

6. How to use Attributes And Options
introJs.setOption(option, value)
Parameters:
option : String Option key name.
value : String/Number Value of the option.
Returns:
introJs object.
Example:
introJs().setOption("skipLabel", "Exit");
Set a group of options :
introJs().setOption({"skipLabel":"Exit", “tooltipPosition":“right"});
PROVIDER -> OMIDKH68@GMAIL.COM
6

7. Attributes
Attributes :
•
data-intro
: The tooltip text of step
•
data-step
: Optionally define the number (priority) of step
•
data-tooltipClass
•
data-position
: Optionally define a CSS class for tooltip
: Optionally define the position of tooltip,
PROVIDER -> OMIDKH68@GMAIL.COM
top
,
left
,
right
or
bottom
. Default is
bottom
7

8. Options
•
steps
•
nextLabel
: Next button label
•
prevLabel
: Previous button label
•
skipLabel
: Skip button label
•
doneLabel
•
tooltipPosition
•
tooltipClass
•
exitOnEsc
•
showStepNumbers
•
keyboardNavigation
•
showButtons
•
showBullets
: For defining steps using JSON configuration
: Done button label
: Default tooltip position
: Adding CSS class to all tooltips
: Exit introduction when pressing Escape button,
true
: Show steps number in the red circle or not,
: Navigating with keyboard or not,
true
or
: Show introduction navigation buttons or not,
: Show introduction bullets or not,
PROVIDER -> OMIDKH68@GMAIL.COM
true
or
or
true
false
or
false
false
true
or
false
false
8

9. Using with
Rails
If you are using the rails asset pipeline you can use the introjs-rails gem.
Yii framework
You can simply use this project for Yii framework: https://github.com/moein7tl/Yii-IntroJS
Drupal
Here you can find an IntroJs integration for Drupal: https://drupal.org/sandbox/alexanderfb/2061829
AngularJS
For AngularJS, you can use the directives in angular-intro.js.
PROVIDER -> OMIDKH68@GMAIL.COM
9

10. Demo
PROVIDER -> OMIDKH68@GMAIL.COM
10

11. RTL Support
PROVIDER -> OMIDKH68@GMAIL.COM
11

12. Resources
http://usablica.github.io/intro.js/
Get Instant IntroJs Book On :
• Packtpub
• Amazon
• Barnes and noble
• Safari Books Online
• O Reilly
PROVIDER -> OMIDKH68@GMAIL.COM
12

13. End
Question ?
PROVIDER -> OMIDKH68@GMAIL.COM
13