Create a Product Tour for your users

iGuider Product Tour will teach all users who do not want to read the documentation to use your app. iGuider is a jQuery plugin that allows showing people how to use your site: admin panel, personal account, crm system, game web projects and other complex and confusing pages.

iGuider - Product Tour - Interactive Walkthroughs - Website step by step Guide - 4

Grand Features

A huge number of possibilities are available thanks to the competent organization of the parameter module, callback functions and methods built into the iGuider plugin.

iGuider - Product Tour - Interactive Walkthroughs - Website step by step Guide - 7

All Features

Multi-page tour between adjacent pages
Multi-page tour between pages of different nesting levels
Continue the tour after move to other page
Saving the progress of the tour after updating the page
Check conditions
Control the tour using the keyboard
Waiting for an item to appear
Control of message width.
Automatic generation of the start button of the tour.
Automatic generation of the list of tours
Tour Builder (Enables Generate your tour code in a user-friendly interface)
Chrome Extension (Gets an unique selector code for any element on the page)
Additionally present WordPress version of plugin
Multiple targets same time
Three shapes of highlighting: rectangle, circle and rounded rectangle
Templating
Styling
Processing code color in any format
Autopilot
Tracking position of the dragged element
Ability to continue the unfinished tour
Smooth change of color and opacity for each step individually
Management from outside
The intro slide in center of screen
Displays the tour covers
Works with dynamic content
Works with hidden content (select, tabs etc.)
Localization (60 languages)
Different way of searching elements. Supports most CSS3 selectors, as well as some non-standard selectors.
Supports operating system “windows (7,8,10)”, MacOS, iOS, Android
Supports brousers IE 11+, Firefox, Chrome, Safari
Detailed Documentation and Presentation
37 Positions’ Variants
Auto Positioning of Message
Detect Events
Trigger Events
Callback Functions
Map of All Steps
Control of Buttons Text
Scroll to Element
Highlighting of passed steps
Responsive
Compatibility with the “Select2” plugin
Compatibility with the “jQuery UI Tabs”
Compatibility with the “Bootstrap Collapse”

Themes

There are many pre-installed style solutions, and their number will increase.

Need a simpler plugin?

We present the best help-tour plugin of 2018: “iTour”. This is a simplified version of the “iGuider” plan, which has fewer features, and is slightly inferior in speed.

iGuider - Product Tour - Interactive Walkthroughs - Website step by step Guide - 20

Update History

Version 5.5 (Mar 28, 2022)

BUGFIXES

Fixed the position of the block with the list of tours, which is available when using the “button” method.

Version 5.4 (Dec 4, 2021)

BUGFIXES

Fixed a bug of a multi-page tour that occurred when the first step was on another page.

Version 5.3.1 (Nov 22, 2021)

NEW

Added pages with example for “autofocus” parameter
Parameter “autofocus” added to Builder (iGuider Visual Editor)

Version 5.3.1 (Nov 21, 2021)

BUGFIXES

Fixed a bug in the tour builder on Tour Map tab.

NEW

Added description to the parameter table for: “modalTemplate” and “mapTemplate” parameters
Added pages with examples to test the tour on mobile screens
Added pages with examples for “modalTemplate” and “mapTemplate” parameters
Added a detailed description of how to install a plugin on WordPress
A guide has been added to the tour builder, which will help you quickly understand its work

CHANGES

The code for connecting the plugin to the page is partially changed: translated from jQuery to native javascript. Required only when connecting the plugin to WordPress site pages.

Version 5.3.1 (Nov 12, 2021)

BUGFIXES

Fixed a bug in the tour builder on Steps tab.

Version 5.3 (Nov 11, 2021)

BUGFIXES

Fixed a bug in the tour builder, due to which the window with the description of the step was not displayed.

CHANGES

Fixed demo page with combined target selection

Version 5.3 (Nov 09, 2021)

NEW FEATURES

Added the ability to specify the offset of the tour start button

Version 5.2 (Nov 07, 2021)

NEW FEATURES

