javascript tour plugin

jQuery Script - Free jQuery Plugins and Tutorials

10 best tour plugins to guide visitors through your app (2024 update), what is guided tour plugin:.

A Tour plugin allows you to quickly create an interactive, dynamic, step-by-step guided tour for specific elements within the document.

It is a commonly used UI component that provides an interactive, user-friendly interface to introduce tutorials, new features or featured content on the web applications.

The Best Guided Tour Plugin:

In this post, You will find a list of 10 best jQuery and Vanilla JavaScript tour plugins to help guide your visitor around your website or web application. Have fun with it and don't forget to spread the world.

Originally Published Jan 16 2018, up date d Feb 17 2024

Best jQuery Tour Plugins:

Guided website tour with directional arrows - jquery guides.

An easy-to-use jQuery plugin that adds an intuitive, interactive, dynamic guided tour to your website.

[ Demo ] [ Download ]

Interactive Tooltip-style Guided Tour Plugin - jQuery TourJS

A jQuery-dependent tour library that helps you create customizable, interactive, tooltip-style, step-by-step tours to guide your users through your web application.

Interactive Visual Guide Plugin For Bootstrap - jQuery Tour

A Bootstrap plugin to create an accessible, interactive visual guide that lets your users guide through / scroll between new features and functions in your web app.

jQuery Feature Tours Plugin - Joyride

Joyride is a cool and mobile-friendly jQuery plugin for easily and quickly creating feature tours for your website or web application using small tooltips.

Guide Your Users Around The Web Application - jQuery Tour.js

A jQuery plugin that provides your users a configurable, navigatable, step-by-step, guided tour around your web application. The plugin has the ability to highlight a given element with a fullscreen overlay to introduce the new features or functions on the webpage.

Best Vanilla JavaScript Tour Plugins

Simple step by step site tour plugin.

Intro.js is a simple and fast js library that makes it easier to create Step By Step website tour guide with keyboard and mouse support.

Responsive Guided App Tour In JavaScript – shepherd

shepherd is a JavaScript library that creates an interactive, accessible, dynamic visual guide to let your users learn about new features and functions on your web app.

Create Interactive Guided Tours In App – TourGuide.js

A customizable, framework-agnostic, and feature-rich guided tour/onboarding library written in JavaScript (TypeScript).

Easy Guided Tour Plugin For Bootstrap 5 - bs5-intro-tour

An easy-to-use guided tour plugin for Bootstrap 5 that guides your visitors through a tour of your app.

Feature-rich Step-by-Step User Guide In JavaScript – webtour.js

A feature-rich, user-friendly, fully responsive guided tour JavaScript library for the web.

More Resources:

Want more jQuery plugins or JavaScript libraries to create awesome Guided Tours on the web & mobile? Check out the jQuery Tour and JavaScript Tour sections.

Prev: 10 Best Form Builder Plugins To Generate Forms From JSON Data
Next: 10 Best Snackbar Plugins In jQuery And Pure JavaScript (2023 Update)

10 Best Image Croppers In jQuery And Vanilla JavaScript (2024 Update)

10 Best Toggle Button Plugins In JavaScript & CSS

10 Best Responsive Menu Systems In jQuery/JavaScript/CSS (2024 Update)

10 Best Gauge Plugins In jQuery And Pure JavaScript/CSS (2024 Update)

10 Best Material Ripple Click/Tap Effects In JavaScript/CSS (2023 Update)

10 Best Timeline Components In jQuery And Pure JS/CSS (2024 Update)

Add Your Review

7 Awesome JavaScript Product Tour Libraries

Top javascript tour libraries that will help you guide users through using your app..

Shanika Wickramasinghe

Bits and Pieces

Tour and guide libraries are there to help you guide your users through using your app. They do so by adding extra information to your UI, by providing tips or text (usually obtained from the server in JSON format), and by adding step-by-step instructions regarding the UI and/or functionalities of your web app. This post will cover my seven personal favorite libraries.

Build a Clear UI (Before Using Guide Libraries)

“A user interface is like a joke. If you have to explain it, it’s not that good”. — Martin Leblanc

As you well know, nothing beats a self-explanatory UI. Instructions of any type should only be used after you’ve done your best in delivering a clear UI and a great UX. One key step in achieving that is building a design system .

Design systems or UI libraries are a way to reuse and standardize UI components (among other things). They’re a great way to maintain consistency in style and function, making your app more predictable and much easier to learn (less variance in UI means fewer things need to be learned).

Design systems are no longer a luxury enjoyed exclusively by large enterprises. Thanks to new cloud solutions like Bit.dev , design systems or UI libraries can grow and expand as you build your app. You can simply push individual UI components from any codebase/repository to a shared component hub where you and your team may discover, test, use and collaborate on them. Bit supports React, React with TS, Angular, VueJS and many others.

Building a UI Component Library for Your Startup

How to build a component library that suits your startup’s needs..

blog.bitsrc.io

1. Intro.js

Intro.js is widely used due to its user-friendly solutions and has 19k GitHub stars. Its most important features are:

No dependencies: It does not require any other dependencies
Small and fast: The library’s smaller size makes the guiding process smooth and intuitive. The overall size of JavaScript files is 10KB, and CSS is 2.5KB.
User-Friendly: Navigation is user-friendly and provides various themes that can be selected as per your preference.
Browser Compatibility: Works on all major browsers like Google Chrome, Mozilla Firefox, Opera, Safari, and Internet Explorer.
Documentation: The documentation is excellent with samples and examples of each element to be introduced.

Intro.js is a free and open-source library, however, if you are using the library for your business you can subscribe…

introjs.com

How to Install

To use Intro.js, you need to have npm and Node.js installed. Alternately, you can get Intro.js from:

Its GitHub repository: use, git clone https://github.com/usablica/intro.js.git
using bower:
CDNs ( jsdeliver.com , cdnjs.com )

Once you have installed intro.js, there are three simple steps to add it to your project:

Add the JS and CSS files (intro.js and introjs.css) into your project. If you require right to left language support, you can also add introjs-rtl.min.css.
Add the attributes data-intro and data-step to the relevant HTML elements. This will enable intro.js for the particular elements.
Call the following JavaScript function:

Use the following additional parameter to call Intro.js on a particular element or class.

Here is an example page where the user-friendly Intro.js is seen working.

See the Users

Intro.js is used by many organizations like SAP, Amazon, Nestle, and Kobo.

2. Shepherd

Shepherd has 8.1k GitHub stars , and its website demonstrates how it works. Here are its main features:

Accessibility: Provides keyboard navigation support, follows a11y compliance, and also uses JavaScript to enable focus trapping inside DOM elements.
Highly Customizable: Allows changing the look and feel without affecting performance.
Framework Ready: Readily ingrates into your project’s front-end framework.
Documentation: Documentation covers installations and customizations including theming, and styling for your projects.

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

Guide your users through a tour of your app..

Guide your users through a tour of your app.shepherdjs.dev

Shepherd is integrated with many major front-end frameworks and provides the following wrapper facilitates out of the box:

Angular: angular-shepherd is an Angular wrapper, compatible with Angular 8+.
Ember: ember-shepherd is an ember wrapper, tested with Ember.js >= v3.8, and is compatible with Ember CLI v12.3.
React: react-shepherd is a React wrapper.
Vue: vue-shepherd is a Vue wrapper.

You can directly install these wrappers using npm or yarn:

It can also be pulled directly via JsDeliver from the CDN:

Once you have installed Shepherd, you can include the CSS and JS files as follows:

Here is an example of creating a Shepherd tour and adding steps with DOM elements attached to it.

Shephard is used by companies like SimplePlanner and Brokermate to guide their users through the initial steps of their applications.

3. Bootstrap Tour

Twitter Bootstrap provides its own free tour implementation with Bootstrap Tour. It has 4,315 GitHub stars.

Bootstrap popovers are quick and easy to build. This is a jQuery-based plugin for bootstrap and uses the power of DOM and JavaScript configuration to build the tour. It’s as simple as including the JS and CSS files and provides in-depth documentation.

Bootstrap Tour

If you are using bootstrap, include bootstrap-tour.min.css and bootstrap-tour.min.js: otherwise, just include….

bootstraptour.com

You can simply use the CSS and JS files of bootstrap:

Or use standalone CSS or JavaScript files:

You can even pull the JS and CSS files from CDN.

After the initial setup, you can create an instance of the tour and add steps with the element details as follows:

4. Chardin.js

Inspired by Gmail’s new composer tour, Chardin.js is a simple overlay of instructions on existing elements. It uses a JQuery plugin to display instructions. The GitHub page contains the instructions and documentation and has 4.9k GitHub stars.

Chardin.js - Simple and beautiful overlay instructions for your apps.

heelhook.github.io

You can fork the GitHub repo or download the required CSS and JS files chardinjs.css and chardinjs.min.js and add them to the HTML page.

After setting up, you can add instructions to the document. Below is an example of adding an instruction to an image element. The data-intro sets the text to be displayed and data-positions decide the position of the text.

To run Chardin in the sequential mode you need to use different instructions like data-chardin-sequenced=”true”, data-chardin-auto=”true” and data-chardin-delay=”100” to display the instructions with an automatic movement through elements.

Once the elements are ready with the instructions, you can initialize the library through a button click or make it run automatically. The library can also be limited to a particular container.

Chardin.js allows you to refresh the overlay and also provides construction options to specify URL containing text as JSON objects that can be displayed as instructions.

5. PageGuide

PageGuide is a smart guide for interactive, dynamic, and single-page apps based on jQuery and CSS3.

Pageguide by SolarWinds

An interactive guide for web page elements using jquery and css3. view the project on github tracelytics/pageguide….

tracelytics.github.io

You can install PageGuide in any one of the following four ways:

Download the latest release from GitHub
Clone the repo: git clone https://github.com/tracelytics/pageguide.git
Install with Bower

Install using npm

The installation is loaded with examples and can be run using Grunt at http://localhost:3000/example/ .

For the initial setup, add pageguide.js and the CSS file as follows:

Add the following code to your HTML file to initialize PageGuide:

Specify the selector in <ul>, this will be matched by PageGuide to display the text. Below is an example of adding pageguide.js to the bottom of the page.

PageGuide is used to display static messages on the page, resulting in it being less cluttered.

6. Hopscotch

Hopscotch was built by Gordon Koo and Hans van de Bruggen as an open-source tool during LinkedIn’s Incubator program . Its main purpose was to solve problems of usability, intuitiveness, and performance.

With 4.3k GitHub stars, it is only 8kb in its minified and gzipped state. Though it does not require dependencies, it may use jQuery if available on the page. Hopscotch offers:

