Submit your widget

Very Useful Product Tour plugin

Created 5 years ago   Views 9315   downloads 2835    Author codyhouse
Very Useful Product Tour plugin
View DemoDownload 0 Byte
Share |

This is a responsive tour snippet, with a step-by-step guide to help users understand how to use your website.

Onboarding processes are essential to let users familiarize with your website/app functionalities as soon as possible. A common user case is the “free trial”: if a user is taking your app for a spin, he’s going to gather as many information as he can in few minutes, before deciding whether your app is worth paying for. You don’t want one of these info to be “how the hell does this work”? The easiest way to improve user experience is to build a simple step-by-step intro tour.

Today we release a handy tour snippet powered by CSS and jQuery, characterized by a user experience that changes according to the device size.

Here is a quick animation that shows the difference between the tour on small devices vs bigger ones:

Creating the structure

The HTML structure is composed by an unordered list: each list item contains a .cd-more-info (step title, brief description and image for mobile version) and a <span>element used to create the dot indicator.

	<button id="cd-tour-trigger">Start tour</button>
	<ul class="cd-tour-wrapper">
		<li class="cd-single-step">
			<span>Step 1</span>
			<div class="cd-more-info bottom">
				<h2>Step Number 1</h2>
				<p><!--  description here  --></p>
				<img src="img/step-1.png" alt="step 1">
		</li> <!-- .cd-single-step -->
		<!-- other steps here -->
	</ul> <!-- .cd-tour-wrapper -->

Read more:

Tag: layout