Website Walkthrough Intro Tour Bubbles

Guide your visitors through your website with this lightweight JavaScript-jQuery solution. Improve the user experience by presenting the features of the site in a quick interactive step by step bubble tour.

Check out the live demo here.

I have presented many simple website widgets I have implemented for various websites. For example the website search box and many others. In this article I’m going to present a great alternative for bootstraptour.com and introjs.com. I didn’t like those and I wanted to have my own solution that’s much more simple.

Impementation

1. Target the sections in your HTML

Add the necessary data-attributes and the walkthrough class to the wrappers of your sections.

<div class="walkthrough" data-wttext="Your message!" data-wtpos="bottom" data-wtnext="Next" data-wtnr="1">
	A section on your website
</div>

data-wttext – The text in the bubble
data-wtnext – Next button text.
data-wtpos – Set the position of the popup. Implement new ones and adjust them in CSS. By default it puts them in the top right corner.
data-wtnr – Order the popups starting from 1. Make sure you don’t miss one.

2. Add the JavaScript code

Make sure your site is using jQuery, otherwise you need to add it. The script below makes our intro work.

Make adjustments if you wish. Set the wtshow variable to 0 if you don’t wish to auto start the interactive intro. In this case you can trigger it with this script: wtshow = 1;showWT(); which can be added as an onclick event to a button, just like in our demo.

/*Walkthrough JS BEGIN*/
var wtshow = 1;	// set to 0 to disable auto start
var wtslides = 0;
$(document).ready(function(){	
	var wt;
	$(".walkthrough").each(function() {
		wt = '<div class="wtSlide wtSlidePos' + $(this).attr("data-wtpos") + '" id="wtSlide' + $(this).attr("data-wtnr") + '"><div>' + $(this).attr("data-wttext") + "</div><span class='wtNext'>" + $(this).attr("data-wtnext") + "</span><span class='wtClose'>&times;</span></div>";
		$(this).append(wt);
		$(this).addClass('wtsection' + $(this).attr("data-wtnr"));
		wtslides++;		
	});	
	 setTimeout(function () {
		showWT();	// show the first slide
	 }, 1000);	
    $(".wtNext").click(function(){
        wtshow++;
		showWT();
    });
    $(".wtClose").click(function(){
        wtshow = 0;
		$(".wtSlide").fadeOut(222);
		$(".wtactive").removeClass("wtactive");
    });
});
function showWT() {
	$(".wtSlide").fadeOut(222);
	$(".walkthrough").removeClass("wtactive");
	if (wtshow <= wtslides) {
		$("#wtSlide" + wtshow).fadeIn(222);
		$(".wtsection" + wtshow).addClass("wtactive");
		$("html, body").animate({ scrollTop: $("#wtSlide" + wtshow).offset().top - 200 }, 500);
	}
}
/*Walkthrough JS BEGIN*/

3. Style your widget

Use the CSS below to style your speech bubbles and adjust it to blend into your site. Add new popup positions.

/*Walkthrough JS BEGIN*/
.walkthrough {
    position: relative;
}
.walkthrough.wtactive {
    outline: 4px dashed #b32d2d;
}
.wtSlide {
    position: absolute;
    background: #ece0e0;
    border: 2px solid #b32d2d;
    color: #333;
	font-size: 16px;
    padding: 10px;
    box-shadow: 5px 4px 5px #555;
    top: -70px;
    border-radius: 20px 20px 20px 1px;
    right: -70px;
    font-weight: bold;
	display: none;
}
.wtNext {
    cursor: pointer;
    display: inline-block;
    padding: 2px 10px;
    font-size: 1.2em;
    border: 1px solid #777;
    background: #FFF;
    border-radius: 5px;
    margin: 5px 0 0 0;
}
.wtNext:hover {
	border: 1px solid #000;
	box-shadow: 2px 2px 5px #000;
}
.wtClose {
    background: #b32d2d;
    color: #FFF;
    position: absolute;
    display: inline-block;
    top: -21px;
    right: -20px;
    font-size: 30px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 20px;
}
.wtClose:hover {
	background: #841c1c;
}
.wtSlide.wtSlidePosbottom {
    bottom: auto;
    top: 40px;
    border-radius: 0px 20px 20px 20px;
    left: 10px;
    right: auto;
}
.wtSlide.wtSlidePosin {
    top: 0px;
    border-radius: 0px 0px 16px 0px;
    left: 0;
    right: auto;
}
/*Walkthrough JS END*/