Product support

Get help in the plugin support forum.



This plugin adds a Bootstrap tour to the backend pages of any plugin that supports it. This can be very useful if you want to explain the functioning of your plugin to your (new) users in an interactive way. Major sites like Facebook and LinkedIn also use something like this and I will be adding support for it to my paid plugins.

If you don't know what Bootstrap tour is you can visit bootstraptour.com.


To install from the Marketplace, click on the "Add to Project" button and then select the project you wish to add it to before updating the project in the backend of your website to pull in the plugin.

To install from the backend, go to Settings -> Updates & Plugins -> Install Plugins and then search for Briddle.Pageguide.

Like this plugin?

If you like this plugin, you can help me to develop it further, provide support for it or make new plugins by making a donation with PayPal (left side of the page) or giving this plugin a good review :).

My other plugins include:

Hello, I am Wiego Bergsma. Please start by reading the whole documentation! If you have any questions, find a bug or experience difficulties getting the plugin to work please use the Support Forum. Only leave a Review if you are happy with the plugin or are still unhappy with the plugin after reaching out to me in the Support Forum. Thank you! Wiego

Getting started

  1. Install Briddle.Pageguide

The tour will only be shown the first time a user visits your backend page (this is stored in the browser's Local Storage).

Adding Pageguide support for a plugin (developers only)

  1. Open the directory of the plugin you want to add Pageguide to
  2. Create a file assets/pageguide/bootstraptour/{controller}.js (e.g. plugins/briddle/crm/assets/pageguide/bootstraptour/tasks.js)
  3. The backend page /backend/briddle/crm/{controller} (e.g. /backend/briddle/crm/tasks) will now have a Pageguide but so will the preview, create and update pages (e.g. /backend/briddle/crm/tasks/update/1) so be specific in targeting elements to prevent targeting elements on the wrong page.


Be specific in targeting elements

$(window).load(function() {

    /* ============ */
    /* EXAMPLE TOUR */
    /* ============ */
    var tour = new Tour({
        steps: [
                element: $('.toolbar-primary .oc-icon-plus:first'),
                title: 'Site tour',
                content: 'A quick walkthrough of the functionality on this page.',
                placement: 'bottom'

    // Initialize the tour

    // Start the tour

For more information visit bootstraptour.com.

A word about cache (developers only)

Because javascript files are cached changes to these files will not immediately show up. During development you can change the directory name 'bootstraptour' to 'develop'. This will prevent caching of javascript files so you can see your changes.

If both directories are present the directory 'bootstraptour' (none cached version) takes precedence.


Change in develop mode.

Dec 28, 2018


Removed unused menu item.

Dec 28, 2018


Initialize plugin.

Dec 22, 2018