Added new theme: bootstrap

ADD DEMO

Added demo page with example, which illustrates the tour code with automatic start periodically at a specified time interval (every one month)

Version 5.2 (Nov 03, 2021)

BUGFIXES

Fixed a bug that occurred when a multi-page tour was running and the “loc” parameter was missing for a step.

CHANGES

Added examples of multi-page tour with absolute and relative page addresses

Version 5.1 (Oct 14, 2021)

BUGFIXES

fixed a bug that occurred when the page was refreshed.

Version 5.0 (Oct 09, 2021)

NEW FEATURES

Added the ability to create a multi-page tour between pages of different nesting levels
Added new parameter “baseurl” in to general parameters group. It defines the initial part of the URL that is common to all steps. Required if you specify a relative URL in the “loc” parameter value.

CHANGES

The work of the “loc” parameter has changed. Now you can write both a relative and an absolute URL into its value. Important: The relative URL must be used in conjunction with the “baseurl” parameter

Version 4.5 (Nov 12, 2019)

NEW FEATURES

Added new method “setTitle”. This method allows you to change the name of the step in the information window.
Added new method “setContent”. This method allows you to change the name of the step in the information window.

Version 4.4 (June 02, 2019)

BUGFIXES

Fixed a bug where a dynamically created element did not get the “iGuider-highlight” class name

NEW FEATURES

Added new parameter “autofocus”. It automatically puts the cursor in the selected form element.

CHANGES

Added example of a tour in conjunction with datapicker “snippet-datepicker”

Version 4.3 (December 16, 2018)

NEW FEATURES

Added interactive data-attribute “data-iguider”. In this attribute, you can specify the ID of the tour. If the tour parameters with this identifier were previously declared in the parameter set by the “set” method, then by clicking on the element with the data-attribute, the tour corresponding to the ID will be launched.
Added new method “run”. This method starts a tour from the parameter set that matches the passed identifier.
Added new method “set”. This method declares a set of parameters for one or several tours in order to be able to run the tour by referring to this set by a unique identifier.
In the checklist, added installation of the viewed step to “ready” state, if this step does not require user events or conditions.
Added file “quick-start-tpl.html”. This file contains the minimum required code for quick connection and start the tour.

CHANGES

Fully redesigned logic of the message automatic positioning.
Various other improvements.

Version 4.2 (December 11, 2018)

CHANGES

Improved tour navigation across pages.

Version 4.1 (December 10, 2018)

NEW FEATURES

Added new method “design”. It allows you to fix the state of the message block at any stage of the tour.
Added new method “button”. This method shows the preset button to display and start the tour list.
Added new event “play”. This event triggered when the timer state switches to “play”.
Added new event “pause”. This event triggered when the timer state switches to “pause”.
Added new attribute “data-g-step” into HTML tag. This attribute displays the current step number.

CHANGES

The attribute name has been changed, in which the value of the stepID parameter is displayed. Changed “data-step” to “data-g-stepid”
Improved block width adaptation with message relative to screen width
Improved display of the block with the message when scrolling the page.

BUGFIXES

Fixed switching themes in the builder.

Version 4.0 (December 06, 2018)

NEW FEATURES

Added new event “start”. Triggered before first showing the step
Added preview window to the tour builder
Added new event “progress”. Triggered together with start any step
Added restoration of the set checklist position after updating the page

CHANGES

Improved work with alternative highlighting
Improved operation of “delayBefore” and “delayAfter” parameters
Changed the name of the short code in the template for the cover

Version 3.1 (November 30, 2018)

CHANGES

Improved visualization for Right to Left text orientation
Removed the effect of the highlight shape to scrolling

Version 3.0 (November 30, 2018)

CHANGES

Removed the “duration” sub-parameter
The sub-parameters “messageNextError” and “messagePrevError” have been removed from “lang” parameter
The sub-parameters “introTitle” and “introContent” have been renamed to “title” and “content” and transferred from “lang” to “intro”
The sub-parameters “contDialogTitle” and “contDialogContent” have been renamed to “title” and “content” and transferred from “lang” to “continue”