Event callbacks: supports callbacks for onStart, onNext, and onClose events.
Multipage resistance: Uses HTML5 session storage to persist the state of the tour across pages.
i18n: Supports internationalization.
Lightweight callouts: Manages callouts with a convenient method to create them.
Browser compatibility: It is compatible with all browsers.
Customizable: It allows CSS tweaks, bubble markup, and page interactivity.

LinkedInAttic/hopscotch

This project is no longer used by linkedin and is currently unmaintained. if you would like to maintain this project….

Use Grunt.js to build Hopscotch. This will run the test suite with new artifacts. Then include the two files hopscotch.js and hopscotch.css into the HTML page.

Once the initial setup is complete, you can initialize the tour using JSON.

Hopscotch can be tested using the Jasmine testing framework and allows continuous integration with Travis CI.

7. Tourist.js

Tourist.js is a simple library best suited for a single page application than a multipage website. It can control the interface at each step. Using Tourist, you can create a guide for the steps that require opening a window or menu. A series of steps can be specified with instructions for particular elements.

Despite the absence of a website, the GitHub page with 12k stars consists of extensive documentation.

easelinc/tourist

Tourist.js is a simple library for creating guided tours through your app. it's better suited to complex, single-page….

You can install Tourist.js using the following bower command:

Tourist requires jQuery and Backbone, and has the ability to use Bootstrap 3 popovers (default) or QTip2 tips along with Bootstrap 3 CSS.

The “tourist.js” JavaScript file and an optional CSS file can be used to customize styles.

After the initial setup, you can create the steps and add them to the tour instance as follows:

It also allows you to have your custom implementation for tips using Tourist.tip.

Implementing JavaScript tours and guides is an easy way to introduce users to an application. Most of these tools use CSS and JavaScript files with simple initialization. These tools are used by many top-notch companies. How your tours and guides look, and function will depend on the library you select. The right tour can make your application a lot more intuitive and attractive to users.

How to Easily Share Vue Components Between Applications

Learn how to easily share vue components between different projects, sync changes, and build faster using bit., 10 top javascript libraries and tools for an awesome ui/ux, recommended tools and libraries that will help you build a stunning web app in 2020, 11 chrome apis that will give your web app a native feel, 11 chrome apis that will give your web app a native-like user experience..

Written by Shanika Wickramasinghe

Senior Software Engineer and Freelance Technical Writer. I write about any Computer Science related topic. https://www.linkedin.com/in/shanikawickramasinghe

More from Shanika Wickramasinghe and Bits and Pieces

Frontend Weekly

Playwright vs Puppeteer: Choosing the Right Browser Automation Tool in 2024

What are the origins of playwright and puppeteer.

Danusha Navod

7 Node.js Design Patterns Every Developer Should Know

Explore the facade, adapter, singleton, prototype, builder, proxy and factory for modern software design..

Ashan Fernando

5 Essentials for Modern Frontend Architecture

Quick insights to better design your frontend architecture.

How to Resolve ERROR: could not resize shared memory segment “/PostgreSQL” No space left on device…

If you are using postgres db server with a docker image and if you want to add more users for your database there is a chance that you may…, recommended from medium.

Minko Gechev

Angular Blog

Angular v18 is now available!

Today we are excited to share the next milestone in the evolution of angular over the past three releases we’ve introduced a lot of new….

Ameer Omidvar

Apple’s all new design language

My name is ameer, currently the designer of sigma. i’ve been in love with design since i was a kid. it was just my thing. to make things….

Interesting Design Topics

Stories to Help You Grow as a Designer

Stories to Help You Grow as a Software Developer

Adham Dannaway

16 little UI design rules that make a big impact

A ui design case study to redesign an example user interface using logical rules or guidelines.

Artturi Jalli

I Built an App in 6 Hours that Makes $1,500/Mo

Copy my strategy.

Deepak Chaudhari

Advanced JavaScript Concepts: 2024

Description: uncover the intricacies of advanced javascript concepts, from nested function scopes and closures to currying, ‘this’ keyword….

Julien Etienne

Stop Using localStorage

Bid farewell to localstorage embrace indexeddb for speed, type-safe storage, and non-blocking data transactions. #indexeddb #webdev.

Text to speech

Powerful User Onboarding

Built to increase adoption, intro.js is a lightweight javascript library for creating step-by-step and powerful customer onboarding tours.

TRUSTED BY 5000+ TEAMS ALL AROUND THE WORLD

Install Intro.js

You can install Intro.js in a few simple steps. Intro.js consists of two main files, the JavaScript part and the CSS part which renders the elements nicely.

1 Include the JavaScript and CSS

Intro.js is available on NPM and most CDNs

2 Call the introJs.start() method

The start() method configures the library and starts the product tour.

Easy to Use

The simplicity of Intro.js API will help you to develop an advanced onboarding for your products. Intro.js is lightweight, 10kB and has no external dependencies!

Customizable

Intro.js provides various ways to configure your product onboarding and customize every single step of your tour.

Open-source

Intro.js is Free and open-source, published under AGPL license. We also provide commercial license, supporting your team to successfully integrate Intro.js!

Commercial license

Lifetime license. Once-off payment.

Intro.js is AGPL-licensed and open-source. However, if you want to use Intro.js in your commercial app, website or plugin, you would need to obtain a commercial license.

One project

No commercial support

Regular product updates

Lifetime license

1 month commercial support

1 custom theme

Unlimited projects

6 months support

3 custom themes

24/7 Priority Support

User-Experience, customer onboarding and tools to improve your business growth and success

5 Bad UX Examples You Must Avoid

Learn how to use the power of UX to turn your website into a successful application

Best Tools for Startup Growth Hackers in 2021

With many startups failing soon after they begin, growth hacking can make or break your marketing campaign. Here are the best tools to use

Five Amazing Benefits of User Onboarding You Should Know

Trying to figure out if user onboarding is the right choice for your product? Here's what you need to know about user onboarding and how it can make a huge difference for your company

Hello World
Floating Tooltip
Progress Bar
Scrollable Elements
Documentation
StackOverflow

Advertise with us
Explore by categories
Free Online Developer Tools
Privacy Policy
Comment Policy

Top 10: Best Tour (website guide) Javascript and jQuery plugins

Carlos Delgado

January 02, 2019
194.7K views

See our compilation from 10 of the best Tour Javascript and jQuery plugins to create a web guide for your user

Top 10: Best Tour (website guide) Javascript and jQuery plugins

Have you ever visited a website or a web application, where you don't have the most remote idea of how to start to using it because it's your first time there and you just feel like Jhon Travolta?

