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.
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’
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.
- Display As:
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:
- 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:
with this type you it show a modal popup and you don’t need to use wrapper id in next params
he sticks to the id or class or name specified in the wrapper highlighting the area
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.
arrow and box position near wrapper: left, right, top or bottom
The width of Box Area
Show Draggable hand
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.
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.
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.
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
Wrapper Type = name
Wrapper Value = mycustomname
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.