Web Site Tour Builder

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.
Web Site Tour Builder
Browse to the location where you downloaded the package, select it.
Web Site Tour Builder
Click Upload File & Install.
Web Site Tour Builder
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.

Web Site Tour Builder

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>


  • 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

Web Site Tour Builder

Configure the Steps

Web Site Tour Builder

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.
      or without sef:
      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 ( or without sef


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

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

JQuery Settings

It is very easy and intuitive to understand.

Web Site Tour Builder

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
Web Site Tour Builder
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

Web Site Tour Builder

Open SubFolder theme/popup

Web Site Tour Builder

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

Web Site Tour Builder

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

Web Site Tour Builder

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.