Version 2.12 (November 29, 2018)

NEW FEATURES

Added new value “ready” for sub-parameter “clickable” in to tourMap Options. This value makes clickable only completed steps and current
Added new sub-parameter “eventMessage” in to Step Options. This parameter sets message hint for steps with custom events
Added new parameter “keyboardEvent” in to General Options. This parameter sets the permission to trigger custom events: true or false (default)
Added new sub-parameter “keyboardEvent” in to Step Options. This parameter sets the permission to trigger custom events for current step: true or false (default)

CHANGES

Improved translations: czech and slovakia

Version 2.11 (November 27, 2018)

NEW FEATURES

Added new parameter “timerType” in to General Options. Sets shape type of the timer progress bar: “line” (default) or “circle”
Added auto-view control buttons: “play” and “pause”
Added new method “timerState”. This method switches the auto-viewing between states: “play” and “pause”.

CHANGES

Changed user interaction logic with auto-viewing.

BUGFIXES

Improved work with missing elements on the page.

Version 2.10 (November 26, 2018)

BUGFIXES

Added local storage clearing of all plugin data when the tour is completed.
Fixed corner display conditions in the message window.

Version 2.9 (November 26, 2018)

NEW FEATURES

Added new method “setStep”. This method switches the tour to the specified step.
Added new method “getStep”. This method returns the active step number.

BUGFIXES

Added overlay layer while waiting for the first element to appear. Checklist will be open only after the appearance of the item.
Improved the behavior of the block with the message at extremely small screen resolutions.
Improved the behavior of the block with a message that is larger than the visible area of the screen.

Version 2.8 (November 24, 2018)

BUGFIXES

Improved scrolling in the help tour on the tour builder page (parameters generator).
Fixed a situation in which there was a search for a non-existent object and error display in the debager.
Corrected positioning of the message in conditions of lack of space at the top or bottom of the target block.

Version 2.7 (November 23, 2018)

BUGFIXES

Fixed positioning of the highlighting when scrolling the page while waiting for the hidden item to appear.

Version 2.6 (November 22, 2018)

BUGFIXES

Fixed the problem of incorrect display of steps in the checklist on devices with a small screen height

Version 2.5 (November 22, 2018)

NEW FEATURES

Added new parameter “bgColor”. Global background color of the message block.
Added new sub-parameter “bgColor” for the parent parameters: intro, continue, tourMap and steps.
Added new parameter “titleColor”. Global title color of the message block.
Added new sub-parameter “titleColor” for the parent parameters: intro, continue, tourMap and steps.
Added new parameter “modalContentColor”. Content color of the intro message block.
Added new sub-parameter “modalContentColor” for the parent parameters: intro, continue and steps.
Added new parameter “modalTypeColor”. Global modal type color of the message block.
Added new sub-parameter “modalTypeColor” for the parent parameters: intro and continue.
Added new parameter “paginationColor”. Global pagination color of the message block.
Added new sub-parameter “paginationColor” for the parent parameter: steps.
Added new parameter “timerColor”. Global timer color of the message block.
Added new sub-parameter “timerColor” for the parent parameter: steps.
Added new parameter “btnColor”. Global buttons color.
Added new sub-parameter “btnColor” for the parent parameters: intro, continue, tourMap and steps.
Added new parameter “btnHoverColor”. Global buttons hover color.
Added new sub-parameter “btnHoverColor” for the parent parameters: intro, continue, tourMap and steps.
Added new sub-parameter “itemColor” for the parent parameter: tourMap. Item color of the Checklist
Added new sub-parameter “itemHoverColor” for the parent parameter: tourMap. Item hover color of the Checklist
Added new sub-parameter “itemActiveColor” for the parent parameter: tourMap. Item Active color of the Checklist
Added new sub-parameter “itemActiveBg” for the parent parameter: tourMap. Item Active BG color of the Checklist
Added new sub-parameter “itemNumColor” for the parent parameter: tourMap. Item Number color of the Checklist
Added new sub-parameter “checkColor” for the parent parameter: tourMap. Check color of the Checklist
Added new sub-parameter “checkReadyColor” for the parent parameter: tourMap. Check Ready color of the Checklist

