javascript: The Best Guided Tour Plugin

// author: 
//from https://yonkov.github.io/post/display-shepherd-only-once/

const tour = new Shepherd.Tour({
    defaultStepOptions: {
        scrollTo: true,
        cancelIcon: {
            enabled: true,
        },
        useModalOverlay: true,
    }
});

//Construct the steps
const steps = [{
        title: 'My Awesome Tour Guide : Step One',
        text: 'This step is attached to the bottom of the <code>header</code> element.',
        buttons: [{
            text: 'Next',
            action: tour.next
        }],
    },

    {
        title: 'My Awesome Tour Guide : Step Two',
        text: 'This step is attached to the bottom of the <code>.entry-content</code> element. If no such element is found, the step appears in the center of the screen.',
        buttons: [{
                text: 'Back',
                action: tour.back
            },
            {
                text: 'Finish',
                classes: 'shepherd-button-close',
                action() {
                    // Dismiss the tour when the finish button is clicked
                    dismissTour();
                    return this.hide();
                }
            }
        ]
    },

]

tour.addSteps(steps);

function dismissTour() {
    if (!localStorage.getItem('shepherd-tour')) {
        localStorage.setItem('shepherd-tour', 'yes');
    }
}

// Dismiss the tour when the cancel icon is clicked. Do not show the tour on next page reload
tour.on('cancel', dismissTour);

// Initiate the tour
if (!localStorage.getItem('shepherd-tour')) {
    tour.start();
}