Lightweight Site Feature Tour Plugin – uxTour.js

uxTour.js is a lightweight vanilla JavaScript library which helps you create an interactive feature tour by highlighting the specified element with a circular mask.

How to use it:

Download and load the uxTour.js library when needed.

<script src="uxTour.js"></script>

Initialize the plugin with some optional properties.

var uxTour = new uxTour();

Set the steps for the tour. This is where you forexmaple dynamically empty and add new steps for dynamic page loads.

var tour = {
    steps: [
        {element: 'uxStep1', text: 'Here you can have some related text'},
        {element: 'uxStep2', text: 'You can allways start the ux tour guide again here. This also works on fixed items', style: 'fixed'},
        {element: 'uxStep3', text: 'Includes auto scrolling.<br> Is also responsive. try resize the window!', position: 'top'},
        {element: 'view-source', text: 'This demo page is based on MDL-lite framework.<br> Klik here to see more about this awesome material design framework', style: 'fixed', position: 'top'}
    ]   
};

Start the tour. Pack it into a function for re-opening the ux guide.

uxTour.start(tour);

Full options for steps.

steps: [
  {
    element: 'uxStep1', 
    text: 'Here you can have some related text',
    direction: 'bottom', // or 'top'
    offset: 100,
    position: 'absolute' // or 'fixed'
  },
  ... more steps here ...
]

Possible options to customize the tour.

var tour = {
    // padding in pixels
    padding: 16,
    // opacity of the overlay
    opacity: 0.7,
    // overlay color
    color: '#000000',
    // button text
    buttonText: 'GOT IT',
    // or 'box'
    frame: 'circle'
    
};

Changelog:

12/29/2019

• Options updated