Insights of a Full Stack dev: Intro.js

Sunday, 26 October 2014

Here’s how to add an intro to your site:

1) Download intro.js from https://github.com/usablica/intro.js/tags (which also contains lots of example usages)

2) Add the bootstrap-responsive.min.css and introjs.css files to the head of your page (see lines 6 and 7)

3) Add data-step and data-intro attributes to the sections of your page where you want the introduction to display (see lines 11, 12 and 13)

4) Add a button or link which starts the intro (see line 14)

5) Add the intro.js file to the bottom of your page (see line 16)

	<!DOCTYPE html>
	<head>
	<link href="bootstrap.min.css" rel="stylesheet">

	<!-- Add IntroJs styles -->
	<link href="bootstrap-responsive.min.css" rel="stylesheet">
	<link href="introjs.css" rel="stylesheet">
	<!-- end IntroJs styles -->
	</head>
	<body>
	<h1 data-step="1" data-intro="Welcome to my demo, this is the title of my page">Demo for intro.js</h1>
	<p data-step="2" data-intro="Here is some more text">This page shows how easy it is to add intro.js</p>
	<p data-step="3" data-intro="I've also included an extra UX tip for devs">You can use cookies to detect if the user is new to your page</p>
	<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Start intro</a>
	</body>
	<script type="text/javascript" src="intro.js"></script>
	</html>

view raw DemoForIntroJs hosted with ❤ by GitHub

Here is an example runs the intro only the first time a user visits your page

	<!DOCTYPE html>
	<head>
	<link href="bootstrap.min.css" rel="stylesheet">
	<!-- Add IntroJs styles -->
	<link href="bootstrap-responsive.min.css" rel="stylesheet">
	<link href="introjs.css" rel="stylesheet">
	<!-- end IntroJs styles -->
	</head>
	<body onload="checkCookieIntro()">
	<h1 data-step="1" data-intro="Welcome to my demo, this is the title of my page">Demo for intro.js</h1>
	<p data-step="2" data-intro="Here is some more text">This page shows how easy it is to add intro.js</p>
	<p data-step="3" data-intro="I've also included an extra UX tip for devs">You can use cookies to detect if the user is new to your page</p>
	</body>
	<script type="text/javascript" src="intro.js"></script>
	<script type="text/javascript">

	function getCookie(cname) {
	var name = cname + "=";
	var ca = document.cookie.split(';');
	for(var i=0; i<ca.length; i++) {
	var c = ca[i];
	while (c.charAt(0)==' ') c = c.substring(1);
	if (c.indexOf(name) != -1) return c.substring(name.length,c.length);
	}
	return "";
	}

	function setCookie(cname, cvalue, exdays) {
	var d = new Date();
	d.setTime(d.getTime() + (exdays2460601000));
	var expires = "expires="+d.toUTCString();
	document.cookie = cname + "=" + cvalue + "; " + expires;
	}

	function checkCookieIntro(){
	var cookie=getCookie("introExampleCookie");

	if (cookie==null \|\| cookie=="") {
	setCookie("introExampleCookie", "1",90);
	introJs().start();
	}
	}
	</script>
	</html>

view raw intro-with-cookie hosted with ❤ by GitHub

Insights of a Full Stack dev