Shepherdjs-tour

Overview Official Website

Guide your users through a tour of your app.

CSS

<!-- shepherd.js css -->
<link rel="stylesheet" href="{{ URL::asset('build/libs/shepherd.js/css/shepherd.css') }}">

Javascript

<!-- shepherd js -->
<script src="{{ URL::asset('build/libs/shepherd.js/js/shepherd.min.js') }}"></script>

Initjs (Custom js)

<!-- tour init -->
<script src="{{ URL::asset('build/js/pages/tour.init.js') }}"></script

Add Package

npm i shepherd.js --save

Remove Package

npm unistall shepherd.js or you can remove package by removing/clearing specific package from package.json

Examples

Title Javascript

Shepherdjs

Title	Javascript
Shepherdjs	var tour = new Shepherd.Tour({ defaultStepOptions: { cancelIcon: { enabled: true }, classes: 'shadow-md bg-purple-dark', scrollTo: { behavior: 'smooth', block: 'center' } }, useModalOverlay:{ enabled: true }, }); tour.addStep({ title: 'Welcome Back !', text: 'This is Step 1', attachTo: { element: '#logo-tour', on: 'bottom' }, buttons: [ { text: 'Next', classes: 'btn btn-success', action: tour.next } ] }); // end step 1 tour.addStep({ title: 'Register your account', text: 'Get your Free Velzon account now.', attachTo: { element: '#register-tour', on: 'bottom' }, buttons: [ { text: 'Back', classes: 'btn btn-light', action: tour.back }, { text: 'Next', classes: 'btn btn-success', action: tour.next } ] }); // end step 2 tour.addStep({ title: 'Login your account', text: 'Sign in to continue to Velzon.', attachTo: { element: '#login-tour', on: 'bottom' }, buttons: [ { text: 'Back', classes: 'btn btn-light', action: tour.back }, { text: 'Next', classes: 'btn btn-success', action: tour.next } ] }); // end step 3 tour.addStep({ title: 'Get yout Product', text: 'Sign in to continue to Velzon.', attachTo: { element: '#getproduct-tour', on: 'bottom' }, buttons: [ { text: 'Back', classes: 'btn btn-light', action: tour.back }, { text: 'Next', classes: 'btn btn-success', action: tour.next } ] }); // end step 4 tour.addStep({ title: 'Thank you !', text: 'Sign in to continue to Velzon.', attachTo: { element: '#thankyou-tour', on: 'bottom' }, buttons: [ { text: 'Back', classes: 'btn btn-light', action: tour.back }, { text: 'Thank you !', classes: 'btn btn-primary', action: tour.complete } ] }); // end step 5 tour.start();

var tour = new Shepherd.Tour({
    defaultStepOptions: {
        cancelIcon: {
            enabled: true
        },
        
        classes: 'shadow-md bg-purple-dark',
        scrollTo: { behavior: 'smooth', block: 'center' }
    },

    useModalOverlay:{
        enabled: true
    },
});

tour.addStep({
    title: 'Welcome Back !',
    text: 'This is Step 1',
    attachTo: {
        element: '#logo-tour',
        on: 'bottom'
    },
    buttons: [
        {
            text: 'Next',
            classes: 'btn btn-success',
            action: tour.next
        }
    ]
});
// end step 1

tour.addStep({
    title: 'Register your account',
    text: 'Get your Free Velzon account now.',
    attachTo: {
        element: '#register-tour',
        on: 'bottom'
    },
    buttons: [
        {
            text: 'Back',
            classes: 'btn btn-light',
            action: tour.back
        },
        {
            text: 'Next',
            classes: 'btn btn-success',
            action: tour.next
        }
    ]
});
// end step 2

tour.addStep({
    title: 'Login your account',
    text: 'Sign in to continue to Velzon.',
    attachTo: {
        element: '#login-tour',
        on: 'bottom'
    },
    buttons: [
        {
            text: 'Back',
            classes: 'btn btn-light',
            action: tour.back
        },
        {
            text: 'Next',
            classes: 'btn btn-success',
            action: tour.next
        }
    ]
});
// end step 3

tour.addStep({
    title: 'Get yout Product',
    text: 'Sign in to continue to Velzon.',
    attachTo: {
        element: '#getproduct-tour',
        on: 'bottom'
    },
    buttons: [
        {
            text: 'Back',
            classes: 'btn btn-light',
            action: tour.back
        },
        {
            text: 'Next',
            classes: 'btn btn-success',
            action: tour.next
        }
    ]
});
// end step 4

tour.addStep({
    title: 'Thank you !',
    text: 'Sign in to continue to Velzon.',
    attachTo: {
        element: '#thankyou-tour',
        on: 'bottom'
    },
    buttons: [
        {
            text: 'Back',
            classes: 'btn btn-light',
            action: tour.back
        },
        {
            text: 'Thank you !',
            classes: 'btn btn-primary',
            action: tour.complete
        }
    ]
});
// end step 5

tour.start();