Lightweight Site Feature Tour Plugin – uxTour.js

Category: Javascript , Recommended | December 29, 2019
Author:lyngbach
Views Total:1,161 views
Official Page:Go to website
Last Update:December 29, 2019
License:MIT

Preview:

Lightweight Site Feature Tour Plugin – uxTour.js

Description:

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

You Might Be Interested In:


2 thoughts on “Lightweight Site Feature Tour Plugin – uxTour.js

  1. Chris Berberich

    This is a fantastic plugin and ideal if you want a lightweight plugin. Kudos to the developer!

    Reply
  2. Kylian

    Very nice ! However, the autoscrolling function doesn’t seem to work in Chrome…

    Reply

Leave a Reply