Shepherd — Guide your users through a tour of your app.

Guide your users through a tour of your app.

Demo

01. How to Include


	<link rel="stylesheet" href="shepherd.js/dist/css/shepherd.css"/>
	<script type="module" src="shepherd.js/dist/shepherd.mjs"></script>
  

02. Example


	const tour = new Shepherd.Tour({
		defaultStepOptions: {
			cancelIcon: {
				enabled: true
			},
			classes: 'class-1 class-2',
			scrollTo: { behavior: 'smooth', block: 'center' }
		}
	});

	tour.addStep({
		title: 'Creating a Shepherd Tour',
		text: 'Creating a Shepherd tour is easy. too! Just create a "Tour" instance, and add as many steps as you want.',
		attachTo: {
			element: '.hero-example',
			on: 'bottom'
		},
		buttons: [
			{
				action() {
					return this.back();
				},
				classes: 'shepherd-button-secondary',
				text: 'Back'
			},
			{
				action() {
					return this.next();
				},
				text: 'Next'
			}
		],
		id: 'creating'
	});

	tour.start();
					

Brands that use Shepherd