iGuider – Product Tour – Interactive Walkthroughs – Website step by step Guide

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.

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.

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.

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