An easy step-by-step tour for the complex web interfaces

This script allows to create the pages tutorial for 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. You might have noticed that Facebook used something like pages tutorial to explain the new features of the profile.

The idea is to add a certain class to elements that you want to guide the user through and explain what they do. We will use a little tooltip to show what that tour point is about, and a navigation will allow the user to go back and forth, to end the pages tutorial or to restart it.

A responsive product tutorials, with a step-by-step guide to help users understand how to use your product.

A responsive product tutorials, with a step-by-step guide to help users understand how to use your product. Onboarding processes are essential to let users familiarize with your product/website/app functionalities as soon as possible.

A responsive product tutorials, with a step-by-step guide to help users understand how to use your product. Today we release a handy product tutorials powered by CSS and jQuery, characterized by a user experience that changes according to the device size.

A responsive product tutorials, with a step-by-step guide to help users understand how to use your product. On all devices, the product tutorials is open as a modal window (with a smooth scale effect achieved adding a CSS3 transition to the scale property of the list items): each step shows a title, a description and an image representing the feature being displayed. The css for this version is pretty straightforward.

A responsive product tutorials, with a step-by-step guide to help users understand how to use your product. 36 different classes have been defined to control the position of the tooltip relative to the dot indicator.

A responsive product tutorials, with a step-by-step guide to help users understand how to use your product. We used jQuery to implement the product tutorials navigation functionality (with keyboard, touch swipe and previous/next navigation).

This jQuery based web page tutorial plugin offers an easy way to guid your visitors and customers through your website or application and contains a lot of options and a powerfull API to fit your needs.

This web page tutorial plugin comes with the ability to automatically select the position of the dialog box, depending on the screen size and position of the page.

This means that on any device you can always see the description of the step and the navigation buttons.

Setting up step by step guide is simple, just choose the needed options in builder , and replace it value. Then you will get the full code to connect the step by step guide to your site that you need to copy into your page code

Step by step guide 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 used some fancy CSS.

Step by step guide will work with any element in your markup, the only requirement is that the element must have a unique id to tell the Step by step guide plugin it is a stop of the tour. You will use the id or class of each "stop" when you create your tour outline in the next step. In case of classes, step by step guide will select the first matching element.

itour is a simple library for creating page guide through your app. It's better suited to complex, single-page apps than websites. Our main requirement was the ability to control the interface for each step. For example, a step of page guide might need to open a window or menu, or wait for the user to complete a task. Tourist gives you hooks to do this.

Specify steps explaining elements to point at and what to say. Tourist manages moving between your steps.

Tourist was designed for complex apps rather and websites. It's easy to: 1. control the interface for each step 2. move to the next step only after the user completes a specific task Just use the functions in your step options of your page guide.

itour is a powerful jQuery site guide plugin, which can be used as a tour page, helpers, guides or tooltips. The jquery tour plugin is pretty powerful and has a lot of options which gives you the power to build a very cool and creative tour.

To help you build a site guide we have included several examples on how to build different kinds of tour page. Examples include from a basic site tour, multiple pages site guide, using callback functions and using validation. All examples are included in the zip file.

The site guide plugin alows you to setup multiple tours with multiple steps on the same page. You even can continue on the next page with the tour page if needed.

All steps of site guide need to have an unique id, this id is used to place the content in the right wrapper(step). You can not use the same step serveral times in the site tour, as this will show an empty wrapper(step).

The website tour plugin provides several callback function which are fired at certain points in the tour. These functions can contain your own custom code to extend the power of this website tour plugin even more.

Manage the website Tour jQuery with the navigation actions/buttons. These custom dataset attributes can be used with almost every kind of element inside or outside the steps. Navigation actions are best used with a anchor element.

The website tour plugin at defaults supports the use of keyboard navigation, this allows you to navigate through the website Tour jQuery with the use of a keyboard.

All targets can be disabled by using the disable parameter for this element.

The website tour plugin provides multiple public API methods which can be used to update, run or destroy a tour. See the reference tab for more info about the available API methods.

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

This jquery tour is a handy tool tour create website tour jquery for your visitors. It's the perfect tool to gain attraction and reach more time spent on your website. M

Usefull for introduce your site for new visitors, to introduce the new design of your site or to help users to learn the usage of your site.

The website tour jquery plugin is cross-browser compatible and works out of the box, it's horribly easy to use and customize and has advanced control engine. Users hardly accept old sites with new design as they feel uncomfortable. The jquery tour will help you to solve this!

Have you ever wished there was an easy way to guide your users through different features of your site? We have now made it easy for you to create a jquery help plugin of any part of your website!

This jquery site tour allows you to create multiple tours on your website with jQuery. This can be very useful if you want to explain your users the features of your website in an interactive way.

You can create website tour that are spanning over multiple pages and link tours together. Easily add your tour slides with our jquery help plugin.

If a visitor interrupted jquery site tour for some reason, then the next time he will be asked to go on product tour with the same place.

itour is a powerfull website tour plugin, which can be used as a page tour, site help, guides or tooltips. Use the website tour plugin for your website, products, applications, landing pages or something else.

The page tour is very easy to use and allow you to create a cool site help in simple steps.

Website tour plugin gives you the ability to create amazing design of page tour which easily arouse visitor interest, with a User Friendly builder, highly customizable solution to build your site help into your site.

When new users visit your website or product you should demonstrate your product features using a jquery 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 virtual tour jquery.

itour is developed to enable web and mobile developers to create a jquery step by step introduction easily.

It is always hard to guess how users browse + how they perceive the content and flow of a website or web app.

However, it is always a great idea to guide users whenever they want. Nothing to lose on that for sure.

There are awesome virtual tour jquery plugin that ease guiding users and creating site/page jquery step by step tours for them. It are stylish, customizable and simple to use.

site tour jquery focuses on objects beautifully and pretty easy-to-setup. While a floating box helps managing the interactive tutorials, tooltips (that can be positioned however wanted) help focusing on the elements.

The steps are highlighted beautifully and a sticky footer/header allows navigating through them while providing extra info about each step. This is a very nice jquery virtual tour plugin by the talented masscode.

Site tour jquery is works well in responsive layouts and has almost everything customizable. A simple-yet-useful interactive tutorialsplugin where all the details and content are defined in JS. There are options to customize the content and position of the tooltips.

It is jquery virtual tour plugin to show popovers on a page's elements to show/guide your users around. especially first-time users.

I wanted a simpler, less things-happen-automatically toolkit for making website introduction.

jQuery interactive tutorials takes more of a toolkit approach than some of the alternatives as Bootstrap Tour or intro js, that try to have focusing elements, auto-progress with timers and indicators, on and on, all built in... too much stuff! Less is more!

The jquery guided tour plugin has lots of options to customize the look or delay between steps, setting the initial item to be shown and more.

Start by including the website introduction plugin and base styles on your page, of course. Then we can define some 'legs' of our interactive tutorials. Imagine you have a page with some stuff you want to lead the user through, maybe some elements.

Lastly, maybe you want to draw a lot more attention to a specific target element as the website introduction is going on. We want the rest of the page to gray out, and only the element pointed to by this leg to be visible as usual. Easy.

For websites, it's quite common that you need to have a interactive tutorials trip to teach new comers how to user your own services. In addition to this, when there is any new feature coming up, you also need that to make sure your hard works do have been seen and used by users. Same like you, we have been making tons of routine works like that and that's why we are going to make a super lightweight library - website introduction itour that you can use for most cases ! Hope you will like it :)