If you're a web developer, you may want to avoid this experience from your user creating some type of guide video, or a well explained documentation. However, some users won't read the documentation or see a video because there is no time for that, they just want to use your app! For this kind of users (that's the 90% of the people) you can use a dynamic in web tour while they learn to use your app. You can implement this feature by using a Guided Tour plugin in your app.

In this top, we are going to share with you 10 of the best guided tour plugins made in VanillaJS and jQuery.

Anno is a step-by-step guides plugin for powerful web apps. Anno.js is built to be extensible , the source is about 500 lines of literate coffeescript; you can read the annotated source in just a few minutes.

9. jQuery guide

jQuery Guide is a jQuery plugin made to create a "How to use guide" for your web app. It uses jQuery animations to provide a smooth and nice experience for the user while they learn how to use your app.

8. aSimpleTour

aSimpleTour is a jQuery plugin that will help you to make website tours easily.

7. Pageguide

Pageguide is a plugin to create interactive guide for web page elements using jQuery and CSS3. Instead of cluttering your interface with static help message, or explanatory text, add a pageguide and let your users learn about new features and functions. Pageguide comes with an example implementation (the files are in /example) which you can run locally with Grunt.

6. Bootstro.js

Bootstro show your users a guided tour of what is what on a page. Especially, for first-time users. Bootstro requires bootstrap & bootstrap popover , just add the class .bootstro to any element that you'd like to be highlighted, then include bootstro.js & bootstro.css and start using Javascript bootstro.start() .

Any element anywhere on the page can be intro'ed: popovers are automatically scrolled to so they always get focused. This plugins is easily customizable, Bootstro provides various public methods so you can control as you like bootstro.start() , bootstro.next() , bootstro.prev() .

5. Hopscotch

Hopscotch is a framework to make it easy for developers to add product tours to their pages. Hopscotch accepts a tour JSON object as input and provides an API for the developer to control rendering the tour display and managing the tour progress. Hopscotch supports internationalization via i18n object in tour config. The default language is English. If you need a tour in a language other than English, pass in translated text in your tour config. Text used for previous, next, skip, done and close buttons, as well as, tour step numbers can be translated.

A Hopscotch tour consists of a tour id, an array of tour steps defined as JSON objects, and a number of tour-specific options. The tour id is simply a unique identifier string. The simplest tour consists of just an id string and an array of one or more steps. This plugin has been created by the guys at LinkedIn .

4. Enjoyhint

A free web-tool that is created to guide users through a site or app in the simplest way. It gives an excellent way to create interactive tutorials with hints and tips, and embed them into your web apps, thus, enhancing their usability and value/effectiveness. EnjoyHint adds simple hints that prompt users to navigate a website or an app intuitively and easily. It comes along with instant auto-focus highlighting, as the user moves into a new field.

We demonstrated the use of the EnjoyHint web-tool in an issue tracker demo, created with Webix JavaScript UI library. The tool itself is based on Javascript, HTML5 and CSS. The tool works on the client-side and can be used with any server-side platform. The key features of EnjoyHint:

Fast web-tool setup
Simple initialization and configuration
Interactive hints - instant tips that provide a description to the user about the field they are in
Scenario of coherent actions - allows adding a sequence of hints for all necessary steps
Auto-focus highlighting - involves automatic focus on the area related to the hint and its instant hightlighting when the hint loads
Defining shape - defining the shape and margin of the highlighted area
Timeout settings - allows setting the delay before the moment, when the element is highlighted
Hint resume that restarts the display of hints from the step where it was stopped
Auto scrolling to the highlighted element at different animation speed.
Cross-browser support (Chrome, FireFox, IE10+, Safari)
Support for Android, iOS and Windows touch sceens (laptops and tablets)

3. Intro.js

Intro.js is a Step-by-step guide and feature introduction plugin for your website. When new users visit your website or product you should demonstrate your product features using a step-by-step guide. Even when you develop and add a new feature to your product, you should be able to represent them to your users using a user-friendly solution. Intro.js is developed to enable web and mobile developers to create a step-by-step introduction easily.

Intro.js has no dependencies, fast and small 10KB JavaScript and 2.5KB CSS, that's all (minified, gzipped), besides it works on Google Chrome, Mozilla Firefox, Opera, Safari and even Internet Explorer.

2. Shepherd

Shepherd is a javascript library for guiding users through your app. It uses Tether, another open source library, to position all of its steps. Tether makes sure your steps never end up off screen or cropped by an overflow. Try resizing your browser to see what we mean.

Shepherd works in IE9+ and all modern browsers.

1. Bootstrap Tour

Bootstrap Tour is a plugin to make an animated, dynamic guided tour through your website using the famous Bootstrap Framework, however, if you don't use Boostrap you can use the standalone version without problem. This plugins is the easiest way to show people how to use your website with Bootstrap Popovers.

Honorable mentions

Driver.js is a light-weight, no-dependency, vanilla JavaScript engine to drive the user's focus across the page. Driver is compatible with all the major browsers and can be used for any of your overlay needs. Feature introductions, focus shifters, call-to-action are just a few examples.

If you know another awesome Tour plugin to show a website to your user or you're developing your own tour plugin, don't be shy and share it with the community in the comment box.

Senior Software Engineer at Software Medico . Interested in programming since he was 14 years old, Carlos is a self-taught programmer and founder and author of most of the articles at Our Code World.

Top 10 : Best autocomplete jQuery and javascript plugins

July 05, 2016
155.8K views

Top 10 : Best notification libraries and plugins for Javascript and jQuery

February 20, 2016
197.6K views

Top 10 : Gallery and photo viewer plugins for javascript and jQuery

February 21, 2016
67.5K views

Top 5 : Best javascript and jQuery tooltip plugins

March 19, 2016
24.1K views

Top 5: Best javascript video background plugins

August 10, 2016
27.6K views

Top 10: Best slide sidebar menu (drawer) javascript and jQuery plugins

December 15, 2016
152.8K views

Advertising

Existing customer? Sign in

10 Best JavaScript Product Tour Libraries for User Onboarding

Looking for open-source libraries to build JavaScript product tours with? Here are the top 10 that we've found.

For tech-savvy teams, JavaScript product tours can be an easy solution to creating onboarding flows quickly. So here is a list of 10 open-source JavaScript product tour libraries that you might want to check out.

Why use a JavaScript library for user onboarding? #

First, let's cover all the reasons why you might want to use JavaScript onboarding libraries.

1. You know how to code #

A JavaScript product tour library is essentially a DIY tool. Meaning you need to know your way around code, at least for front-end development with JS and CSS. So if you don’t know how to code or you don’t have readily available dev resources in your team, this is not an option for you.

2. You want to save money #

One of the big advantages of JS-built product tours is that they’re often open-source libraries, which means it’s free of charge. There are services that charge for commercial licenses, but they are often for a lifetime and are peanuts compared to what you would pay for a more robust no-code product adoption platform.

3. You want to be agile #

Lastly, with a JavaScript onboarding library, you can deploy as fast as you want to, as well as have full control over what you publish. Once again, you need to be well-versed in your coding knowledge. Otherwise, a no-code solution would actually be faster than being confused about what to do.

Your list of Top 10 JavaScript libraries for product tours #

If you type product tours or onboarding tours on GitHub you’ll find quite a number of options. But not all of them are good. Some are just unmaintained and outdated like Hopscotch . Others are just really underwhelming like Trip.js .

So we thought we’d help you narrow it down. Let’s take a look at the 10 best JavaScript product tour libraries.

1. Intro.js #

Intro.js is not just a random open-source library. It is quite well-known, well-supported, and widely used. In fact, if you’re looking for a reliable JavaScript product tour builder, Intro.js is probably where you want to start. It’s not completely free, but a commercial license starts from $9.99.

2. Shepherd.js #

Shepherd.js is a JavasScript library for creating product tours that relies on another open-source library called Floating UI to create dialogs for each step. You can create single tooltips with their floating dialogs or have an entire product tour with multiple steps.

3. Bootstrap Tour #

Bootstrap Tour is a widely used open-source HTML, CSS, and JS-based frontend framework. So if your website is built on Bootstrap, Bootstrap Tour might be a good fit to build an onboarding flow with because it draws its design fundamentals from Bootstrap. Despite that, you can still use it even if you’re not using Bootstrap for your website’s frontend.

4. Codyhouse #

Codyhouse is actually a group of 400 HTML, CSS, and JavaScript components that are compatible with any CSS framework. With those, you can make a Product Tour that is powered by CSS and JQuery. The default design is very well made, so this is highly recommended for anyone who wants a quick start. However, certain components may be behind their premium gate, so make sure you get the free one.

5. Chardin.js #

Chardin.js is truly a barebones solution for creating onboarding tours. Essentially, it’s a layer of instructions that go over your app. You can either set the instructions to all show at once or have them go in a sequence.

6. Product Tour JS #

Product Tour JS is a JavaScript library for creating user onboarding and product presentation. It requires JQuery to run. Essentially, it’s like any other product tour open library, but quite well-polished in terms of styling.

7. Smartour.js #

Smartour.js is another super simple open-source library for product tours, except that this one is built with TypeScript and JavaScript. As far as we can tell, it also has a more limited styling option through CSS.

8. Tooltip Sequence #

Tooltip Sequence is exactly as it says. It enables you to build a sequence of tooltips. Other than the fact that it’s your run-of-the-mill JavaScript open library for product tours, it needs Hugo to run the dev server. So if that’s not your cup of tea, look elsewhere.

9. Webtour.js #

Webtour.js is one of the more robust product tour open libraries out there. It comes with basic product tour building features, but it also has several advanced functionalities such as highlighting elements, dynamic element targeting, and keyboard control.

10. Tourguide.js #

Lastly, there is Tourguide.js . It is a lightweight alternative to other JavaScript libraries that rely on JQuery. It’s clean, it’s nice, and it gets the job done.

These are our 10 suggestions for you if you’re looking for product tour open libraries. And if you’re thinking, “well, these all seem quite similar” , you would be correct, since there seems to be an agreed-upon format that they usually follow. But any number of these can be an adequate option if you have a super simple product that needs an onboarding tour.

Don’t know how to code? Need something more robust? You’ve got options #

Coding is hard, and it’s not for everyone. Or maybe you are a coding wizard, but you just don’t want to waste much time on building and maintaining user onboarding tours yourself. Don't know for certain? See this table that summarizes the benefits of building vs buying.

So instead, use a no-code tool 😉 Chameleon provides a robust product tour builder that allows you to create fully customizable and highly targeted onboarding flows. It also integrates with your favorite tools and offers so much more. If you’re looking for something better than just a sequence of dialogs, then you need a dedicated product adoption platform.

👉 Check out this interactive demo of building a Tour with Chameleon, no code needed.

Try our no-code builder for in-product experiences

Save time and money by building user experiences all without any dev resources required.

User Onboarding Metrics, KPIs, and Benchmarks: A Comprehensive Guide

User onboarding still isn't good enough, but here's how it's changing, how to optimize the mobile app onboarding process, boost product adoption and reduce churn.

Get started free in our sandbox or book a personalized call with our product experts

The best JS libraries for user tours & application on-boarding.

A breakdown of the best and most popular libraries for including user tours in your website.

What is a Tour Guide library?

Interactive tour-guide and application walkthroughs are an important UX pattern that help to guide users through a website, web application, or mobile application. They are beneficial for user experience and accessibility because they provide a structured and organised way to introduce users to the product or service, allowing them to become familiar with the product or service quickly and efficiently. Tour-guides and application walkthroughs are also beneficial for user engagement and conversion, as they help to guide users through the product or service, increasing their chances of completing the desired action.

A JavaScript tour library is a collection of libraries that provide developers with the tools and resources they need to create an interactive tour guide or application walkthrough. These libraries can be used for a range of purposes, from creating onboarding tours for new users, to creating interactive tutorials for existing users. The libraries typically include features such as customisable steps, branching logic, and the ability to add audio and video.

The benefits of using a JavaScript tour library are numerous. They help to improve user experience and accessibility by providing a guided and structured way to introduce users to a product or service. They also help to increase user engagement and conversion by guiding users through the product or service and providing them with the necessary information to complete the desired action. Additionally, they provide developers with the tools and resources they need to create an interactive tour guide or application walkthrough quickly and efficiently.

Popular Javascript Tour Guide Libraries

Bootstrap tour (5/5).

Bootstrap Tour is an easy-to-use library designed to help developers quickly get started on creating guided tours of their web applications. It works seamlessly with Bootstrap and other frameworks, and provides a simple and intuitive way to create and manage tours.

Shepherd (4.5/5)

Shepherd is a library designed to help developers create interactive tours for their web and mobile applications. It provides an easy-to-use, customizable UI, with an intuitive API and flexible plugin system.

Intro.js (4/5)

Intro.js is a lightweight library for creating feature-rich step-by-step tours of your web applications. It works with any web framework, and provides an easy-to-use API for customizing the look and feel of your tours.

Hopscotch (4.5/5)

Hopscotch is a library designed to quickly create feature-rich guided tours for your web applications. It is compatible with most modern web frameworks, and provides an easy-to-use API for customizing the look and feel of your tours.

GuideChimp (4.5/5)

GuideChimp is a library designed to help developers quickly create feature-rich, visually appealing guided tours of their web applications. It works with any modern web framework, and provides an intuitive API for customizing the look and feel of your tours.

TourGuide JS (4/5)

TourGuide is a Javascript library written for creating user tours and on-boarding steps for your apps.

It was built as an experimental library for creating customisable user tours and on-boarding journeys for SPA's. Created by @sjmc11 as an open source project, it is 100% free to use in any project.

Joyride (3/5) *React

Joyride is a library designed to help developers create interactive, step-by-step tours of their web applications. It is designed to work with the React framework, and provides an easy-to-use API for customizing the look and feel of your tours.

Guides.js (3/5)

Guide.js is a library designed to help developers quickly create feature-rich, visually appealing guided tours of their web applications. It works with any modern web framework, and provides an intuitive API for customizing the look and feel of your tours.

EnjoyHint (3/5)

EnjoyHint is a library designed to help developers quickly create feature-rich, visually appealing guided tours of their web applications. It is designed to work with any web framework, and provides an easy-to-use API for customizing the look and feel of your tours.

What makes a good tour guide library?

1. usability.

A good open source JavaScript library should be easy to use and understand. It should be intuitive and have features that are easy to access and use. It should also provide tools and resources to help developers get the most out of the library. The library should also be well-documented with examples and tutorials to help developers quickly get up and running.

2. Detailed Documentation

A good open source JavaScript library should have detailed documentation that includes examples and tutorials. This makes it easier for developers to understand the library and learn how to use it. It should also have clear instructions on installation, configuration, and usage.

3. Maintenance and Contribution from Developers

The library should have active maintenance and regular updates to ensure it remains bug-free and up-to-date. It should also have an active community of developers who contribute bug fixes, new features, and other improvements.

4. Open Source and Free vs Paid

Open source libraries are usually free and open for anyone to use and modify. Paid libraries are usually closed source and require a fee for use. Open source libraries are often better supported by the community and have more features than paid libraries.

5. Small Footprint/File Size

A good open source JavaScript library should have a small footprint or file size. This makes it easier to download and deploy, and reduces the amount of resources needed to run the library.

6. CDN or NPM Installation Methods

A good open source library should provide multiple installation methods, such as CDN and NPM. This allows developers to quickly and easily download and deploy the library on their projects.

7. Minimal Dependencies

A good open source library should have minimal dependencies on other libraries or frameworks. This ensures that the library is self-contained and can be used independently of other libraries or frameworks.

8. Framework Agnostic/Usability in Any Framework

A good open source library should be framework agnostic, meaning it can be used in any framework. This allows developers to use the library in any project, regardless of the framework used.

9. Security

Security is an important aspect of any library, especially open source libraries. A good open source library should have security features and measures in place to protect against malicious code and attacks. It should also be regularly updated to ensure that any security vulnerabilities are fixed and patched.

JavaScript & CSS tour

Best free JavaScript plugins to implement the guided tour on your web applications.

View more: Best Guided Tour JavaScript Plugins

Build Interactive Website Walkthroughs With Journey.js

A lightweight, easy-to-use JavaScript library to create interactive, customizable, accessible guided tours across your websites or web apps.

Create Interactive Guided Tours In App – TourGuide.js

A customizable, framework-agnostic, and feature-rich guided tour/onboarding library written in JavaScript (TypeScript).

Responsive Guided App Tour In JavaScript – shepherd

shepherd is a JavaScript library that creates an interactive, dynamic visual guide to let your users learn about new features and functions on your web app.

Easy Guided Tour Plugin For Bootstrap 5 – bs5-intro-tour

An easy-to-use guided tour plugin for Bootstrap 5 that guides your visitors through a tour of your app.

Create Step-by-Step Tours with Tiny-Tour.js

A tiny guided tour library for generating step-by-step tours to guide your users through your website or application’s new features or featured content.

Slider-style Guided Tour In Vanilla JavaScript – tourguide.js

tourguide.js is a JavaScript library which helps you create an interactive, step-by-step tour to guide your visitor through new features and highlighted content on the app.

Feature-rich Step-by-Step User Guide In JavaScript – webtour.js

A feature-rich, user-friendly, fully responsive guided tour JavaScript library for the web.

Create Guided Tours And Highlight Elements – Tooltip Sequence

Yet another JavaScript guided tour library that creates step-by-step tooltips to walk visitors through your webpage and highlight matched DOM elements.

Create Guided Tours For Tutorials & New Features – Walkthrough.js

walkthrough.js is a lightweight, zero-dependency JavaScript library to create interactive guided tours for Tutorials & New Features of your website & app.

Interactive Walkthrough Plugin In Vanilla JavaScript – Steptip.js

A Vanilla JavaScript walkthrough (guided tour) library to generate interactive feature/product/tutorial tours on the website.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

Notifications You must be signed in to change notification settings

Vue Tour is a lightweight, simple and customizable guided tour plugin for use with Vue.js. It provides a quick and easy way to guide your users through your application.

pulsardev/vue-tour

Folders and files, repository files navigation.

Vue Tour is a lightweight, simple and customizable tour plugin for use with Vue.js. It provides a quick and easy way to guide your users through your application.

Getting started, something missing.

You can install vue-tour using npm or by downloading the minified build on GitHub.

Then import the plugin in your application entry point (typically main.js if you used vue-cli to scaffold your project) and tell Vue to use it. Also don't forget to include the styles. You can add the styles provided by default or customize them to your own liking.

Finally put a v-tour component in your template anywhere in your app (usually in App.vue) and pass it an array of steps. The target property of each step can target a DOM element in any component of your app (as long as it exists in the DOM when the concerned step pops up).

For all individual elements you want to add a step on, make sure it can be retrieved with document.querySelector() . You can use any selector, an ID, a CSS class, data attributes, etc. Once this is done and your steps correctly target some DOM elements of your application, you can start the tour by calling the following method.

For a more detailed documentation, checkout the docs for vue-tour .

before() UI step functions

If you need to do UI setup work before a step, there's a before function you may include in any/each of your steps. This function will get invoked before the start/next/previous step is rendered. The function must return a promise. The function is invoked when start , nextStep , and previousStep are triggered. When the promise is rejected, it will not move to the next or previous step. If the promise is resolved then it will move in the direction specified.

It's used when you need to change what's shown on the screen between steps. For example, you may want to hide one set of menus and open a screen or you want to perform an async operation. This is especially useful in single-page applications.

If you have a feature request or found a bug, let us know by submitting an issue.

Used by 3.8k

Contributors 18

JavaScript 23.7%

Getting started
API Documentation
Bug reports

Bootstrap Tour

The easiest way to show people how to use your website. Not using Bootstrap? It works anyway!

Start the demo

The How-to It's simple!

Add the dependencies.

If you are using Bootstrap, include bootstrap-tour.min.css and bootstrap-tour.min.js :

Otherwise, just include bootstrap-tour-standalone.min.css and bootstrap-tour-standalone.min.js :

Setup your tour:

Do you want to do more? Read the full documentation.

The Team It's handmade!

The License It's free!

Code licensed under the MIT license . Documentation licensed under CC BY 3.0 .

10+ jQuery Web Tour, Help and Instructional Plugins

Share this article

1. jQuery Joyride

2. clippy.js, 4. pageguide.js, 5. website tour with jquery, 6. asimpletourplugin, 7. jquery tour.

8. Guidely – jQuery Website Tours

9. jQuery E-Help

10. bootstrap-tour, 11.tourist.js, 12.powertour.js, frequently asked questions about web tour instructional plugins.

Take your user experience to another level by incorporating one of these pretty interesting jQuery Web Tour, Help and Instructional Plugins in your website. You would find these plugins really useful for improving your overall user experience on your website. Have fun! Update 02/06/2013: Added 11. Tourist.js Update 21/06/2013: Added 12. PowerTour.js

10 jQuery Plugins to help with Responsive Layouts
10 Online Tools to Help Optimize and Format CSS
10 jQuery Panorama Image Display Plugins

8. Guidely – jQuery Website Tours

What are the benefits of using web tour instructional plugins?

Web tour instructional plugins are essential tools for enhancing user experience on a website. They guide users through the different features of a website, making it easier for them to understand and navigate. This can significantly reduce the learning curve for new users and increase user engagement. Additionally, these plugins can help highlight new or complex features, ensuring users fully utilize the website’s functionality.

How do I choose the right web tour instructional plugin for my website?

Choosing the right web tour instructional plugin depends on your specific needs and the complexity of your website. Consider factors such as ease of use, customization options, compatibility with your website’s platform, and the level of support provided by the plugin developer. It’s also beneficial to read reviews and check ratings before making a decision.

Are web tour instructional plugins difficult to install and use?

Most web tour instructional plugins are designed to be user-friendly and easy to install. They usually come with detailed instructions and support from the developers. However, the level of difficulty may vary depending on the complexity of the plugin and your familiarity with website management.

Can I customize the design and content of the web tour?

Yes, most web tour instructional plugins offer customization options. You can usually change the design to match your website’s theme and modify the content to suit your needs. This allows you to create a personalized and engaging user experience.

Are web tour instructional plugins compatible with all website platforms?

While many web tour instructional plugins are designed to be compatible with a wide range of website platforms, not all plugins will work with every platform. It’s important to check the plugin’s compatibility information before installation.

Can web tour instructional plugins slow down my website?

While it’s possible for any plugin to potentially slow down your website, most web tour instructional plugins are designed to be lightweight and efficient. However, it’s always a good idea to monitor your website’s performance after installing any new plugin.

Do I need coding skills to use web tour instructional plugins?

Most web tour instructional plugins are designed to be user-friendly and do not require advanced coding skills. However, some plugins may offer more advanced features that require a basic understanding of coding.

Can I use web tour instructional plugins on mobile websites?

Yes, many web tour instructional plugins are responsive and designed to work well on both desktop and mobile websites. However, it’s important to check this feature before choosing a plugin.

Are there free web tour instructional plugins available?

Yes, there are both free and premium web tour instructional plugins available. While free plugins can offer basic features, premium plugins often provide more advanced features and dedicated support.

Can I use multiple web tour instructional plugins on my website?

While it’s technically possible to use multiple plugins, it’s generally not recommended as it can lead to compatibility issues and slow down your website. It’s best to choose one plugin that meets all your needs.

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

Most Popular

30 best tools for data visualization.

37 Comments

Best PHP Frameworks for Developers

33 Comments

Latest Stories

What is new?

Ensuring Safe Online Experiences: A Guide to Effective Image Moderation

May 16, 2024

Cantech Networks: Your Partner for Reliable and Secure Dedicated Server Hosting

May 2, 2024

Most Recent

B. Frances on:

Best WordPress Wedding Themes

Ultimate Content Locker Pro on:

Best WordPress Social Content Locker Plugins for 2017

15 best jquery site tour plugins.

In JQuery · Plugins
— 31 Dec, 2014

When a user navigates to a website it becomes unpredictable by which to guess how they will browse + how they will perceive the content and flow of that website or web app. There are a few tools which are available by which to analyze such behavior, by using methods like A/B testing, thus improving usability is always possible. However, it is always a great idea to guide users where they want.

For this roundup we have compiled a list of some of the best jQuery Site Tour Plugins . You would find these plugins really useful for improving your overall user experience on your website. Such plugins will guide you to create site/page tours easily and help you customize and achieve stunning look for your websites. Have fun !

2. Bootstrap Tour

3. Bootstro.js

4. Intro.js

5. Power Tour

7. jQuery Tour Bus

8. jQuery Site Tour

9. Website Tour with jQuery

10. JoyRide

11. Pageguide.js

12. jQuery Tour

13. Power Tour

14. Pagetour

15. jQuery Website Tour for WordPress

Tags: best jquery tour plugins jquery site jquery site tour plugins jquery tour jquery tour plugins power tour site tour tour plugin

— Gavin

A Web addicted Geek stuck inside Tron.

Previous story 20 New HTML5 Tools You Shouldn’t Miss
Next story Tools and Libraries for Manipulating Audio on Web Pages

1 – intro.js

Demo Download

Intro.js is a simple and fast javascript plugin for creating better introductions to websites and features with step-by-step guides with keyboard and mouse support.

2 – Website Tour with jQuery

A little script that allows to create a tour on a website with jQuery. This can be very useful if you want to explain your users the functioning of your web application in an interactive way.

3 – jquery joyride feature tour plugin

Joyride is extremely flexible and lets you take control of how people interact with your tour. We programmed it to be cross-browser compatible with modern browsers and even used some fancy CSS to avoid images. Now let’s see just how easy it is to take your first ride without getting the fuzz involved.

4 – Bootstro.js

Bootstro.js is a tiny JS library taking advantage of bootstrap’s popover to help guide your users around.

5 – jQuery myTour plugin

Mytour is a simple jQuery plugin used to create an interactive visual tour for your website to let your visitors learn about new features and functions.

6 – Crumble

Crumble allows you to quickly and easily build feature tours for your website or app using small bubbles! The bubbles are visually interesting, will draw attention and due to the small size make sure that you will write using concise language that visitors will read. The tour itself is defined as a standard ordered list in your html, making it accessible.

7 – Trip.js

Trip.js is a jQuery plugin that can help you customize a tutorial trip easily with more flexibilities. Right now Trip.js support lots of useful stuffs like keyboard binding, animations, changing themes … etc.

8 – FAQtoid

FAQtoid is a simple free all-in-one help system for your website or web application. It reduces your support costs by giving visitors the tools to help themselves.

FAQ with Live Search Users see answers as they type.
Tours Walk users through the parts of each page.
Video Gallery Users can watch videos while staying on the webpage that a video explains.
Smart Email Form Handles crazy and junk messages. Automatically includes detailed information about your user, what they were trying to do, and any errors on the page.

9 – jQuery Tour Bus

A tour/walkthrough plugin for developers. It includes limited automatic behavior, more like a ‘toolkit’ than some of the others out there.

10 – Feature Walkthrough

A JS plugin to add a feature walkthrough on your web page. You can position the walkthrough callouts to appear on the right,left,top or bottom of the element you are describing. For the left/right position, give the width of the element. This positions the callout exactly the way you want it. Similarily, give the height of the element when using the top/bottom positioning of the callout. Future features, include a complete customization of the look & feel of the callouts.

11 – chaperone.js

Chaperone is a simple jQuery plugin for doing guided tours through a website. Inspired by Joyride, Chaperone takes a list of items and uses them as a guide to show messages on targetted elements.

12 – Hopscotch

13 – pageguide.js

pageguide.js is an interactive visual guide to elements on web pages. Instead of cluttering your interface with static help message, or explanatory text, add a pageguide and let your users learn about new features and functions.

14 – aSimple Tour Plugin

aSimpleTourPlugin is a jQuery plugin that will help you to make website tours. While a floating box helps managing the tour, tooltips (that can be positioned however wanted) help focusing on the elements.

15 – Bootstrap Tour

This jQuery site tour plugin loads the content inside Bootstrap Popovers. Tour steps + the content are both defined in JavaScript and it has lots of options to customize the behavior.

16 – TourTip – jQuery Overlay Tour

TourTip is a simple library for creating guided tours through your application. It’s better suited to complex, single-page applications than websites. Our main requirement was the ability to control the interface for each step. For example, a step might need count seconds before moving to the next step, or wait for the user to complete a task. TourTip gives you the ability to manage these parameters all at once or for each step separately.

17 – jQuery Tour

TourJS is a jQuery plugin for creating beautiful tours. Items are pulled out of the page, you can require an action from the user before moving to the next step of the tour, and TourJS will automatically scroll to hidden items.

18 – Website tours with jQuery UI

Lets you build website tours by providing tools to expose or annotate elements, also can step through a tour or run it automatically.

19 – Bon Vojage

Bon Vojage is a tiny JQuery plugin that makes your cross-website tour simple!

20 – ddTour

A simple uncomplicated lightweight site tour jQuery solution created by David Davis.

Unlike other tour solutions you keep your code in one place. The tooltip pops up right where you have a description of it.
Traverse to any element by designated class selector
This is a simple grunt stupid solution as they say in the Marine Corps.

21 – quicktour.js

Quicktour.js uses an iterative loop to highlight each tour item in the order you add them. A dark frame will appear over the website, showing a title (if specified), and the tour will progress with each click.

22 – jQuery Tour

My simple implementation of a Tour plugins out there.

I am relying on absolute positioned divs. These placeholders are to injected dynamically into DOM.
With every click, the DOM is 1st cleared of all the elements and then a dynamically created element has to be placed dynamically as positioned by the CSS class.
Takes an array of JSON objects containing the TITLE and DESCRIPTION of the placeholder. The array order determines the order of the placeholders to be displayed.

23 – lightsOff.js

A lightweight JQuery plugin (6kb minified) to show nice guided introductions of various elements on your page.

24 – usertour.js

It’s a jQuery widget for web applications that want to offer a step by step tour to their users.

25 – VTour.js

A jQuery library used for designing help pages for your website. Gives the user a guided walk through of your webpage and it’s functions.

26 – jquery-guide

A jQuery plugin that new layout or new features using guide

27 – Concierge

Concierge is jQuery plugin that creates a walkthrough guide for use in educating users about stuff on the page. It basically just lets you set up a bunch of popovers that fire in order.

28 – anno.js

Anno.js lets you add powerful step-by-step guides to your web-apps

29 – EnjoyHint

A free web-tool that is created to prompt users to navigate a website or an app intuitively and easily. It gives an excellent way to create interactive tutorials with hints and embed them into your web apps, thus, enhancing their usability and value/effectiveness.

EnjoyHint adds simple hints that come along with instant auto-focus highlighting, as the user moves into a new field.

Tags: JQuery Plugin jquery tour website guide website tour

45+ Creative Menu With jQuery and CSS3

5 Nov, 2014

10 Free jQuery Plugin To Create A Fullscreen Video Background

24 Oct, 2014

Our Friends

Ninodezign newsletter.

12 jQuery Website Tour Plugins

jQuery website tour plugins enable you to display overall functioning of your website in elegant style. With the help of site tour jQuery plugins you can create website tours, step by step walkthroughs, interactive help, and instructional guides.

So, what are you waiting for, just download these plugins and start your website tour and deliver an awesome experience to your visitors.

1. jQuery Tour

3. power tour, 4. jquery website tour for wordpress, 5. jquery tourbus, 7. 3d tour hero, 8. touristguide, 9. joyride 2, 10. bootstrap tour, 11. jquery guide, 12. trip.js.

I am technology enthusiast, developer and love jQuery plugins.

Save my name, email, and website in this browser for the next time I comment.

jQuery Webdesign
Website Themes
Free Templates
CSS CodeLab
Submit Your Tutorial

Best jQuery Website Tour Plugins & Tutorials with Demo

Driver.js : javascript engine to drive user’s focus across the page.

A light-weight, no-dependency, vanilla JavaScript engine to drive the user’s focus across the page.

Simple : is simple to use and has no external dependency at all
Light-weight : ~4kb in size, vanilla JavaScript and no external dependency
Highly customizable : has a powerful API and can be used however you want
Highlight anything : highlight any (literally any) element on page
Feature introductions : create powerful feature introductions for your web applications
Focus shifters : add focus shifters for users
User friendly : Everything is controllable by keyboard
Consistent behavior : usable across all browsers (including in-famous IE)
MIT Licensed : free for personal and commercial use

PageTour.js – jQuery Lightweight Site Tour Guide

PageTour.js – A lightweight tour composer to guide your visitors, onboard new users, highlight new features, make your product easier and build a stunning online user experience.

Display your tour with many patterns
Automatic best position calculation
80+ manual positions variation
Nice overlay options and transitions
Useful theme architecture
Build custom navigation
Easy data injection

jQuery Page Tour Plugin

JQuery-powered tour library that displays information about the page the user is on.

Spotlights DOM objects
Displays a title and description of each DOM object.
Places animated targets around the DOM object to add emphasis on where to look.
Programmatically can move to next/previous items in the tour.
Items can be ordered.
Recalculates positions after window resizes.

iTour : jQuery Easy Tour Plugin for the Complex Interface

The plugin itour gives you the opportunity to tell you about the functionality of any interface. In addition, the plugin «itour» can perform the function of teaching, display the task, prompt you what to do and follow up on implementation of tasks. This is the most flexible and fuktsionalnye plugin among all his analogs.

36 Positions’ Variants
Auto Positioning of Message
Detect Events
Trigger Events
Callback Functions
Map of All Steps
Control of Buttons Text
Scroll to Element

3D-Tour Hero : Script of WebGL Based Virtual Tour

This scripts helps you to add Virtual 3D Tour to your site. Purchase include the source of Visual Virtual Tour Constructor! It helps to create the Virtual Tour in visual mode in your site admin panel!

Maximal Support in Browsers due to WebGL & Canvas Renderers
HTML5 3D-Tour Redactor for Admin Panel
Convenient and Great API
Control Settings (Speed & Direction of ‘Hand-Rotate’, ‘Zoom’, ‘Auto-Rotate’)
Start Camera Direction
Load Animation
Links to 3D Tour creation
Helper to easy Getting the Point on 3D-Scene to link snap
Export & Import player data with all configs in JSON format

jQuery Impromptu : Prompt Box Plugin

jQuery Impromptu is an extension to help provide a more pleasant way to spontaneously prompt a user for input. More or less this is a great replacement for an alert, prompt, and confirm. Not only does it replace these but it also allows for creating forms within these controls. This is not intended to be a modal replacement, just a quick tool to prompt user input in a fashionable way.

ddTour : jQuery Site Tour Plugin

A simple uncomplicated lightweight site tour jQuery solution.

Unlike other tour solutions you keep your code in one place. The tooltip pops up right where you have a description of it.
Traverse to any element by designated class selector
This is a simple grunt stupid solution as they say in the Marine Corps.

TourBus : jQuery Tour/Walkthrough plugin

A jQuery tour/walkthrough plugin for developers. It includes limited automatic behavior, more like a ‘toolkit’ than some of the others out there.

Product Tour with jQuery & CSS3

A responsive tour snippet, with a step-by-step guide to help users understand how to use your website.

Animated Alert with jQuery & CSS3

Animated alerts are the JQuery plugin based on css3 animation. Using it you can effectively communicate to users the right information. There are 68 animations, multiple color themes and types of messages and detailed documentation. Also you can develop your own themes, because of the efficient organization of the code. The plugin works in all modern browsers and on all devices.

Accordion (46)
Animation (1,127)
Articles (56)
Bootstrap (259)
Calendar (61)
Carousel (105)
Chart & Graph (126)
Core Java Script (1,091)
CSS2 / CSS3.0 (1,359)
Drag & Drop (190)
Events (78)
Forms (564)
Gallery (571)
HTML5 (486)
Image Effects (211)
jQuery Mobile (52)
jQuery UI (77)
Layout (45)
Menus (546)
Other API (270)
Other Libraries (15)
Plugins (3,921)
Popup Window (372)
Premium (791)
Responsive (616)
Slider (478)
Snippets (162)
SVG Tutorial (187)
Tables (165)
Text Effect (204)
Video & Audio (197)
Wordpress (59)

3500+ Free CSS Code Snippets

Jquery plugins tags.

Unauthenticated XSS Vulnerability Patched in Slider Revolution Plugin

Slider Revolution

Unauthenticated Broken Access Control

Authenticated Stored XSS

Slider Revolution came to us with a request to audit their product for potential vulnerabilities since they wanted to make sure that their users’ websites were not vulnerable to an attack.

This blog post discusses our audit findings, which we have been authorized to publicize. If you're a Slider Revolution user, please update the plugin to version 6.7.11 or higher.

All paid Patchstack users are protected from this vulnerability. Sign up for the free Community account first, to scan for vulnerabilities and apply protection for only $5 / site per month with Patchstack.

For plugin developers, we have security audit services and Enterprise API for hosting companies.

About the Slider Revolution Plugin

Slider Revolution is a premium WordPress plugin and has more than 9 million active users. Used by everyone — from self-starting business owners to tech-savvy web developers — Slider Revolution continues to be one of the most popular plugins for WordPress.

While Slider Revolution may have got its start as a responsive slider plugin, users are now able to create anything from animated hero images, 3D carousels, split-screen content, one-page websites, and designs you won’t find anywhere else.

The security vulnerability

This plugin experienced an unauthenticated stored XSS vulnerability. As a result, it could have allowed any unauthenticated user to steal sensitive information to, in this case, privilege escalation on the WordPress site by performing a single HTTP request.

This vulnerability occurred because the code that handles input from the user didn’t implement sanitization and output escaping on the slider's parameter data. This case also combined with broken access control on one of the available REST API endpoints from the plugin which allowed unauthenticated users to update slider data.

Chaining both of these conditions, we were able to achieve unauthenticated stored XSS on the plugin. The unauthenticated broken access control vulnerability itself is fixed on version 6.7.0 and assigned CVE-2024-34444 . For the authenticated stored XSS itself, it is fully fixed on version 6.7.11 and assigned CVE-2024-34443 .

The main vulnerability, which is unauthenticated broken access control, existed in the function init_rest_api :

There is a custom REST API endpoint pointing to the save_slider function with the permission_callback set to the check_nonce function. Let's take a look at the check_nonce function:

Notice that there was no permission check on the check_nonce function, however, it only implemented a nonce value check of revslider_actions . After observation, we noticed that the nonce value could be fetched by an unauthenticated user. One of the functions to display the nonce value to an unauthenticated user is the js_add_header_scripts function:

Back to the save_slider , the function itself has only one purpose, to update any slider data including the slider parameter.

We then took a look at how the slider parameter display will be handled and noticed that some of the slider parameters were not properly sanitized or escaped, resulting in a possible authenticated stored XSS, since originally, the slider data could only be modified by administrator role or role that are specifically given access to the Slider Revolution feature. However, since there were quite many vulnerable slider parameters, we will not include them all in this article.

By chaining both the unauthenticated broken access control and the authenticated stored XSS on the slider parameters display, we were able to achieve unauthenticated stored XSS.

Note that this vulnerability was reproducible in a default installation and activation of the Slider Revolution plugin without a specific requirement or configuration. Since the XSS payload was placed on the targeted sliders, this vulnerability also could’ve been easily triggered by any user visiting the targeted sliders.

Since this vulnerability mainly existed because the plugin allowed any unauthenticated users to update slider data or parameters, the vendor decided to entirely remove the affected REST API endpoint. The patch can be seen below:

For the XSS case, the vendor applied proper sanitization and escaping to the affected slider data or parameters.

We recommend applying escaping and sanitization to any stored user input that will be displayed. Depending on the context of the data, we recommend using sanitize_text_field to sanitize value for HTML output (outside of HTML attribute) or esc_html . For escaping values inside of attributes, you can use the esc_attr function. We also recommend applying a proper permission or authorization check to the registered rest route endpoints and not providing sensitive action or process to an unauthenticated user.

Help us make the Internet a safer place

Making the WordPress ecosystem more secure is a team effort, and we believe that plugin developers and security researchers should work together.

If you're a plugin developer , join our mVDP program that makes it easier to report, manage and address vulnerabilities in your software.
If you're a security researcher , join Patchstack Alliance to report vulnerabilities & earn rewards.

Weekly security advice

The latest in security advisories.

Critical Vulnerability Patched in UserPro Plugin

Exploring the Unknown: Beneath the Surface of the Unpatched WordPress SSRF - Patchstack analysis

Exploring the Unknown: Beneath the Surface of Unpatched WordPress SSRF

Critical Vulnerabilities Found in XStore Theme and Plugin

44% Plugin Vehicle Market Share In China — April 2024 Sales Report

Plugin vehicles are all the rage in the Chinese auto market, with plugins scoring 703,000 sales (in a 1.6-million-unit overall market) . That’s up 27% year over year (YoY).

Looking deeper at the numbers, BEVs were up 10%, while PHEVs did even better, jumping 65% in April. Breaking down plugin sales by powertrain, BEVs had 59% of sales, below this year’s average of 65%, proving the rising popularity of plugin hybrids in this market.

The year-to-date (YTD) tally is around 2.5 million units, a significant rise over the 1.9 million in the same period of 2023.

Share-wise, April saw plugin vehicles hit 44% market share! Full electrics (BEVs) alone accounted for 26% of the country’s auto sales . This pulled the 2024 share also to 40% (26% BEV), and with the market still with plenty of room for growth, the first half of the year should end above 40%. ( And maybe above 50% by year end?)

Comparing this result with April 2023, at the time, the plugin share was 35% (24% BEV), while the YTD numbers were at 33% share (23% BEVs), which means that, while BEVs are experiencing moderate growth (23% vs. 26%), the PHEV share is growing faster (10% vs. 14%). This is something to think about….

The podium was 100% plugins and 100% BYD, with the Tesla Model Y being the best selling non-BYD model, in 4th. The best selling ICE model was the Nissan Sylphy, in 5th, with some to 24,000 units sold. The Japanese model was the first of three ICE models in the top 10.

Benefitting from its recent War on ICE , in the Chinese market, BYD placed five six models in the overall top 10! Price cuts from the Shenzhen make are pressuring not only the ICE competition, but also its plugin adversaries….

Looking at the several categories, the A (city car) and D (midsize) segments continue to have 100% PEV podiums, while the C (compact) segment is the only one where ICE vehicles are still a majority. BYD’s compact hatchback is surely needed…

Anyhow, with the exception of the C segment, where the Nissan Sylphy still soldiers on as the sole ICE category leader, BYD is ahead in every other category. The (not so) big surprise comes from the new BYD Yuan Up, which joined the podium in the B segment (subcompacts), with that category now having a full BEV podium.

Another surprise was AITO’s M9 yacht landing in 2nd place in the full size category, surpassing the ICE category leader, and more importantly for the Huawei-backed brand, going above the Li Auto models….

Best Selling EVs — One by One

Regarding last month’s best sellers table, the top 4 best selling models in the overall table exactly mirrored the ones in the EV table — which once again proves the merging process that we are witnessing between the two tables. Here’s more info and commentary on April’s top selling electric models:

#1 — BYD Song (BEV+PHEV)

BYD’s midsize SUV is the uncontested leader in the Chinese automotive market, and the star player retained the leadership position in April, keeping its Qin Plus sibling in the runner-up spot. The midsize SUV scored 54,300 registrations , with 8,403 units belonging to the BEV version. Will the Song continue to rule in the Chinese automotive market? Well, it depends on the competition, especially the internal competition. Currently, the Song only has the recently introduced Song L as internal competition, but the upcoming Sea Lion 07 and the premium car-on-stilts Denza N7 (a car that sits somewhere between the Tesla Model Y and the Zeekr 001) are both also wanting a piece of the pie. This is probably too much competition inside BYD’s midsize SUV portfolio for the Song to continue clocking 50,000 sales/month, a necessary threshold to continue leading the cutthroat Chinese auto market, but thanks to its recent price cuts, the Song is continuing its success story.

#2 — BYD Qin Plus (BEV+PHEV)

Along with the Song, the BYD Qin has been a bread and butter model for the Chinese automaker for a long time. The midsize sedan reached 46,314 registrations in March (15,479 units belonged to the BEV version) . This allowed it to be second in the overall market, with the sedan benefitting from being the first pawn launched by BYD in its recent “War on ICE” campaign (aka price cuts). Prices now start at 80,000 CNY ($12,000), and demand is bound to stay high. Despite the strong internal competition — a new, fancier Qin L and a Seal 06 PHEV are said to be launching soon — expect BYD’s lower priced midsize sedan to continue posting strong results at the cost of the competition, EV or ICE, all while keeping its most direct competitors — the Tesla Model 3, Wuling Starlight, and GAC Aion S — at a safe distance.

#3 — BYD Seagull

Things continue to go well for the hatchback model, with the small EV securing another top 5 presence thanks to 28,797 registrations . With part of production now being diverted to export markets, it seems demand for the little Lambo is now at cruising speed in China. The perky EV is now in top 5 territory. Even with its attention now diverted to other geographies, like Latin America and Asia-Pacific, expect the little BYD to continue being part of the BYD pack that populates the Chinese top 10. What about export prospects to Europe? There are talks that the model will be launched in Europe in the second half of the year. Of course, do not expect the low prices in Europe that the Seagull has in China. When the city EV lands, as the Dolphin Mini, European prices will be significantly higher for a number of reasons (tariffs, VAT, etc.), but I wouldn’t be surprised if it started at 17,999€ … which would still be a killer price considering the direct competition is north of 20,000€.

#4 — Tesla Model Y

Tesla’s star model got 26,356 registrations , which allowed it to land in 4th in the overall ranking. It seems the US crossover is at cruising speed in the Chinese market, having lost just 2% of volume YoY in April, keeping volumes at around 25,000–30,000 units a month, peaking at about 45,000 units in the last month of the quarter. While that doesn’t make it the best seller in the market, it allows the Model Y to stay Tesla relevant in the Chinese market — no small feat, considering current market trends (it was the only foreign model in April’s top 20) . And this somehow disguises the frosty reception that the refreshed Model 3 had in this market, with the sedan registering just 5,065 units last month, a 62%(!) drop YoY . With this in mind, if i was Tesla, I would be careful refreshing the Model Y … best to do it late, but with purpose, than to play fast and loose ….

#5 — BYD Yuan Plus

A big beneficiary of the recent price cuts, the compact crossover returned to the top 5 thanks to 23,327 sales , keeping its most direct rival, the Aion Y (#13 with 11,500 registrations) at a safe distance. With the upcoming launch of the BYD Yuan Up, sales of the Yuan Plus could suffer. The new crossover is not that much smaller (4,32 mt vs. 4,46 mt), but it is significantly cheaper (CNY 97,000 vs. CNY 120,000) AND has a more normal design, especially inside, which might put off some but could be a plus side for others. One thing is certain: the Yuan Up will be another sales success for BYD, even if at the cost of other BYD models, like the Dolphin or the Yuan Plus. Now, about that Seal hatchback….

BYD’s Domination in the Top 20

Looking at the rest of the best seller table, many of the highlights also comes from BYD. The Han flagship sedan returned to form and ended April in 6th, with 20,535 sales. Just below it, the #7 Destroyer 05 broke its personal record for the second month in a row, registering 20,363 units. Overall, there were six BYDs in the top 7 positions. And that’s not all ….

The poor showing from the BYD Dolphin, 17th, with just 9,995 units, has a reason. That reason is called the BYD Yuan Up. The value-focused crossover joined the table, in #19, with 8,620 units — in only its second month on the market! Expect the small crossover to jump a few more positions in May (top 10?), but for now, BYD’s new model entry into the table allowed the Shenzhen OEM to have 10 representatives in the top 20!

And this kind of domination is happening in a time where BYD has several potential best selling models (Qin L, Seal 07, Seal 06, Seal hatchback …) getting ready to land. Sure, at this point, these models will likely cannibalize existing BYD models, but they will likely also steal sales from the competition.

Although, one starts to wonder at what point BYD’s new model launch fever will start to get counterproductive…. How much is too much?

More Top 20 Notes

Outside the BYD Galaxy, I have a few more notes on the April top 20. The AITO M9 joined the table, jumping to #8, with a record 15,139 sales, 2,030 of them belonging to the BEV version. The flagship AITO is the make’s most recent model, and probably the best of the make so far, so expect the 5.2 meter (205 inch) land yacht to become a frequent presence in the table and a serious contender to the XXL SUV category title.

The Zeekr 001 was 12th, thanks to 11,267 sales, its best result in 16 months, with the flagship model taking full profit from the recent refresh.

A final note on the segment distribution of the top 20: the most represented category is full size models, with 7 models on the table — or more than one third of all models here! Gone are the days when the moniker Chinese EVs rhymed with tiny, cheap, underpowered, tin cans ….

Outside the top 20, there are several models worth looking into, like Changan’s new EV brand, called Qiyuan, which had its A05 sedan reach 5,317 sales. There’s NIO’s ET5, which reached 6,710 sales in April, its best score since last August, with the interesting fact that the Touring version (aka station wagon) outsold the sedan version in a 2-to-1 ratio. With the Buick Velite 6 (7,538 sales in April) consistently punching above Buick’s weight, can one say that station wagons are starting to get trendy in China? Discuss.

One of Huawei’s other brands , Luxeed, made in cooperation with Chery, is seeing its S7 full size sedan reach significant volumes. It reached 5,012 units in April. With AITO models going after Li Auto’s full size SUVs, will Huawei’s Luxeed brand also be successful in beating the BYD Han and Zeekr 001?

Also ramping up is Leap Motor’s C10 compact crossover, with the startup’s most recent model having 5,368 sales in April, 4,024 of them belonging to the BEV version. This is Leap Motor’s most important model so far, because not only is it the one set to be the brand’s best seller in China, but also because it is the first one developed from the beginning with overseas markets in mind, and with the recent association with Stellantis now coming to fruition, we can expect this crossover to land on European shores this year, as well as in other markets soon after.

Last, but surely not least, a mention goes out to the Xiaomi SU7 landing in April. It is a car with unbeatable value for money. It is the size of a Tesla Model S, has air suspension, has a 0.195 drag coefficient, has 800-volt architecture, has 74 kWh LFP or 101 NMC batteries with a promise of a 150 kWh version coming later on, and all of this for Tesla Model 3 prices! That is … quite an offer.

No wonder they have already locked in some 100,000 orders. Not reservations, actual orders. So, it is not surprising that the SU7 landed with a significant 7,058 registrations, and aims to achieve some 100,000 deliveries this year alone!

With the electronics giant preparing the SUV version of the SU7 for 2025, and a smaller, lower-cost model set to land in 2026, Xiaomi could be a disruptive force on the market.

The 20 Best Selling Electric Vehicles in China — January–April 2024

Looking at the 2024 ranking, there’s nothing new in the podium positions, with the podium bearers BYD Song, BYD Qin Plus, and Tesla Model Y safely in their positions.

Due to a bad month for the AITO M7 (#18 in April), the 4th placed BYD Seagull distanced itself from the full size SUV, while the #6 BYD Yuan Plus now has the AITO model in shooting range.

The first position change happened below them, with the BYD Han jumping two positions, into 7th, while its smaller sibling, the Destroyer 05, was also up, in this case to 9th.

On the second half of the table, both Aion models, the S and Y, and the Wuling Bingo benefitted from slow months from the Changan Lumin (6,890 units in April) and Tesla Model 3 (5,065 units) to jump two positions each. The small hatchback is now in 12th, while Aion’s sedan is now 13th and the crossover-MPV mashup is 14th.

With the Tesla Model 3 now #16 and no other foreign model close to the top 20, it is becoming increasingly possible that, by the end of the year, the Tesla Model Y could be the only foreign representative among China’s 20 best selling EVs.

Regarding the lower positions on the table, the BYD takeover continued, with the Denza D9 MPV climbing two spots on the chart to #18.

Finally, more than one third of the models on the table were either crossovers or SUVs, with the eight representatives on the table providing proof of the popularity of these body types.

Changes in the Overall Brand Ranking

In April, the top three positions mirrored the 2023 full year ranking, with BYD on top followed by Volkswagen and Toyota. The dynamics are quite different, though. BYD (240,000 sales) grew 31% YoY, while #2 Volkswagen (136,000 sales) was down by an awful 22% and Toyota (101,000 sales) was even worse, falling off a cliff by 32%. So, while the first place automaker is still rising fast, the other two are losing significant ground in a fast changing market.

Confirming the domestic takeover , #4 Geely (79,000 sales) had a 31% growth rate, mirroring BYD’s growth rate. On the other hand, #5 Honda, the 4th best selling brand in 2023, had 77,000 sales, a 19% drop YoY.

Add this to the fact that #14 Tesla is following the downward trend of foreign OEMs, having dropped 21% YoY in April, and the fact that the only brands in the overall top 20 to grow more than 10% were domestics (BYD, Geely, Chery, AITO, and Jetour), and the prospects for foreign makes looks pretty grim right now.

The only foreign brand in the top 20 to grow in sales was #6 Audi, which was up by … 1%. On the other hand, and looking below the top 20, there are foreign brands that are basically being wiped off the table, like Cadillac, down 50% YoY, Chevrolet, down 78%, Citroen (-50% YoY), Skoda (-55%), and Infinity (-62%).

Auto Brands Selling the Most Electric Vehicles in China

Looking at the auto brand ranking , there’s no major news. BYD (29.8%, up from 29.3%) tightened its grip on its leadership position, and there’s really no way to see this domination ending anytime soon.

Things get more interesting below, though. Due to sales bleeding from #2 Tesla (6.5%, down from 7.1%) and #3 Wuling (5.3%, down from 5.8% — SAIC’s low cost brand is one of BYD’s War on ICE victims) , both brands have seen the competition getting closer.

#4 Geely also suffered from the recent BYD price cuts, but because it has a broader lineup, it has seen its share drop only slightly, from 4.7% in March to 4.6% at the end of April. The Chinese brand is now less than 1% below the 3rd position and less that 2% share from #2 Tesla. Will the upcoming Geely Galaxy E5 allow the Taizhou brand to reach the podium? Or maybe even go after the #2 spot? Being a compact crossover, it should remain immune to the current Xiaomi SU7 black hole effect….

Due to the surprisingly good result of the M9, for once, #5 AITO (4.4%) resisted the other black hole effect in the Chinese market, BYD. The startup brand lineup is still too small. One bad month from the M7 & M9 models and things go south quite fast. Fortunately, the refresh of the currently moribund M5 midsize SUV is coming and could provide a little more breathing room for AITO’s lineup.

Finally, Li Auto, despite also losing share, contained its losses (4.2% now vs. 4.3% in March). With the recent launch of the L6 midsize SUV, its cheapest to date, we could see it surpass AITO soon and return to the top 5.

Auto Groups Selling the Most Electric Vehicles in China

Looking at OEMs/automotive groups/auto alliances , BYD Group is comfortably leading, with 31.9% share of the market, a 0.7% gain in April. That increase in share was thanks to the strong result of the namesake brand, but also thanks to good results from its premium branches, Denza, Fang Cheng Bao, and Yangwang. At this moment, it seems BYD has its domestic market domination assured, replicating what Tesla is doing in the USA … and Volkswagen Group should have been doing in Europe.

Geely–Volvo is a distant runner-up, with 8.4% share, having gained a little bit of ground over #3 SAIC (8%). Although, one should highlight that both lost share last month, with both OEMs being hit by BYD’s recent price war.

#4 Tesla (6.5%, down from 7.1%) now has #5 Changan looking to reach the 4th position, but Changan itself cannot be too happy with its performance. Despite a good result from its new Qiyuan brand, it also lost share (6.5%, down 0.2%) in the current price war blood bath.

Latest CleanTechnica.TV Videos

Share this story!

José pontes.

Always interested in the auto industry, particularly in electric cars, Jose has been overviewed the sales evolution of plug-ins on the EV Sales blog, allowing him to gain an expert view on where EVs are right now and where they are headed in the future. The EV Sales blog has become a go-to source for people interested in electric car sales around the world. Extending that work and expertise, Jose is also market analyst on EV-Volumes and works with the European Alternative Fuels Observatory on EV sales matters.

José Pontes has 478 posts and counting. See all posts by José Pontes

IMAGES

Top 10: Best Tour (website guide) Javascript and jQuery plugins
Top 10: Best Tour (website guide) Javascript and jQuery plugins
Best Free Guided Tour JavaScript Plugins
10 Best Tour Plugins To Guide Visitors Through Your App (2022 Update
10 Best Tour Plugins To Guide Visitors Through Your App (2024 Update
10 Best Tour Plugins To Guide Visitors Through Your App (2023 Update

VIDEO

Google I/O 2010
Tour de Hongrie feladat
Website Tour (Javascript)
TourJS: Interactive Tooltip-style Guided Tour Example
Responsive Travel Website Using HTML CSS & JavaScript || Part Four
Create Tour in React JS

COMMENTS

10 Best Tour Plugins To Guide Visitors Through Your App ...
Best Vanilla JavaScript Tour Plugins. Simple Step By Step Site Tour Plugin. Intro.js is a simple and fast js library that makes it easier to create Step By Step website tour guide with keyboard and mouse support. [ Demo] [ Download] Responsive Guided App Tour In JavaScript - shepherd. shepherd is a JavaScript library that creates an ...
TourGuide JS
TourGuide is a Javascript library written for creating user tours and on-boarding steps for your apps. ... Creating a tour is simple and takes only a few steps to get started. Add the [data-tg-tour] attribute to elements that you want to include in your tour. This attribute should contain the relevant text for the tour guide step.
7 Awesome JavaScript Product Tour Libraries
4. Chardin.js. Inspired by Gmail's new composer tour, Chardin.js is a simple overlay of instructions on existing elements. It uses a JQuery plugin to display instructions. The GitHub page contains the instructions and documentation and has 4.9k GitHub stars.
Shepherd
Shepherd is a JavaScript library that helps you create interactive tours for your app. You can use it to highlight features, provide tips, and guide users through complex workflows. Learn how to use Shepherd with the documentation, demo, and examples.
User Onboarding and Product Walkthrough Library
Intro.js is a lightweight JavaScript library for creating step-by-step and powerful customer onboarding tours ... method configures the library and starts the product tour. introJs ... However, if you want to use Intro.js in your commercial app, website or plugin, you would need to obtain a commercial license. Starter $ 9.99 /lifetime. One ...
Top 10: Best Tour (website guide) Javascript and jQuery plugins
In this top, we are going to share with you 10 of the best guided tour plugins made in VanillaJS and jQuery. 10. Anno. Github. Anno is a step-by-step guides plugin for powerful web apps. Anno.js is built to be extensible, the source is about 500 lines of literate coffeescript; you can read the annotated source in just a few minutes.
10 Best JavaScript Product Tour Libraries for User Onboarding
Let's take a look at the 10 best JavaScript product tour libraries. 1. Intro.js. Intro.js is not just a random open-source library. It is quite well-known, well-supported, and widely used. In fact, if you're looking for a reliable JavaScript product tour builder, Intro.js is probably where you want to start.
shepherd-pro/shepherd: Guide your users through a tour of your app
Shepherd. Shepherd makes it simple to create custom user on-boarding tours, trainings and announcements to drive user adoption. Shepherd enables you to guide users through a custom tour or journey within your app or website. Highly customizable with minimal styles, Shepherd allows for powerful customization while being easy to use.
The best JS libraries for user tours & application on-boarding
The benefits of using a JavaScript tour library are numerous. They help to improve user experience and accessibility by providing a guided and structured way to introduce users to a product or service. ... It provides an easy-to-use, customizable UI, with an intuitive API and flexible plugin system. Website: https://shepherdjs.dev/ Intro.js (4/ ...
Create Interactive Guided Tours In App
How to use it: 1. Install & import the TourGuide.js. 2. Creata a new instance of the TourGuide.js. 3. Create tour steps using HTML data attributes: TourGuide.js Library Example. A customizable, framework-agnostic, and feature-rich guided tour/onboarding library written in JavaScript (TypeScript).
Vue Tour
Vue Tour is composed of just two Vue components and a very small JavaScript file. Simple Add an array of steps in your component and a 'v-tour' component in your template and you're good to go!
Best Free Guided Tour JavaScript Plugins
Interactive Walkthrough Plugin In Vanilla JavaScript - Steptip.js. A Vanilla JavaScript walkthrough (guided tour) library to generate interactive feature/product/tutorial tours on the website. Best free JavaScript plugins to implement the guided tour on your web applications.
Vue Tour is a lightweight, simple and customizable guided tour plugin
Vue Tour is a lightweight, simple and customizable guided tour plugin for use with Vue.js. It provides a quick and easy way to guide your users through your application. - pulsardev/vue-tour ... javascript vue tour Resources. Readme License. MIT license Activity. Custom properties. Stars. 2.4k stars Watchers. 26 watching Forks. 278 forks Report ...
Bootstrap Tour
Quick and easy way to build your product tours with Bootstrap Popovers.
10 jQuery Plugins to Create Website tour
6. Intro.js. Intro.js is a lightweight plugin to create step By step website tour guide. It uses data attributes for navigation and also has support navigation using Keyboard keys. 7. Mytour. Mytour is a jQuery plugin that provides an easy and lightweight way to create an enjoyable virtual tour for your site.
10+ jQuery Web Tour, Help and Instructional Plugins
Guidely - jQuery Website Tours. 9. jQuery E-Help. 10. bootstrap-tour. 11.Tourist.js. 12.Powertour.js. Frequently Asked Questions about Web Tour Instructional Plugins. Take your user experience ...
15 Best jQuery Site Tour Plugins
Power Tour is a powerful creative jQuery tour plugin, which can be used as a tour, helpers, guides or tooltips. The plugin is pretty powerful and has a lot of options which gives you the power to build a very cool tour. 6. Trip.js. Trip.js is a useful plugin that can help you customize a tutorial trip easily. The steps and content for the ...
25+ Free JQuery Plugins For Doing Guided Tours Through A Website
This jQuery site tour plugin loads the content inside Bootstrap Popovers. Tour steps + the content are both defined in JavaScript and it has lots of options to customize the behavior. 16 - TourTip - jQuery Overlay Tour. Demo Download. TourTip is a simple library for creating guided tours through your application. It's better suited to ...
Javascript tool for single-page applications guided tour
5. Sideshow is a modern and powerful library for creating interactive tours for web applications and sites. More than just guiding your users, Sideshow can interact with them: Highlight the part you're talking about in each step (a form, div, image, field, and so forth), by masking the rest of the screen (Sideshow doesn't use the z-index ...
Product Tour in CSS and jQuery
Today we release a handy tour snippet powered by CSS and jQuery, characterized by a user experience that changes according to the device size. Here is a quick animation that shows the difference between the tour on small devices vs bigger ones: 👋 A new version of this component is available. Download now →.
12 jQuery Website Tour Plugins
This script helps you to add Virtual 3D Tour to your site. This plugin comes with convenient API , control settings, load animation, links to 3D tour creation, start camera direction, easy to use and detailed documentation. 8. TouristGuide. This jQuery Plugin is a handy tool tour create website tours for your visitors.
25+ jQuery Website Tour Plugin with Demo
jQuery Page Tour Plugin. JQuery-powered tour library that displays information about the page the user is on. Displays a title and description of each DOM object. Places animated targets around the DOM object to add emphasis on where to look. Programmatically can move to next/previous items in the tour.
XSS Vulnerability Patched in Slider Revolution Plugin
For plugin developers, we have security audit services and Enterprise API for hosting companies. About the Slider Revolution Plugin. Slider Revolution is a premium WordPress plugin and has more than 9 million active users. Used by everyone — from self-starting business owners to tech-savvy web developers — Slider Revolution continues to be ...
Tributes pour in for PGA Tour event winner Murray
World number one Scottie Scheffler led the tributes to Grayson Murray after the shock death of the two-time PGA Tour winner, a day after he pulled out of the Charles Schwab Challenge in Texas.
44% Plugin Vehicle Market Share In China
The podium was 100% plugins and 100% BYD, with the Tesla Model Y being the best selling non-BYD model, in 4th. The best selling ICE model was the Nissan Sylphy, in 5th, with some to 24,000 units sold.
DPW Tour
Bet on DPW Tour - European Open 2024 Futures Odds at FanDuel Sportsbook. Check out today's DPW Tour - European Open 2024 Futures betting odds at FanDuel Sportsbook. See the most recent DPW Tour - European Open 2024 odds, place your bets, and build your parlays on all upcoming DPW Tour - European Open 2024 matchups.

jQuery Script - Free jQuery Plugins and Tutorials

The Best Guided Tour Plugin:

Table of contents:

Best jQuery Tour Plugins:

Interactive Tooltip-style Guided Tour Plugin - jQuery TourJS

Interactive Visual Guide Plugin For Bootstrap - jQuery Tour

jQuery Feature Tours Plugin - Joyride

Guide Your Users Around The Web Application - jQuery Tour.js

Best Vanilla JavaScript Tour Plugins

Responsive Guided App Tour In JavaScript – shepherd

Create Interactive Guided Tours In App – TourGuide.js

Easy Guided Tour Plugin For Bootstrap 5 - bs5-intro-tour

Feature-rich Step-by-Step User Guide In JavaScript – webtour.js

More Resources:

You Might Also Like

Add Your Review

7 Awesome JavaScript Product Tour Libraries

Build a Clear UI (Before Using Guide Libraries)

Building a UI Component Library for Your Startup

1. Intro.js

Intro.js is a free and open-source library, however, if you are using the library for your business you can subscribe…

How to Install

See the Users

2. Shepherd

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

3. Bootstrap Tour

Bootstrap Tour

4. Chardin.js

Chardin.js - Simple and beautiful overlay instructions for your apps.

5. PageGuide

Pageguide by SolarWinds

6. Hopscotch

LinkedInAttic/hopscotch

7. Tourist.js

easelinc/tourist

How to Easily Share Vue Components Between Applications

Written by Shanika Wickramasinghe

More from Shanika Wickramasinghe and Bits and Pieces

Playwright vs Puppeteer: Choosing the Right Browser Automation Tool in 2024

7 Node.js Design Patterns Every Developer Should Know

5 Essentials for Modern Frontend Architecture

How to Resolve ERROR: could not resize shared memory segment “/PostgreSQL” No space left on device…

Angular v18 is now available!

Apple’s all new design language

Interesting Design Topics

Stories to Help You Grow as a Designer

Stories to Help You Grow as a Software Developer

16 little UI design rules that make a big impact

I Built an App in 6 Hours that Makes $1,500/Mo

Advanced JavaScript Concepts: 2024

Stop Using localStorage

Powerful User Onboarding

Install Intro.js

1 Include the JavaScript and CSS

2 Call the introJs.start() method

Easy to Use

Customizable

Open-source

Commercial license

5 Bad UX Examples You Must Avoid

Best Tools for Startup Growth Hackers in 2021

Five Amazing Benefits of User Onboarding You Should Know

Top 10: Best Tour (website guide) Javascript and jQuery plugins

Carlos Delgado

9. jQuery guide

8. aSimpleTour

7. Pageguide

6. Bootstro.js

5. Hopscotch

4. Enjoyhint

3. Intro.js

2. Shepherd

1. Bootstrap Tour

Honorable mentions

Related Articles

Top 10 : Best autocomplete jQuery and javascript plugins

Top 10 : Best notification libraries and plugins for Javascript and jQuery

Top 10 : Gallery and photo viewer plugins for javascript and jQuery

Top 5 : Best javascript and jQuery tooltip plugins

Top 5: Best javascript video background plugins