Web Site Tour Builder for Joomla is a powerfull Tour Module, which can be used as a site tour, helpers, guides or tooltips. Use the Web Site Tour module for your website, products, applications, landing pages or something else.

Overview

Before you install “web site tour builder” be sure you have correctly installed the library JForce Library
for the correct operation of the module.
If you have not installed or is not this library follow this guide: JForceLibrary
In the Joomla administration navigate to Extensions → Extension Manager.
 

 
Browse to the location where you downloaded the package, select it.
 

 
Click Upload File & Install.
 

 
If the installation is successful, the following message appears:
Installing module was successful.

Also if the JForce Library is ok the following message appears:
The module is compatible with this version of ‘JForce Library’

Configuration

In the Joomla administration navigate to Extensions → Module Manager.
In the search box write “web site tour builder” and press Enter.
Now Open Web Site Tour Builder extension.
 

Select Position, Published options

Assign Module in your pages in Menu Assignment → Module Assignment.
 

General Settings

• Display As:
  1. Link
  2. Button
  3. AutoStart on Load (automatically start tour when page load)
  4. LightBox on Load (when page load it show a lightbox on right screen)
  5. No Display ( In this mode, you can place a link to start the tours where you want, for example,
  in a content of joomla, but make sure in any case that the form is posted on that page).So to display manually the link you must insert in your html this code:

  <div class=”tour-menu”>
  <ul style=”list-style:none;”>
  <li><a id=”open-walktrough” href=”javascript:;”>Start Tour</a></li>
  </ul></div>

 

• Lightbox Title
  Insert Title for Lightbox

 

• Lightbox Description
  Insert Description for Lightbox

 

• Enable Keyboard
  Yes or Not
  You can change step by pressing arrows

 

• Show Timer Controls
  Yes or Not
  Show the player (play, pause, next, prev ) and timer counter

 

• LightBox Theme
  Default / Dark

 

• Tour Popup Theme
  Default / White

Configure the Steps

To add new step click on “Add a slide”, then you must configure this params:

• Type
  a. Modal
  with this type you it show a modal popup and you don’t need to use wrapper id in next params
  b. Tooltip
  he sticks to the id or class or name specified in the wrapper highlighting the area
  c. NoHighlight
  he sticks to the id or class or name specified in the wrapper without highlighting the area

• Wrapper Type
  Select for this step if you want to append popup by id,class or name of your html code

• Wrapper ID
  Insert id, class, or name here.
  To find Wrapper id in your site continue to follow this guide.

• Position
  arrow and box position near wrapper: left, right, top or bottom

• Width
  The width of Box Area

• Draggable
  Show Draggable hand

• Rotation
  Rotation in degrees

• Redirect to
  With this params you can do to perform a redirect at the end of current step in new page link of your site that you specify here.

  Important: you must insert full url with “http://www” prefix.
  Example: https://www.joomlaforce.com/extensions/web-site-tour-builder/description.html
  or without sef: http://www.yoursitename.com/index.php?option=com_content&view=article&id=38&Itemid=238.
  Also make sure that in the next step the wrapper id is valid and that the module is also published on the target page, otherwise the tour can not continue.

• Time
  if you enable from general settings the option “Show Timer Control” it show the player and time counter, so it change step automatically after time that you insert here.
  Note: you must insert full url of page like (https://www.joomlaforce.com/user-documentation/web-site-tour-builder) or without sef

• Step Title
  nothing to say
• Step Description
• nothing to say

Dragging the mouse over this icon you can order the steps. After Click on Save Button to re-enable editor.

JQuery Settings

How to Find Wrapper

To find wrapper id you can use an html inspector addon. In this guide we use “firebug”.
View the screenshot below
 

 
In this example, I wanted to highlight the box to the left, then take a look on firebug inspector:
The codes for the box are:
 
<div style=”border: 10px solid #E0E0E0;” id=”mycustomid” name=”mycustomname” class=”mycustomclass”> </div>
 
then you can choose one of this:
 
Wrapper Type = id
Wrapper Value = mycustomid
 
or
 
Wrapper Type = name
Wrapper Value = mycustomname
 
or
 
Wrapper Type = class
Wrapper Value = mycustomclass

Create Custom Tour Popup Theme

After upgrading to version 1.3, you can create your own custom themes.
This guide is intended for those who are familiar with the use of php and css.

To begin, open the module folder

Open SubFolder theme/popup

Copy and paste the file pair “white.css and white.php” or “default.css and default.php”
in the same folder an rename it for example as “mycustomtheme.css” and “mycustomtheme.php”

Important is that the css file and the php file containing the exact same name

Now if you go in general settings you can see in list your new theme.

At this point if you are familiar with php and css you can change the files that you have created.
If you have other question contact us.