Version 2.4 (November 17, 2018)

BUGFIXES

Fixed bug with using destroy method together with tour without steps.

Version 2.3 (November 13, 2018)

NEW FEATURES

Added new theme “Neon”. The old “Neon” theme is no longer in the archive.

Version 2.2 (November 9, 2018)

NEW FEATURES

Added new theme “Material”
Added the transfer of the target object in the functions: before, during, after.
Improved work with multi-page tours. Accounted for more options toggle between pages.

Version 2.1 (November 5, 2018)

NEW FEATURES

Added additional automatic scrolling of the page in order to maximally place an object and a block with a large message in the screen.
Added new demo “test-large-message”. For Large content testing.
Added new demo “snippet-check-fields”. For required fields.
Added new sub-parameter “width” into the parameters of intro. This parameter set the width of the intro message block.
Added new sub-parameter “width” into the parameters of continue. This parameter set the width of the continue message block.

Version 2.0 (November 4, 2018)

NEW FEATURES

Added new parameter “toggle” for method “map”.
Added new theme “Relate”
Added control by arrows on the keyboard. Left – the previous step, right – the next step.
Added parameter “keyboard” to enable / disable the ability to control the tour using the keyboard.

Version 1.11 (November 3, 2018)

NEW FEATURES

Added automatic scrolling in the block with a list of steps to ensure that the active step is always visible.
Improved automatic search for the best position of the message for blocks with a high height.
Added the transfer of the target object in the function heckNext, chechPrev.

Version 1.10 (October 30, 2018)

NEW FEATURES

Added new parameter “loc”. Global path to the page on which the step should work. Used to link a tour to a specific page.
Added new parameter “timer”. Global time value after which the tour automatic switching to the next step.

Version 1.9 (October 30, 2018)

NEW FEATURES

Added new parameter “spacing”. This parameter set the global indent highlighting around the element.
Added new parameter “width”. This parameter set the global width of the message block.
Added new parameter “shape”. This parameter set the global shape of highlighting.
Added new parameter “shape”. This parameter set the global shape of highlighting.

BUGFIXES

Fixed a bug causing incorrect calculation of the z-index of dynamic elements.

Version 1.8 (October 29, 2018)

NEW FEATURES

Added new sub-parameter “width”. This parameter sets width of the message block for a specific step.

Version 1.7 (October 28, 2018)

CHANGES

A part of the logic was rewritten in order to make the plugin more flexible to extend the functionality.

Version 1.6 (October 27, 2018)

NEW FEATURES

The plugin code from this day provide for the declaration of numerical values of parameters in brackets, as string value.
Added sub-parameter “waitElementTime”. This parameter sets the time (ms) to wait for an item to appear
Added sub-parameters “checkNext” and “checkPrev”. Functions in which you can carry out any verification by clicking on the “Next” or “Prev” button.
Saving the progress of the tour after updating the page
Added the ability to continue the tour after refreshing the page.

Version 1.5 (May 24, 2018)

BUGFIXES

Fixed bug of calculating the coordinates of the highlighted area.

Version 1.4 (April 27, 2018)

NEW FEATURES

Added a warning message when the plugin is working on local pages in the browser Internet Explorer 11 and highest.

Version 1.3 (April 19, 2018)

NEW FEATURES

In a files set added WordPress version of plugin
Added chrome extension, which gets an unique selector code for any element on the page
Innovation. To display a message in the center, do not specify the target
Added iGuider Builder

Version 1.2 (April 05, 2018)

NEW FEATURES

Changes have been made to the processing of the values for the parameters “cover”

Version 1.1 (January 12, 2018)

NEW FEATURES

Added new rectangle shape with rounded corners

Version 1.0 (November 27, 2017)

Release