Introduction

Thank you for purchasing this product. If you have any questions that are beyond the scope of this documentation, please feel free to contact us.

About PageTour.js (jQuery-Widget)

PageTour.js (jQuery-Widget) - A lightweight tour composer to guide your visitors, onboard new users, highlight new features, make your product easier and build a stunning online user experience.

It is built on top of cutting-edge technologies to provide the best experience that's possible. It has a simple architecture, an easy-to-use integration capabilities and supports modern features like responsiveness, animations, theming, templating, call-to-action and much more.

Visit the PageTour.js website.

Main Features

  • Display your tour with many patterns
  • Automatic best position calculation
  • 80+ manual positions variation
  • Nice overlay options and transitions
  • Useful theme architecture
  • Build custom navigation
  • Easy data injection
  • Embed any type of rich content
  • Auto scroll to element
  • Many callback events
  • Easy custom call-to-action integration
  • Build in minutes
  • Compatible with IE10+, IE11, Firefox, Safari, Opera, Chrome, Edge
  • And many more...

Third party credits

Name Website Description
jQuery jquery.com The Write Less, Do More, JavaScript Library.
jQuery UI / Widget Factory jqueryui.com/widget Create stateful jQuery plugins using the same abstraction as all jQuery UI widgets.
Lodash lodash.com A modern JavaScript utility library delivering modularity, performance & extras.
Animate.css animate.css Just-add-water CSS animations.
Google Fonts API fonts.google.com Hundreds of free, open-source fonts optimized for the web.
Hero Patterns www.heropatterns.com A collection of repeatable SVG background patterns for you to use on your web projects.

Getting Started

Purchase PageTour.js

You can purchase PageTour.js on CodeCanyon.

Directory explanation

Once you have downloaded and extracted the ptjs.zip file, you should find the following directory structure:

/ptjs/
  • css/
  • demo/
  • js/
  • themes/
  • vendors/
File/Folder Purpose
css/ This folder contains the "ptjs.css" and "ptjs.min.css" file which contain all the basic styles of PageTour.js.
demo/ This folder contains a basic working demo of PageTour.js.
js/ This folder contains the "ptjs.js" and "ptjs.min.js" file which contain the global architecture of PageTour.js.
themes/ This folder contains all the themes (only 1 theme currently, many more to come...) embedded in PageTour.js.
vendors/ This folder contains latest mandatory version of jQuery and jQuery UI and custom Lodash build to run PageTour.js

Files installation

In order to run PageTour.js, you have to reference some required files in the head section of pages.

<link href="ptjs/css/ptjs.min.css" rel="stylesheet">
<link href="ptjs/themes/classic.min.css" rel="stylesheet">

<script src="ptjs/vendors/jquery-3.2.1.min.js"></script>
<script src="ptjs/vendors/jquery-ui-1-12-1.min.js"></script>
<script src="ptjs/js/ptjs.min.js"></script>

My First Tour

Now you are ready to run your first tour!

Element 1 Element 2 Element 3

<div class="elements" style="margin:200px 0 0 200px">
  <span id="element1" class="label label-default my-first-tour">Element 1</span>
  <span id="element2" class="label label-default my-first-tour">Element 2</span>
  <span id="element3" class="label label-default my-first-tour">Element 3</span>
</div>
<button id="run" type="button" class="btn btn-custom my-first-tour">Run Tour</button>
<script type="text/javaScript">
  $(function(){
    $('#run.my-first-tour').on('click', function() {
      $.ptJs({
        autoStart: true,
        templateData: {
          title: 'My First Tour'
        },
        steps: [
          {
            el: '#element1.my-first-tour',
            templateData: {
              content: 'Element 1'
            }
          },
          {
            el: '#element2.my-first-tour',
            templateData: {
              content: 'Element 2'
            }
          },
          {
            el: '#element3.my-first-tour',
            templateData: {
              content: 'Element 3'
            }
          }
        ]
      });
    });
  });
</script>

Usage

Animation

Set animation "effect", "duration" and "trigger event" for the tour or for a specific step.

Element 1 Element 2 Element 3 Element 4 Element 5 Element 6 Element 7 Element 8 Element 9 Element 10 Element 11 Element 12 Element 13 Element 14 Element 15 Element 16

<div class="elements" style="margin:200px 0 0 200px">
  <span id="element1" class="label label-default animation">Element 1</span>
  <span id="element2" class="label label-default animation">Element 2</span>
  <span id="element3" class="label label-default animation">Element 3</span>
  <span id="element4" class="label label-default animation">Element 4</span>
  <span id="element5" class="label label-default animation">Element 5</span>
  <span id="element6" class="label label-default animation">Element 6</span>
  <span id="element7" class="label label-default animation">Element 7</span>
  <span id="element8" class="label label-default animation">Element 8</span>
  <span id="element9" class="label label-default animation">Element 9</span>
  <span id="element10" class="label label-default animation">Element 10</span>
  <span id="element11" class="label label-default animation">Element 11</span>
  <span id="element12" class="label label-default animation">Element 12</span>
  <span id="element13" class="label label-default animation">Element 13</span>
  <span id="element14" class="label label-default animation">Element 14</span>
  <span id="element15" class="label label-default animation">Element 15</span>
  <span id="element16" class="label label-default animation">Element 16</span>
</div>
<button id="run" type="button" class="btn btn-custom animation">Run Tour</button>
<script type="text/javaScript">
  $(function(){
    $('#run.animation').on('click', function() {
      $.ptJs({
        animation: {
          enableOnClose: true,
        },
        autoStart: true,
        position:{
          location:'tc'
        },
        templateData: {
          title: 'Animation'
        },
        steps: [
          {
            el: '#element1.animation',
            animation: {
              enableOnClose: false,
              enableOnOpen: false,
            },
            templateData: {
              content: 'Animation disabled'
            }
          },
          {
            el: '#element2.animation',
            animation: {
              enableOnClose: false,
              enableOnOpen: true,
            },
            templateData: {
              content: 'Animation enabled on slide open'
            }
          },
          {
            el: '#element3.animation',
            templateData: {
              content: 'Animation enabled on slide open & close'
            }
          },
          {
            el: '#element4.animation',
            animation: {
              duration: 3
            },
            templateData: {
              content: 'Animation duration = 3 second'
            }
          },
          {
            el: '#element5.animation',
            animation: {
              name: ['ptJs_bounce']
            },
            templateData: {
              content: 'Effect "bounce"'
            }
          },
          {
            el: '#element6.animation',
            animation: {
              name: ['ptJs_bounceDirection']
            },
            templateData: {
              content: 'Effect "bounce direction"'
            }
          },
          {
            el: '#element7.animation',
            animation: {
              name: ['ptJs_fade']
            },
            templateData: {
              content: 'Effect "fade"'
            }
          },
          {
            el: '#element8.animation',
            animation: {
              name: ['ptJs_fadeDirection']
            },
            templateData: {
              content: 'Effect "fade direction"'
            }
          },
          {
            el: '#element9.animation',
            animation: {
              name: ['ptJs_flipDirection']
            },
            templateData: {
              content: 'Effect "flip direction"'
            }
          },
          {
            el: '#element10.animation',
            animation: {
              name: ['ptJs_lightSpeed']
            },
            templateData: {
              content: 'Effect "ligth speed"'
            }
          },
          {
            el: '#element11.animation',
            animation: {
              name: ['ptJs_roll']
            },
            templateData: {
              content: 'Effect "roll"'
            }
          },
          {
            el: '#element12.animation',
            animation: {
              name: ['ptJs_rotate']
            },
            templateData: {
              content: 'Effect "rotate"'
            }
          },
          {
            el: '#element13.animation',
            animation: {
              name: ['ptJs_slideDirection']
            },
            templateData: {
              content: 'Effect "slide direction"'
            }
          },
          {
            el: '#element14.animation',
            animation: {
              name: ['ptJs_zoom']
            },
            templateData: {
              content: 'Effect "zoom"'
            }
          },
          {
            el: '#element15.animation',
            animation: {
              name: ['ptJs_zoomDirection']
            },
            templateData: {
              content: 'Effect "zoom direction"'
            }
          },
          {
            el: '#element16.animation',
            animation: {
              name: ['ptJs_bounce','ptJs_zoom']
            },
            templateData: {
              content: 'Effect "bounce" on open and "zoom" on close'
            }
          }
        ]
      });
    });
  });
</script>

Display Window

Set display mode to "window" (by default) to show welcome message, focus message and feature message.

Element 1 Element 2

<div class="elements" style="margin:200px 0 0 200px">
  <span id="element1" class="label label-default display-window">Element 1</span>
  <span id="element2" class="label label-default display-window">Element 2</span>
</div>
<button id="run" type="button" class="btn btn-custom display-window">Run Tour</button>
<script type="text/javaScript">
  $(function(){
    $('#run.display-window').on('click', function() {
      $.ptJs({
        autoStart: true,
        templateData: {
          title: 'Display "window" mode'
        },
        steps: [
          {
            el: document,
            modal: true,
            templateData: {
              content: 'The "welcome message", is great for welcoming users and setting expectations for onboarding.',
              title: 'Welcome Message'
            }
          },
          {
            el: document,
            position: {
              location: 'lm'
            },
            templateData: {
              content: 'Use "feature message", to announce new features to your users.',
              title: 'Feature Message'
            }
          },
          {
            el: '#element1.display-window',
            templateData: {
              content: 'Use "focus message", to help guide new users to success with website/product tours.',
              title: 'Focus Message 1/2'
            }
          },
          {
            el: '#element2.display-window',
            templateData: {
              content: 'Use "focus message", to help guide new users to success with website/product tours.',
              title: 'Focus Message 2/2'
            }
          }
        ]
      });
    });
  });
</script>

Display Marker

Set display mode to "marker" to show all step's marker on the page, then on each marker click, the corresponding window opens.

Element 1 Element 2 Element 3

<div class="elements" style="margin:200px 0 0 200px">
  <span id="element1" class="label label-default display-marker">Element 1</span>
  <span id="element2" class="label label-default display-marker">Element 2</span>
  <span id="element3" class="label label-default display-marker">Element 3</span>
</div>
<button id="run" type="button" class="btn btn-custom display-marker">Run Tour</button>
<script type="text/javaScript">
  $(function(){
    $('#run.display-marker').on('click', function() {
      $.ptJs({
        autoDestroy: false,
        autoStart: true,
        display: {
          mode: 'marker'
        },
        instanceName: 'display-marker',
        templateData: {
          content: 'Use "marker message", to help users discover key elements of your product on their own.',
          title: 'Display Marker'
        },
        steps: [
          {
            el: '#element1.display-marker',
            position:{
              location:'lm'
            },
            templateData: {
              content: 'Use "marker message", to help users discover key elements of your product on their own.'
            }
          },
          {
            el: '#element2.display-marker',
            position:{
              location:'tc'
            },
            templateData: {
              content: 'Use "marker message", to help users discover key elements of your product on their own.'
            }
          },
          {
            el: '#element3.display-marker',
            position:{
              location:'rm'
            },
            templateData: {
              content: 'Use "marker message", to help users discover key elements of your product on their own.'
            }
          }
        ]
      });
    });
  });
</script>

Display Window "Continue Tour"

Enable "continue" mode to save each step of the tour and to pop-up the window "continue" when the tour is re-started.

Element 1 Element 2 Element 3

Tips: Run the tour until the second element and close the tour. Then restart the tour and the Slide "Continue Tour" will appear.


<div class="elements" style="margin:200px 0 0 200px">
  <span id="element1" class="label label-default continue">Element 1</span>
  <span id="element2" class="label label-default continue">Element 2</span>
  <span id="element3" class="label label-default continue">Element 3</span>
</div>
<p><strong>Tips:</strong> Run the tour until the second element and close the tour. Then restart the tour and the "continue" slide will appear.</p>
<button id="run" type="button" class="btn btn-custom continue">Run Tour</button>
<script type="text/javaScript">
  $(function(){
    $('#run.continue').on('click', function() {
      $.ptJs({
        autoStart: true,
        continueEnable: true,
        templateData: {
          title: 'Display Window "Continue Tour"'
        },
        steps: [
          {
            el: '#element1.continue',
            position:{
              location: 'tl'
            },
            templateData: {
              content: 'Element 1'
            }
          },
          {
            el: '#element2.continue',
            position:{
              location: 'tc'
            },
            templateData: {
              content: 'Element 2'
            }
          },
          {
            el: '#element3.continue',
            position:{
              location: 'tr'
            },
            templateData: {
              content: 'Element 3'
            }
          }
        ]
      });
    });
  });
</script>

Overlay

Set overlay "color", "duration", "mode" and "padding" for the tour or for a specific step.

Element 1 Element 2 Element 3 Element 4 Element 5 Element 6 Element 7

<div class="elements" style="margin:200px 0 0 200px">
  <span id="element1" class="label label-default overlay">Element 1</span>
  <span id="element2" class="label label-default overlay">Element 2</span>
  <span id="element3" class="label label-default overlay">Element 3</span>
  <span id="element4" class="label label-default overlay">Element 4</span>
  <span id="element5" class="label label-default overlay">Element 5</span>
  <span id="element6" class="label label-default overlay">Element 6</span>
  <span id="element7" class="label label-default overlay">Element 7</span>
</div>
<button id="run" type="button" class="btn btn-custom overlay">Run Tour</button>
<script type="text/javaScript">
  $(function(){
    $('#run.overlay').on('click', function() {
      $.ptJs({
        autoStart: true,
        position:{
          location:'tc'
        },
        templateData: {
          title: 'Overlay'
        },
        steps: [
          {
            el: '#element1.overlay',
            overlay: {
              enable: false
            },
            templateData: {
              content: 'Overlay disabled'
            }
          },
          {
            el: '#element2.overlay',
            overlay: {
              color: 'rgba(0, 0, 0, 1)'
            },
            templateData: {
              content: 'Overlay white color and full opacity'
            }
          },
          {
            el: '#element3.overlay',
            overlay: {
              color: 'rgba(36,119,221, 0.20)'
            },
            templateData: {
              content: 'Overlay blue color and light opacity'
            }
          },
          {
            el: '#element4.overlay',
            overlay: {
              duration: 1
            },
            templateData: {
              content: 'Overlay duration = 1 second'
            }
          },
          {
            el: '#element5.overlay',
            overlay: {
              mode: 'full'
            },
            templateData: {
              content: 'Overlay mode "full"'
            }
          },
          {
            el: '#element6.overlay',
            templateData: {
              content: 'Overlay mode "focus"'
            }
          },
          {
            el: '#element7.overlay',
            overlay: {
              padding: 30
            },
            templateData: {
              content: 'Overlay padding 30px'
            }
          }
        ]
      });
    });
  });
</script>

Position

Choose between 80 "positions" to display the step.


<div class="elements" style="margin:200px 0 0 200px">
  <div id="element1" class="position" style="border:2px dashed #4dbcc5; height:300px; width:75%"></div>
</div>
<p>
  <select class="form-control select-position">
    <option>Make a selection</option>
    <optgroup label="Element auto position ">
      <option data-element="#element1.position" data-position="auto">auto</option>
    </optgroup>
    <optgroup label="Element: outside position (top)">
      <option data-element="#element1.position" data-position="ct-l">cornerTop-left</option>
      <option data-element="#element1.position" data-position="ct-l-c">cornerTop-left-center</option>
      <option data-element="#element1.position" data-position="tl">topLeft</option>
      <option data-element="#element1.position" data-position="tc-l">topCenter-left</option>
      <option data-element="#element1.position" data-position="tc">topCenter</option>
      <option data-element="#element1.position" data-position="tc-r">topCenter-right</option>
      <option data-element="#element1.position" data-position="tr">topRight</option>
      <option data-element="#element1.position" data-position="ct-r-c">cornerTop-right-center</option>
      <option data-element="#element1.position" data-position="ct-r">cornerTop-right</option>
    </optgroup>
    <optgroup label="Element: outside position (bottom) ">
      <option data-element="#element1.position" data-position="cb-l">cornerBottom-left</option>
      <option data-element="#element1.position" data-position="cb-l-c">cornerBottom-left-center</option>
      <option data-element="#element1.position" data-position="bl">bottomLeft</option>
      <option data-element="#element1.position" data-position="bc-l">bottomCenter-left</option>
      <option data-element="#element1.position" data-position="bc">bottomCenter</option>
      <option data-element="#element1.position" data-position="bc-r">bottomCenter-right</option>
      <option data-element="#element1.position" data-position="br">bottomRight</option>
      <option data-element="#element1.position" data-position="cb-r-c">cornerBottom-right-center</option>
      <option data-element="#element1.position" data-position="cb-r">cornerBottom-right</option>
    </optgroup>
    <optgroup label="Element: outside position (left) ">
      <option data-element="#element1.position" data-position="ct-l-m">cornerTop-left-middle</option>
      <option data-element="#element1.position" data-position="lt">leftTop</option>
      <option data-element="#element1.position" data-position="lm-t">leftMiddle-top</option>
      <option data-element="#element1.position" data-position="lm">leftMiddle</option>
      <option data-element="#element1.position" data-position="lm-b">leftMiddle-bottom</option>
      <option data-element="#element1.position" data-position="lb">leftBottom</option>
      <option data-element="#element1.position" data-position="cb-l-m">cornerBottom-left-middle</option>
    </optgroup>
    <optgroup label="Element: outside position (right) ">
      <option data-element="#element1.position" data-position="ct-r-m">cornerTop-right-middle</option>
      <option data-element="#element1.position" data-position="rt">rightTop</option>
      <option data-element="#element1.position" data-position="rm-t">rightMiddle-top</option>
      <option data-element="#element1.position" data-position="rm">rightMiddle</option>
      <option data-element="#element1.position" data-position="rm-b">rightMiddle-bottom</option>
      <option data-element="#element1.position" data-position="rb">rightBottom</option>
      <option data-element="#element1.position" data-position="cb-r-m">cornerBottom-right-middle</option>
    </optgroup>
    <optgroup label="Element: between position (top) ">
      <option data-element="#element1.position" data-position="ct-l-c-m">cornerTop-left-center-middle</option>
      <option data-element="#element1.position" data-position="tl-m">topLeft-middle</option>
      <option data-element="#element1.position" data-position="tc-l-m">topCenter-left-middle</option>
      <option data-element="#element1.position" data-position="tc-m">topCenter-middle</option>
      <option data-element="#element1.position" data-position="tc-r-m">topCenter-right-middle</option>
      <option data-element="#element1.position" data-position="tr-m">topRight-middle</option>
      <option data-element="#element1.position" data-position="ct-r-c-m">cornerTop-right-center-middle</option>
    </optgroup>
    <optgroup label="Element: between position (bottom) ">
      <option data-element="#element1.position" data-position="cb-l-c-m">cornerBottom-left-center-middle</option>
      <option data-element="#element1.position" data-position="bl-m">bottomLeft-middle</option>
      <option data-element="#element1.position" data-position="bc-l-m">bottomCenter-left-middle</option>
      <option data-element="#element1.position" data-position="bc-m">bottomCenter-middle</option>
      <option data-element="#element1.position" data-position="bc-r-m">bottomCenter-right-middle</option>
      <option data-element="#element1.position" data-position="br-m">bottomRight-middle</option>
      <option data-element="#element1.position" data-position="cb-r-c-m">cornerBottom-right-center-middle</option>
    </optgroup>
    <optgroup label="Element: between position (left) ">
      <option data-element="#element1.position" data-position="lt-c">leftTop-center</option>
      <option data-element="#element1.position" data-position="lm-t-c">leftMiddle-top-center</option>
      <option data-element="#element1.position" data-position="lm-c">leftMiddle-center</option>
      <option data-element="#element1.position" data-position="lm-b-c">leftMiddle-bottom-center</option>
      <option data-element="#element1.position" data-position="lb-c">leftBottom-center</option>
    </optgroup>
    <optgroup label="Element: between position (right) ">
      <option data-element="#element1.position" data-position="rt-c">rightTop-center</option>
      <option data-element="#element1.position" data-position="rm-t-c">rightMiddle-top-center</option>
      <option data-element="#element1.position" data-position="rm-c">rightMiddle-center</option>
      <option data-element="#element1.position" data-position="rm-b-c">rightMiddle-bottom-center</option>
      <option data-element="#element1.position" data-position="rb-c">rightBottom-center</option>
    </optgroup>
    <optgroup label="Element: inside position (top) ">
      <option data-element="#element1.position" data-position="tl-b">topLeft-bottom</option>
      <option data-element="#element1.position" data-position="tc-l-b">topCenter-left-bottom</option>
      <option data-element="#element1.position" data-position="tc-b">topCenter-bottom</option>
      <option data-element="#element1.position" data-position="tc-r-b">topCenter-right-bottom</option>
      <option data-element="#element1.position" data-position="tr-b">topRight-bottom</option>
    </optgroup>
    <optgroup label="Element: inside position (bottom) ">
      <option data-element="#element1.position" data-position="bl-t">bottomLeft-top</option>
      <option data-element="#element1.position" data-position="bc-l-t">bottomCenter-left-top</option>
      <option data-element="#element1.position" data-position="bc-t">bottomCenter-top</option>
      <option data-element="#element1.position" data-position="bc-r-t">bottomCenter-right-top</option>
      <option data-element="#element1.position" data-position="br-t">bottomRight-top</option>
    </optgroup>
    <optgroup label="Element: inside position (left) ">
      <option data-element="#element1.position" data-position="lm-t-r">leftMiddle-top-right</option>
      <option data-element="#element1.position" data-position="lm-r">leftMiddle-right</option>
      <option data-element="#element1.position" data-position="lm-b-r">leftMiddle-bottom-right</option>
    </optgroup>
    <optgroup label="Element: inside position (right) ">
      <option data-element="#element1.position" data-position="rm-t-l">rightMiddle-top-left</option>
      <option data-element="#element1.position" data-position="rm-l">rightMiddle-left</option>
      <option data-element="#element1.position" data-position="rm-b-l">rightMiddle-bottom-left</option>
    </optgroup>
    <optgroup label="Window: position">
      <option data-element="document" data-position="cm">centerMiddle</option>
      <option data-element="document" data-position="tl">topLeft</option>
      <option data-element="document" data-position="tc">topCenter</option>
      <option data-element="document" data-position="tr">topRight</option>
      <option data-element="document" data-position="bl">bottomLeft</option>
      <option data-element="document" data-position="bc">bottomCenter</option>
      <option data-element="document" data-position="br">bottomRight</option>
      <option data-element="document" data-position="lm">leftMiddle</option>
      <option data-element="document" data-position="rm">rightMiddle</option>
    </optgroup>
  </select>
</p>
<script type="text/javaScript">
  $(function(){
    $('.select-position').on('change', function() {
      var option = $(this).find('option:selected');
      if (jQuery.isEmptyObject(option.data())) return;

      $.ptJs({
        autoStart: true,
        keyboardNavigation: false,
        overlay:{
          mode: option.data('element') === 'document' ? 'full' : 'focus'
        },
        position:{
          location: option.data('position')
        },
        size:{
          width: 250
        },
        templateData: {
          title: 'Position'
        },
        steps: [
          {
            el: $(option.data('element') === 'document' ? document : option.data('element')),
            templateData: {
              content: '<strong>' + option.parent().attr('label') + '</strong><br/>' + option.text() + '=' + option.data('position')
            }
          }
        ]
      });
    });
  });
</script>

Relocate & Auto position

Enable "relocate" and/or set "auto position", for widget to choose the best possible position (based on window center) when step opening and window resizing/scrolling.

Element 1
Element 2
Element 3
Element 4

Tips: Try to scroll and/or resize the window to see how it works.


<div class="elements" style="margin:200px 0 0 200px">
  <div id="element" style="position:relative; height:400px;">
    <div id="element1" class="relocate" style="position:absolute; top:10px; left:10px; border:2px dashed #4dbcc5; padding:30px">Element 1</div>
    <div id="element2" class="relocate" style="position:absolute; top:40px; right:20px; border:2px dashed #4dbcc5; padding:50px">Element 2</div>
    <div id="element3" class="relocate" style="position:absolute; bottom:40px; left:30%; border:2px dashed #4dbcc5; padding:10px">Element 3</div>
    <div id="element4" class="relocate" style="position:absolute; bottom:0px; right:0; border:2px dashed #4dbcc5; padding:10px">Element 4</div>
  </div>
</div>
<p><strong>Tips:</strong> Try to scroll and/or resize the window to see how it works.</p>
<button id="run" type="button" class="btn btn-custom relocate">Run Tour</button>
<script type="text/javaScript">
  $(function(){
    $('#run.relocate').on('click', function() {
      $.ptJs({
        autoStart: true,
        position:{
          relocate: true
        },
        templateData: {
          title: 'Relocate & Auto position'
        },
        steps: [
          {
            el: '#element1.relocate',
            templateData: {
              content: 'Element 1'
            }
          },
          {
            el: '#element2.relocate',
            templateData: {
              content: 'Element 2'
            }
          },
          {
            el: '#element3.relocate',
            templateData: {
              content: 'Element 3'
            }
          },
          {
            el: '#element4.relocate',
            templateData: {
              content: 'Element 4'
            }
          }
        ]
      });
    });
  });
</script>

Start At

Define at which "step index" the tour will start.

Element 1 Element 2 Element 3

<div class="elements" style="margin:200px 0 0 200px">
  <span id="element1" class="label label-default start-at">Element 1</span>
  <span id="element2" class="label label-default start-at">Element 2</span>
  <span id="element3" class="label label-default start-at">Element 3</span>
</div>
<button id="run" type="button" class="btn btn-custom start-at">Run Tour</button>
<script type="text/javaScript">
  $(function(){
    $('#run.start-at').on('click', function() {
      $.ptJs({
        autoStart: true,
        templateData: {
          title: 'Start At'
        },
        startAt: 2,
        steps: [
          {
            el: '#element1.start-at',
            templateData: {
              content: 'Element 1'
            }
          },
          {
            el: '#element2.start-at',
            templateData: {
              content: 'Element 2'
            }
          },
          {
            el: '#element3.start-at',
            templateData: {
              content: 'Element 3'
            }
          }
        ]
      });
    });
  });
</script>

Translation

Translate title, content, button and custom data in your onw language.

Element 1 Element 2 Element 3

 <div class="elements" style="margin:200px 0 0 200px">
  <span id="element1" class="label label-default translation">Element 1</span>
  <span id="element2" class="label label-default translation">Element 2</span>
  <span id="element3" class="label label-default translation">Element 3</span>
</div>
<button id="run" type="button" class="btn btn-custom translation">Run Tour</button>
<script type="text/javaScript">
  $(function(){
    $('#run.translation').on('click', function() {
      $.ptJs({
        autoStart: true,
        templateData: {
          'button-end': 'Terminer',
          'button-next': 'Suivant',
          'button-previous': 'Précédent',
          'button-start': 'Commencer',
          content: 'Bienvenue sur PageTour.js en français.'
        },
        steps: [
          {
            el: '#element1.translation',
            templateData: {
              title: 'Traduction en français 1/3'
            }
          },
          {
            el: '#element2.translation',
            templateData: {
              title: 'Traduction en français 2/3'
            }
          },
          {
            el: '#element3.translation',
            templateData: {
              title: 'Traduction en français 3/3'
            }
          }
        ]
      });
    });
  });
</script>

Override Marker HTML

Override default Marker HTML to create a custom rendering.

Element 1 Element 2 Element 3

<div class="elements" style="margin:200px 0 0 200px">
  <span id="element1" class="label label-default template-view-marker">Element 1</span>
  <span id="element2" class="label label-default template-view-marker">Element 2</span>
  <span id="element3" class="label label-default template-view-marker">Element 3</span>
</div>
<button id="run" type="button" class="btn btn-custom template-view-marker">Run Tour</button>
<script type="text/javaScript">
  $(function(){
    $('#run.template-view-marker').on('click', function() {
      $.ptJs({
        autoDestroy: false,
        autoStart: true,
        display: {
          mode: 'marker'
        },
        instanceName: 'template-view-marker',
        templateData: {
          title: 'Override Marker HTML'
        },
        templateViewMarker: '<img class="template-view-marker" style="cursor:pointer; width:22px; height:22px" alt="Custom slide\'s bullet" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/pin-icon.png">',
        steps: [
          {
            el: '#element1.template-view-marker',
            position:{
              location:'lm'
            },
            templateData: {
              content: 'Element 1'
            }
          },
          {
            el: '#element2.template-view-marker',
            position:{
              location:'tc'
            },
            templateData: {
              content: 'Element 2'
            },
            templateViewMarker: '<a href="javascript:void(0)">Click here</a>',
          },
          {
            el: '#element3.template-view-marker',
            position:{
              location:'rm'
            },
            templateData: {
              content: 'Element 3'
            },
            templateViewMarker: '<img class="template-view-marker" style="cursor:pointer; width:36px; height:36px" alt="Custom slide\'s bullet" src="https://media.giphy.com/media/Ef50pf6KHSUbS/source.gif">',
          }
        ]
      });
    });
  });
</script>

Override Window "Continue Tour" HTML

Override default Window "Continue Tour" HTML to create a custom rendering.

Element 1 Element 2 Element 3

Tips: Run the tour until the second element and close the tour. Then restart the tour and the Slide "Continue Tour" will appear.


<div class="elements" style="margin:200px 0 0 200px">
  <span id="element1" class="label label-default template-view-continue">Element 1</span>
  <span id="element2" class="label label-default template-view-continue">Element 2</span>
  <span id="element3" class="label label-default template-view-continue">Element 3</span>
</div>
<p><strong>Tips:</strong> Run the tour until the second element and close the tour. Then restart the tour and the "continue" slide will appear.</p>
<button id="run" type="button" class="btn btn-custom template-view-continue">Run Tour</button>
<style>
  .overlay.template-view-continue{
    background-color:rgba(255,255,255,0.9);
    bottom:0;
    left:0;
    position:fixed;
    right:0;
    top:0;
    z-index: 10;
  }
  .buttons.template-view-continue{
    background-color:rgba(0,0,0,0.5);
    padding:30px;
    border-radius:10px;
    color: #fff;
    font-weight:bold;
    text-align: center;
  }
  .buttons.template-view-continue > span{
    border-radius: 10px;
    color: #666;
    cursor: pointer;
    display: inline-block;
    margin:0 5px;
    padding: 10px 20px;
    background-color: #fff;
  }
</style>
<script type="text/javaScript">
  $(function(){
    $('#run.template-view-continue').on('click', function() {
      $.ptJs({
        autoStart: true,
        continueEnable: true,
        templateData: {
          description: 'Click "continue" to continue the tour or click "restart" to restart the tour from the beginning.'
        },
        templateViewContinue: '' +
          '<div class="buttons template-view-continue" ptjs-id="container">\n' +
            '<p ptjs-data="description"></p>\n' +
            '<span ptjs-id="button-restart" ptjs-data="button-restart"></span>\n' +
            '<span ptjs-id="button-continue" ptjs-data="button-continue"></span>\n' +
          '</div>',
        steps: [
          {
            el: '#element1.template-view-continue',
            position:{
              location: 'tl'
            },
            templateData: {
              content: 'Element 1'
            }
          },
          {
            el: '#element2.template-view-continue',
            position:{
              location: 'tc'
            },
            templateData: {
              content: 'Element 2'
            }
          },
          {
            el: '#element3.template-view-continue',
            position:{
              location: 'tr'
            },
            templateData: {
              content: 'Element 3'
            }
          }
        ],
        onAfterClose: function (evt, data) {
          $('.overlay.template-view-continue').remove();
        },
        onBeforeOpen: function (evt, data) {
          if (data.isSlideContinue) $('body').prepend('<div class="overlay template-view-continue"></div>');
        }
      })
    });
  });
</script>

Override Window HTML

Override default Window HTML to create a custom rendering.

Element 1 Element 2 Element 3


<div class="elements" style="margin:200px 0 0 200px">
  <span id="element1" class="label label-default template-view-window">Element 1</span>
  <span id="element2" class="label label-default template-view-window">Element 2</span>
  <span id="element3" class="label label-default template-view-window">Element 3</span>
</div>
<button id="run" type="button" class="btn btn-custom template-view-window">Run Tour</button>
<div class="ptjs-templates">
  <div id="classic-templateViewWindow" class="ptjs-template">
     <div class="step-container" ptjs-id="ptjs-step-container">
      <span class="step-button-close" ptjs-id="button-close" ptjs-data="button-close"></span>
      <div class="step-header" ptjs-id="header">
        <div class="title" ptjs-data="title"></div>
      </div>
      <div class="step-body" ptjs-id="body">
        <div class="content" ptjs-data="content"></div><br>
        <iframe width="100%" scrolling="no" frameborder="no" ptjs-src="soundUrl"></iframe>
      </div>
      <div class="step-footer" ptjs-id="footer">
        <span class="step-pagination" ptjs-id="pagination" ptjs-data="pagination"></span>
        <div class="step-buttons">
          <span ptjs-id="button-start" ptjs-data="button-start"></span>
          <span ptjs-id="button-previous" ptjs-data="button-previous"></span>
          <span ptjs-id="button-next" ptjs-data="button-next"></span>
          <span ptjs-id="button-end" ptjs-data="button-end"></span>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javaScript">
  $(function(){
    $('#run.template-view-window').on('click', function() {
      $.ptJs({
        autoStart: true,
        templateData: {
          title: 'Override Window HTML'
        },
        steps: [
          {
            el: '#element1.template-view-window',
            templateData: {
              content: 'Default HTML <br><br><img style="width:100%" alt="Responsive image" src="https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAAhGAAAAJDI3ODE4NjY0LTYwY2EtNDY3Mi04NWRiLWNjMzQ5NDViZjRhOQ.jpg">'
            }
          },
          {
            el: '#element2.template-view-window',
            templateData: {
              content: 'Inline HTML',
              videoUrl: 'https://www.youtube.com/embed/y6Sxv-sUYtM'
            },
            templateViewWindow: '' +
              '<div class="step-container" ptjs-id="ptjs-step-container">\n' +
                '<span class="step-button-close" ptjs-id="button-close" ptjs-data="button-close"></span>\n' +
                '<div class="step-header" ptjs-id="header">\n' +
                  '<div class="title" ptjs-data="title"></div>\n' +
                '</div>\n' +
                '<div class="step-body" ptjs-id="body">\n' +
                  '<div class="content" ptjs-data="content"></div><br>\n' +
                  '<iframe width="100%" ptjs-src="videoUrl" frameborder="0" allowfullscreen></iframe>\n' +
                '</div>\n' +
                '<div class="step-footer" ptjs-id="footer">\n' +
                  '<span class="step-pagination" ptjs-id="pagination" ptjs-data="pagination"></span>\n' +
                  '<div class="step-buttons">\n' +
                    '<span ptjs-id="button-start" ptjs-data="button-start"></span>\n' +
                    '<span ptjs-id="button-previous" ptjs-data="button-previous"></span>\n' +
                    '<span ptjs-id="button-next" ptjs-data="button-next"></span>\n' +
                    '<span ptjs-id="button-end" ptjs-data="button-end"></span>\n' +
                  '</div>\n' +
                '</div>\n' +
              '</div>',
          },
          {
            el: '#element3.template-view-window',
            templateData: {
              content: 'DOM HTML',
              soundUrl: 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/211184399&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true'
            },
            templateViewWindow: $('.ptjs-templates #classic-templateViewWindow').html()
          }
        ]
      })
    });
  });
</script>

Trigger events

Get triggered events.

Element 1 Element 2 Element 3

<div class="elements" style="margin:200px 0 0 200px">
  <span id="element1" class="label label-default trigger-events">Element 1</span>
  <span id="element2" class="label label-default trigger-events">Element 2</span>
  <span id="element3" class="label label-default trigger-events">Element 3</span>
</div>
<div class="log trigger-events" style="font-size:11px; max-height:200px; overflow-y:auto; padding:10px; background-color:#eee; margin-bottom:20px"></div>
<button id="run" type="button" class="btn btn-custom trigger-events">Run Tour</button>
<script type="text/javaScript">
  $(function(){
    $('#run.trigger-events').on('click', function() {
      $.ptJs({
        animation: {
          enableOnClose: true
        },
        autoStart: true,
        templateData: {
          title: 'Trigger events'
        },
        steps: [
          {
            el: '#element1.trigger-events',
            position:{
              location:'tl'
            },
            templateData: {
              content: 'Element 1'
            }
          },
          {
            el: '#element2.trigger-events',
            position:{
              location:'tc'
            },
            templateData: {
              content: 'Element 2'
            }
          },
          {
            el: '#element3.trigger-events',
            position:{
              location:'tr'
            },
            templateData: {
              content: 'Element 3'
            }
          }
        ],
        onAfterAnimate: function(event, data) {
          addLog('onAfterAnimate', data);
        },
        onAfterClose: function(event, data) {
          addLog('onAfterClose', data);
        },
        onAfterOpen: function(event, data) {
          addLog('onAfterOpen', data);
        },
        onBeforeAnimate: function(event, data) {
          addLog('onBeforeAnimate', data);
        },
        onBeforeClose: function(event, data) {
          addLog('onBeforeClose', data);
        },
        onBeforeOpen: function(event, data) {
          addLog('onBeforeOpen', data);
        },
        onButtonCloseClick: function(event, data) {
          addLog('onButtonCloseClick', data);
        },
        onButtonEndClick: function(event, data) {
          addLog('onButtonEndClick', data);
        },
        onButtonNextClick: function(event, data) {
          addLog('onButtonNextClick', data);
        },
        onButtonPreviousClick: function(event, data) {
          addLog('onButtonPreviousClick', data);
        },
        onButtonStartClick: function(event, data) {
          addLog('onButtonStartClick', data);
        },
        onOverlayClick: function(event, data) {
          addLog('onOverlayClick', data);
        },
        onScrollEnd: function(event, data) {
          addLog('onScrollEnd', data);
        },
        onScrollStart: function(event, data) {
          addLog('onScrollStart', data);
        },
        onStart: function (event, data) {
          addLog('onStart', data);
        }
      });
    });
    function addLog(name, data){
      var $log = $('.log.trigger-events');
      $log.append('<strong>> ' + name + '</strong> : ' + data.step.ptJsStep('option','templateData').content + '<br>');
      $log.scrollTop($log[0].scrollHeight);
    }
  });
</script>

Custom "click" events

Define custom "click" events.

Element 1 Element 2 Element 3

<div class="elements" style="margin:200px 0 0 200px">
  <span id="element1" class="label label-default custom-click-event">Element 1</span>
  <span id="element2" class="label label-default custom-click-event">Element 2</span>
  <span id="element3" class="label label-default custom-click-event">Element 3</span>
</div>
<div class="log custom-click-event" style="font-size:11px; max-height:200px; overflow-y:auto; padding:10px; background-color:#eee; margin-bottom:20px"></div>
<button id="run" type="button" class="btn btn-custom custom-click-event">Run Tour</button>
<script type="text/javaScript">
  $(function(){
    $('#run.custom-click-event').on('click', function() {
      $.ptJs({
        autoStart: true,
        templateData: {
          title: 'Custom "click" event'
        },
        templateViewWindow: '' +
          '<div class="step-container" ptjs-id="container">\n' +
            '<span class="step-button-close" ptjs-id="button-close" ptjs-data="button-close"></span>\n' +
            '<div class="step-header">\n' +
              '<div class="title" ptjs-data="title"></div>\n' +
            '</div>\n' +
            '<div class="step-body">\n' +
              '<div class="content" ptjs-data="content"></div><br>\n' +
              '<a href="#" ptjs-id="button-mylink">My Link</a>\n' +
              '<button type="button" ptjs-id="button-mybutton">My Button</button>\n' +
            '</div>\n' +
            '<div class="step-footer">\n' +
              '<span class="step-pagination" ptjs-id="pagination" ptjs-data="pagination"></span>\n' +
              '<div class="step-buttons">\n' +
                '<span ptjs-id="button-start" ptjs-data="button-start"></span>\n' +
                '<span ptjs-id="button-previous" ptjs-data="button-previous"></span>\n' +
                '<span ptjs-id="button-next" ptjs-data="button-next"></span>\n' +
                '<span ptjs-id="button-end" ptjs-data="button-end"></span>\n' +
              '</div>\n' +
            '</div>\n' +
          '</div>',
        steps: [
          {
            el: '#element1.custom-click-event',
            position:{
              location:'tl'
            },
            templateData: {
              content: 'Element 1'
            }
          },
          {
            el: '#element2.custom-click-event',
            position:{
              location:'tc'
            },
            templateData: {
              content: 'Element 2'
            }
          },
          {
            el: '#element3.custom-click-event',
            position:{
              location:'tr'
            },
            templateData: {
              content: 'Element 3'
            }
          }
        ],
        onButtonMylinkClick: function(evt, data) {
          data.evt.preventDefault();
          addLog('onButtonMylinkClick', data);
        },
        onButtonMybuttonClick: function(evt, data) {
          addLog('onButtonMybuttonClick', data);
        }
      });
    });
    function addLog(name, data){
      var $log = $('.log.custom-click-event');
      $log.append('<strong>> ' + name + '</strong> : ' + data.step.ptJsStep('option','templateData').content + '<br>');
      $log.scrollTop($log[0].scrollHeight);
    }
  });
</script>

Event data

Get data events.

Element 1 Element 2 Element 3

<div class="elements" style="margin:200px 0 0 200px">
  <span id="element1" class="label label-default event-data">Element 1</span>
  <span id="element2" class="label label-default event-data">Element 2</span>
  <span id="element3" class="label label-default event-data">Element 3</span>
</div>
<div class="log event-data" style="font-size:11px; max-height:200px; overflow-y:auto; padding:10px; background-color:#eee; margin-bottom:20px"></div>
<button id="run" type="button" class="btn btn-custom event-data">Run Tour</button>
<script type="text/javaScript">
  $(function(){
    $('#run.event-data').on('click', function() {
      $.ptJs({
        autoStart: true,
        templateData: {
          title: 'Event data'
        },
        steps: [
          {
            el: '#element1.event-data',
            position:{
              location:'tl'
            },
            templateData: {
              content: 'Element 1'
            }
          },
          {
            el: '#element2.event-data',
            position:{
              location:'tc'
            },
            templateData: {
              content: 'Element 2'
            }
          },
          {
            el: '#element3.event-data',
            position:{
              location:'tr'
            },
            templateData: {
              content: 'Element 3'
            }
          }
        ],
        onAfterClose: function(evt, data) {
          var slideInfo = data.step.ptJsStep('info');
          addLog('Slide is open', slideInfo.isOpen);
          addLog('Slide last button clicked', slideInfo.lastButtonClicked);
          $('.log.event-data').append('--------------------------------<br>');
        },
        onAfterOpen: function(evt, data) {
          var slideInfo = data.step.ptJsStep('info');
          addLog('Element DOM', slideInfo.$element.attr('id'));
          addLog('Slide DOM', slideInfo.$step.attr('id'));
          addLog('Is last slide', data.isLast);
          addLog('Is slide continue', data.isSlideContinue);
          addLog('Slides collection index', data.index);
          addLog('Slides collection', data.steps);
          addLog('Total slides collection', data.total);
        }
      });
    });
    function addLog(title, content){
      var $log = $('.log.event-data');
      $log.append('<strong>> ' + title + '</strong> : ' + content + '<br>');
      $log.scrollTop($log[0].scrollHeight);
    }
  });
</script>

Themes

PageTour.js use a theme mechanism:

  • HTML themes are defined in a jQuery object $.ptJsThemes.
    You have different way to override HTML themes as described in section Override Marker HTML, Override Window "Continue Tour" HTML and Override Window HTML
    window.$.ptJsThemes = {
      'classic': {
        templateViewContinue: '' +
          '<div class="step-container" ptjs-id="container">\n' +
            '<span class="step-button-close" ptjs-id="button-close" ptjs-data="button-close"></span>\n' +
            '<div class="step-header">\n' +
              '<div class="title" ptjs-data="title-continue"></div>\n' +
            '</div>\n' +
            '<div class="step-body">\n' +
              '<div class="content" ptjs-data="content-continue"></div>\n' +
            '</div>\n' +
            '<div class="step-footer">\n' +
              '<div class="step-buttons">\n' +
                '<span ptjs-id="button-restart" ptjs-data="button-restart"></span>\n' +
                '<span ptjs-id="button-continue" ptjs-data="button-continue"></span>\n' +
              '</div>\n' +
            '</div>\n' +
          '</div>\n',
        templateViewMarker: '<span class="step-marker-action"></span>',
        templateViewWindow: '' +
          '<div class="step-container" ptjs-id="container">\n' +
            '<span class="step-button-close" ptjs-id="button-close" ptjs-data="button-close"></span>\n' +
            '<div class="step-header">\n' +
              '<div class="title" ptjs-data="title"></div>\n' +
            '</div>\n' +
            '<div class="step-body">\n' +
              '<div ptjs-id="content" class="content" ptjs-data="content"></div>\n' +
            '</div>\n' +
            '<div class="step-footer">\n' +
              '<span class="step-pagination" ptjs-id="pagination" ptjs-data="pagination"></span>\n' +
              '<div class="step-buttons">\n' +
                '<span ptjs-id="button-start" ptjs-data="button-start"></span>\n' +
                '<span ptjs-id="button-previous" ptjs-data="button-previous"></span>\n' +
                '<span ptjs-id="button-next" ptjs-data="button-next"></span>\n' +
                '<span ptjs-id="button-end" ptjs-data="button-end"></span>\n' +
              '</div>\n' +
            '</div>\n' +
          '</div>\n',
      }
    }
  • CSS are defined in an individual file assets/themes/classic.css.

Classic theme

This is the theme by default.

Override the classic "theme" styles.

Element 1 Element 2 Element 3

<div class="elements" style="margin:200px 0 0 200px">
  <span id="element1" class="label label-default theme-classic">Element 1</span>
  <span id="element2" class="label label-default theme-classic">Element 2</span>
  <span id="element3" class="label label-default theme-classic">Element 3</span>
</div>
<button id="run" type="button" class="btn btn-custom theme-classic">Run Tour</button>
<style>
  /* ONE */
  .ptjs-theme.classic.one .step-container {
    background-color: #ff5252;
    color: #fff;
  }
  .ptjs-theme.classic.one .step-container .step-button-close {
    background-color: #fff;
    color: #ff5252;
  }
  .ptjs-theme.classic.one .step-container .step-button-close:hover {
    background-color: #f5f5f5;
  }
  .ptjs-theme.classic.one .step-container .step-header .title {
    color: #fff;
  }
  .ptjs-theme.classic.one .step-container .step-footer .step-pagination {
    color: #fff;
  }
  .ptjs-theme.classic.one .step-container .step-footer .step-buttons span {
    background-color: #fff;
    color: #ff5252;
  }
  .ptjs-theme.classic.one .step-container .step-footer .step-buttons span:hover {
    background-color: #f5f5f5;
  }
  .ptjs-theme.classic.one.step-arrow-top:after {
    border-color: #ff5252 transparent transparent transparent;
  }
  .ptjs-theme.classic.one.step-arrow-bottom:after {
    border-color: transparent transparent #ff5252 transparent;
  }
  .ptjs-theme.classic.one.step-arrow-left:after,
  .ptjs-theme.classic.one.step-arrow-ct-l-m:after,
  .ptjs-theme.classic.one.step-arrow-cb-l-m:after {
    border-color: transparent transparent transparent #ff5252;
  }
  .ptjs-theme.classic.one.step-arrow-lb:after,
  .ptjs-theme.classic.one.step-arrow-lm-t:after {
    border-color: transparent transparent transparent #ff5252;
  }
  .ptjs-theme.classic.one.step-arrow-right:after,
  .ptjs-theme.classic.one.step-arrow-ct-r-m:after,
  .ptjs-theme.classic.one.step-arrow-cb-r-m:after {
    border-color: transparent #ff5252 transparent transparent;
  }
  .ptjs-theme.classic.one.step-arrow-rb:after,
  .ptjs-theme.classic.one.step-arrow-rm-t:after {
    border-color: transparent #ff5252 transparent transparent;
  }
  /* TWO */
  .ptjs-theme.classic.two .step-container {
    background-color: rgba(0,0,0,0.8);
    border-radius: 5px;
    color: #fff;
  }
  .ptjs-theme.classic.two .step-container .step-button-close {
    background-color: #4dbcc5;
    color: #fff;
  }
  .ptjs-theme.classic.two .step-container .step-button-close:hover {
    background-color: #399da5;
  }
  .ptjs-theme.classic.two .step-container .step-header .title {
    color: #fff;
  }
  .ptjs-theme.classic.two .step-container .step-footer .step-pagination {
    color: #fff;
  }
  .ptjs-theme.classic.two .step-container .step-footer .step-buttons span {
    background-color: #4dbcc5;
    border-radius: 5px;
    color: #fff;
  }
  .ptjs-theme.classic.two .step-container .step-footer .step-buttons span:hover {
    background-color: #399da5;
  }
  .ptjs-theme.classic.two.step-arrow-top:after {
    border-color: rgba(0,0,0,0.8) transparent transparent transparent;
  }
  .ptjs-theme.classic.two.step-arrow-bottom:after {
    border-color: transparent transparent rgba(0,0,0,0.8) transparent;
  }
  .ptjs-theme.classic.two.step-arrow-left:after,
  .ptjs-theme.classic.two.step-arrow-ct-l-m:after,
  .ptjs-theme.classic.two.step-arrow-cb-l-m:after {
    border-color: transparent transparent transparent rgba(0,0,0,0.8);
  }
  .ptjs-theme.classic.two.step-arrow-lb:after,
  .ptjs-theme.classic.two.step-arrow-lm-t:after {
    border-color: transparent transparent transparent rgba(0,0,0,0.8);
  }
  .ptjs-theme.classic.two.step-arrow-right:after,
  .ptjs-theme.classic.two.step-arrow-ct-r-m:after,
  .ptjs-theme.classic.two.step-arrow-cb-r-m:after {
    border-color: transparent rgba(0,0,0,0.8) transparent transparent;
  }
  .ptjs-theme.classic.two.step-arrow-rb:after,
  .ptjs-theme.classic.two.step-arrow-rm-t:after {
    border-color: transparent rgba(0,0,0,0.8) transparent transparent;
  }
    /* THREE */
  .ptjs-theme.classic.three .step-container .step-button-close {
    background-color: #fff;
    color: #4dbcc5;
  }
  .ptjs-theme.classic.three .step-container .step-button-close:hover {
    background-color: #f5f5f5;
  }
  .ptjs-theme.classic.three .step-container  .step-header{
    padding: 20px;
    background-color: #4dbcc5;
  }
  .ptjs-theme.classic.three .step-container .step-header .title {
    color: #fff;
  }
  .ptjs-theme.classic.three .step-container .step-footer .step-pagination {
    color: #fff;
  }
  .ptjs-theme.classic.three .step-container .step-footer .step-buttons span {
    background-color: #fff;
    color: #4dbcc5;
  }
  .ptjs-theme.classic.three .step-container .step-footer .step-buttons span:hover {
    background-color: #f5f5f5;
  }
  .ptjs-theme.classic.three .step-container  .step-footer {
    background-color: #4dbcc5;
  }
  .ptjs-theme.classic.three.step-arrow-top:after {
    border-color: #4dbcc5 transparent transparent transparent;
  }
  .ptjs-theme.classic.three.step-arrow-bottom:after {
    border-color: transparent transparent #4dbcc5 transparent;
  }
  .ptjs-theme.classic.three.step-arrow-left:after{
    border-color: transparent transparent transparent #4dbcc5;
  }
  .ptjs-theme.classic.three.step-arrow-right:after {
    border-color: transparent #4dbcc5 transparent transparent;
  }
  .ptjs-theme.classic.three.step-arrow-rm:after {
    border-color: transparent #fff transparent transparent;
  }
  .ptjs-theme.classic.three.step-arrow-lm:after {
    border-color: transparent transparent transparent #fff;
  }
</style>
<script type="text/javaScript">
  $(function(){
    $('#run.theme-classic').on('click', function() {
      $.ptJs({
        autoStart: true,
        templateData: {
          title: 'Classic theme'
        },
        theme: 'classic',
        steps: [
          {
            el: '#element1.theme-classic',
            position:{
              location:'tl'
            },
            templateClass: {
              root: ['one']
            },
            templateData: {
              content: 'Element 1'
            }
          },
          {
            el: '#element2.theme-classic',
            position:{
              location:'tc'
            },
            templateClass: {
              root: ['two']
            },
            templateData: {
              content: 'Element 2'
            }
          },
          {
            el: '#element3.theme-classic',
            position:{
              location: 'tr'
            },
            templateClass: {
              root: ['three']
            },
            templateData: {
              content: 'Element 3'
            }
          }
        ]
      });
    });
  });
</script>

Api

Options

Option/Scope Default Type Description
animation.enableOnClode

tour/step

false boolean If true, enable animation on step closes.
animation.enableOnOpen

tour/step

true boolean If true, enable animation on step opens.
animation.duration

tour/step

0.5 number Sets animation duration(seconds).
animation.name

tour/step

['ptJs_fadeDirection'] array

Sets the name of animation to use on step starts and step ends.

['ptJs_fadeDirection']
same animation for step starts and step ends.

['ptJs_fadeDirection',
'ptJs_lightSpeed']

"ptJs_fadeDirection" for step starts
"ptJs_lightSpeed" for step ends.

List of animations

  • ptJs_bounce
  • ptJs_bounceDirection
  • ptJs_fade
  • ptJs_fadeDirection
  • ptJs_flipDirection
  • ptJs_lightSpeed
  • ptJs_roll
  • ptJs_rotate
  • ptJs_slideDirection
  • ptJs_zoom
  • ptJs_zoomDirection
autoDestroy

tour

true boolean If true, PageTour.js removes the PageTour.js JQuery widget completely. This will return the element back to its pre-init state.
autoStart

tour

false boolean If true, the tour starts automatically after its creation.
autoStartOnce

tour

false boolean

If true, the tour starts automatically only once.

Useful when you want to show the tour only once to your audience.

This option use localStorage to store data on client-side.

continueEnable

tour

false boolean

If true, PageTour.js stores each step of the tour, to be able to display a "Window Continue Tour" and restart the tour at the last step, if the user close the tour before its end.

This option use localStorage to store data on client-side.

display.markerSwitchTo

tour

'window' string

If 'window', the window shows when the user click on the marker.

If 'overlay', the overlay shows when the user click on the marker. This option is used to build a custom navigation.

display.markerShowOnce

tour

false boolean

If true, the marker shows only once.

This option use localStorage to store data on client-side.

display.mode

tour

'window' string

If 'window' the tour shows windows.

If 'marker' the tour shows markers.

If 'overlay' the tour shows overlay. This option is used to build a custom navigation.

el

step

'' string Sets the DOM element which creates the PageTour.js JQuery Widget.
keyboardNavigation

tour

true boolean If true, enable keyboard navgation using arrow keys (←, ↑, →, ↓).
instanceName

tour

'' string Sets the instance name. Useful to run muliple instance of PageTour.js on the same page.
modal

tour/step

false boolean If true, set the tour to modal mode.
overlay.color

tour/step

'rgba(0, 0, 0, 0.50)' string Sets overlay background color.
overlay.duration

tour/step

0.25 number Sets overlay duration(seconds).
overlay.enable

tour/step

true boolean If true, the overlay is visible.
overlay.mode

tour/step

'focus' string

If 'focus', the overlay shows around the element.

If 'all', the overlay shows over the element.

overlay.padding

tour/step

5 number Sets overlay padding(px) on 'focus' mode.
position.location

tour/step

'auto' string

Sets step location.

  • 'auto' = best possible location based on window size and element position.

List of outside locations:

  • Top
  • 'ct-l' = cornerTop-left
  • 'ct-l-c' = cornerTop-left-center
  • 'tl' = topLeft
  • 'tc-l' = topCenter-left
  • 'tc' = topCenter
  • 'tc-r' = topCenter-right
  • 'tr' = topRight
  • 'ct-r-c' = cornerTop-right-center
  • 'ct-r' = cornerTop-right
  • Bottom
  • 'cb-l' = cornerBottom-left
  • 'cb-l-c' = cornerBottom-left-center
  • 'bl' = bottomLeft
  • 'bc-l' = bottomCenter-left
  • 'bc' = bottomCenter
  • 'bc-r' = bottomCenter-right
  • 'br' = bottomRight
  • 'cb-r-c' = cornerBottom-right-center
  • 'cb-r' = cornerBottom-right
  • Left
  • 'ct-l-m' = cornerTop-left-middle
  • 'lt' = leftTop
  • 'lm-t' = leftMiddle-top
  • 'lm' = leftMiddle
  • 'lm-b' = leftMiddle-bottom
  • 'lb' = leftBottom
  • 'cb-l-m' = cornerBottom-left-middle
  • Right
  • 'ct-r-m' = cornerTop-right-middle
  • 'rt' = rightTop
  • 'rm-t' = rightMiddle-top
  • 'rm' = rightMiddle
  • 'rm-b' = rightMiddle-bottom
  • 'rb' = rightBottom
  • 'cb-r-m' = cornerBottom-right-middle
  • Window location
  • 'cm' = centerMiddle
  • 'tl' = topLeft
  • 'tc' = topCenter
  • 'tr' = topRight
  • 'bl' = bottomLeft
  • 'bc' = bottomCenter
  • 'br' = bottomRight
  • 'lm' = leftMiddle
  • 'rm' = rightMiddle

List of center/middle locations:

  • 'cm' = centerMiddle
  • Top
  • 'ct-l-c-m' = cornerTop-left-center-middle
  • 'tl-m' = topLeft-middle
  • 'tc-l-m' = topCenter-left-middle
  • 'tc-m' = topCenter-middle
  • 'tc-r-m' = topCenter-right-middle
  • 'tr-m' = topRight-middle
  • 'ct-r-c-m' = cornerTop-right-center-middle
  • Bottom
  • 'cb-l-c-m' = cornerBottom-left-center-middle
  • 'bl-m' = bottomLeft-middle
  • 'bc-l-m' = bottomCenter-left-middle
  • 'bc-m' = bottomCenter-middle
  • 'bc-r-m' = bottomCenter-right-middle
  • 'br-m' = bottomRight-middle
  • 'cb-r-c-m' = cornerBottom-right-center-middle
  • Left
  • 'lt-c' = leftTop-center
  • 'lm-t-c' = leftMiddle-top-center
  • 'lm-c' = leftMiddle-center
  • 'lm-b-c' = lefttMiddle-bottom-center
  • 'lb-c' = leftBottom-center
  • Right
  • 'rt-c' = rightTop-center
  • 'rm-t-c' = rightMiddle-top-center
  • 'rm-c' = rightMiddle-center
  • 'rm-b-c' = rightMiddle-bottom-center
  • 'rb-c' = rightBottom-center

List of inside locations:

  • Top
  • 'tl-b' = topLeft-bottom
  • 'tc-l-b' = topCenter-left-bottom
  • 'tc-b' = topCenter-bottom
  • 'tc-r-b' = topCenter-right-bottom
  • 'tr-b' = topRight-bottom
  • Bottom
  • 'bl-t' = bottomLeft-top
  • 'bc-l-t' = bottomCenter-left-top
  • 'bc-t' = bottomCenter-top
  • 'c-r-t' = bottomCenter-right-top
  • 'br-t' = bottomRight-top
  • Left
  • 'lm-t-r' = leftMiddle-top-right
  • 'lm-r' = leftMiddle-right
  • 'lm-b-r' = leftMiddle-bottom-right
  • Right
  • 'rm-t-l' = rightMiddle-top-left
  • 'rm-l' = rightMiddle-left
  • 'rm-b-l' = rightMiddle-bottom-left
position.locationMobile

tour/step

'auto' string Sets step location for mobile (width < 768px) (same option than 'position.location').
position.relocate

tour/step

false boolean If true, PageTour.js automatically relocate your step while window scrolling or resizing.
scrollDuration

tour/step

750 number Sets scroll duration(milliseconds).
showButtonClose

tour

true boolean If true, the 'close' button is visible.
size.minWidth

tour/step

200 number Sets window minimum width.
size.resizable

tour/step

true boolean If true, the window width resizes until its reach the minWidth.
size.width

tour/step

300 number Sets window width.
steps

tour

[{}] array of objects

Sets steps collection.


$.ptJs({  
  steps: [
    {
      el: '#element1',
      position:{
        location:'tl'
      },
      templateData: {
        content: 'Element 1'
      }
    }
  ]
});
            

startAt

tour

0 number Sets the index of the start step.
templateClass

tour/step

{} object

Add/Overrides 'class' into template-view.

Check the Template Class demo and the $.ptJsThemes JQuery object to see how it works.

templateData

tour/step

{} object

Add/Overrides 'data' into template-view.

Check the Template Data demo and the $.ptJsThemes JQuery object to see how it works.

templateStyle

tour/step

{} object

Add/Overrides 'style' into template-view.

Check the Template Style demo and the $.ptJsThemes JQuery object to see how it works.

templateViewMarker

tour/step

'' string

Overrides 'marker' template-view.

Check the Template View Marker demo and the $.ptJsThemes JQuery object to see how it works.

templateViewContinue

tour

'' string

Overrides 'continue' template-view.

Check the Template View Continue demo and the $.ptJsThemes JQuery object to see how it works.

templateViewWindow

tour/step

'' string

Overrides 'window' template-view.

Check the Template View Window demo and the $.ptJsThemes JQuery object to see how it works.

theme

tour/step

'classic' string Sets the theme to use.
windowMargin

tour

20 number Sets the window margin for the step.

Events

Event Description
All Events (event, data)

All PageTour.js events have the same returned parameters.

  • event
    The event object is guaranteed to be passed to the event handler (no checks for window.event required). It normalizes the target, relatedTarget, which, metaKey and pageX/Y properties and provides both stopPropagation() and preventDefault() methods.
  • data.index
    Gets current step index.
  • data.isLast
    Returns true, if the current step is the last one.
  • data.isStepContinue
    Returns true, if current step is continue-window.
  • data.step
    Returns the current step JQuery widget.
    • data.step.ptJsStep('info').$element
      Return the JQuery element to which the widget is attached.
    • data.step.ptJsStep('info').isOpen
      Return true, if the widget is open.
    • data.step.ptJsStep('info').lastButtonClicked
      Return the last button clicked on the widget.
    • data.step.ptJsStep('info').$step
      Return the JQuery step to which the widget is attached.
    • data.step.ptJsStep('info').$marker
      Return the JQuery marker to which the widget is attached.
  • data.total
    Returns the total of JQuery widget steps in the collection.

// Exemple
$.ptJs({  
  steps: [
    {
      el: '#element1',
      position:{
        location:'tl'
      },
      templateData: {
        content: 'Element 1'
      }
    }
  ],
  onStart: function (event, data) {
    var stepInfo = data.step.ptJsStep('info');
   
    // Change element style
    stepInfo.$element.css('border','3px dashed #99cc00');

    // Change step style
    stepInfo.$step.css('border','3px dashed #ff6600');

    // Change step data
    data.step.ptJsStep('option','templateData', {
      content: 'Change the content of Element 1'
    });
  }
});
            
onAfterAnimate (event, data)

This event is triggered after the 'animation' ends.

onAfterClose (event, data)

This event is triggered after 'step' closes.

onAfterOpen (event, data)

This event is triggered after 'step' opens.

onBeforeAnimate (event, data)

This event is triggered before 'animation' starts.

onBeforeClose (event, data)

This event is triggered before 'step' closes.

onBeforeOpen (event, data)

This event is triggered before 'step' opens.

onButtonCloseClick (event, data)

This event is triggered on button 'close' clicks.

onButtonContinueClick (event, data)

This event is triggered on button 'continue' clicks.

onButtonEndClick (event, data)

This event is triggered on button 'end' clicks.

onButtonNextClick (event, data)

This event is triggered on button 'next' clicks.

onButtonPreviousClick (event, data)

This event is triggered on button 'previous' clicks.

onButtonRestartClick (event, data)

This event is triggered on button 'restart' clicks.

onButtonStartClick (event, data)

This event is triggered on button 'start' clicks.

onDestroy (event, data)

This event is triggered on 'tour' destroys.

onMarkerClick (event, data)

This event is triggered on 'marker' clicks.

onOverlayClick (event, data)

This event is triggered on 'overlay' clicks.

onScrollEnd (event, data)

This event is triggered after 'scroll' ends.

onScrollStart (event, data)

This event is triggered before 'scroll' starts.

onStart (event, data)

This event is triggered when the 'tour' starts.

Methods

Method Description
end([instanceName])

Ends the tour

  • instanceName
    The name of the instance to set.


$.ptJs('end');
            

info([instanceName])
  • instanceName
    The name of the instance to set.

Returns tour data informations

  • index
    Gets current step index.
  • isLast
    Returns true, if the current step is the last one.
  • isStepContinue
    Returns true, if current step is continue-window.
  • step
    Returns the current step JQuery widget.
    • step.ptJsStep('info').$element
      Returns the JQuery element to which the widget is attached.
    • step.ptJsStep('info').isOpen
      Returns true, if the widget is open.
    • step.ptJsStep('info').lastButtonClicked
      Return the last button clicked on the widget.
    • step.ptJsStep('info').$step
      Returns the JQuery step to which the widget is attached.
    • step.ptJsStep('info').$marker
      Returns the JQuery marker to which the widget is attached.
  • steps
    Returns the JQuery widget steps collection.
  • total
    Returns the total of JQuery widget steps in the collection.


var stepInfo = $.ptJs('info').step.ptJsStep('info');
stepInfo.$element.css('border', '3px dashed #99cc00');
stepInfo.$step.css('border', '3px dashed #ff6600');
$.ptJs('info').step.ptJsStep('option', 'templateData', {
  content: 'Change the content of Element 1'
});
            

next([instanceName])

Displays the next step

  • instanceName
    The name of the instance to set.


$.ptJs('next');
            

previous([instanceName])

Displays the previous step

  • instanceName
    The name of the instance to set.


$.ptJs('previous');
            

resetStorage([instanceName])

Resets client-side data storage

  • instanceName
    The name of the instance to set.


$.ptJs('resetStorage');
            

start([instanceName])

Starts the tour

  • instanceName
    The name of the instance to set.


$.ptJs('start');
            

Release log

Change in PageTour.js 1.1.1

Bug fixes
  • Fix "onKey" event from blocking all browser events.

Change in PageTour.js 1.1.0

Improvements
  • jQuery Cache $('body') in global.
  • Change all (js, css, ...) "slide" references to "step" references
  • Change wrapper name "_WRAPPER_SLIDES_ID" to "_WRAPPER_STEPS_ID"
  • Change option name "slides" to "steps"
  • Change option value "display.mode = slide" to "display.mode = window"
  • Change option name "templateViewSlide" to "templateViewWindow"
  • Move 'overlays' DOM to a custom wrapper name => '_WRAPPER_OVERLAYS_ID'

Change in PageTour.js 1.0.1

Improvements
  • Added default 'ptjs-id' attribute to 'classic' theme.
  • Concat "custom lodash function" in "ptjs.min.js" file.
Bug fixes
  • Fix 'full' overlay when 'document' selector.

Support

How to contact-us

If you didn't find an answer to your problem, please ask your question on the item discussion page or send us a private message from our Codecanyon profile page (See the "Email gamaki-studio" box on the right sidebar) - in this case we will reply via email. We can answer your support questions only in these ways, please do not email us directly.

IMPORTANT! For fast troubleshooting, please send us detailed information about the issue you're experiencing. Also send us your site URL whenever it's possible, so we can check your PageTour.js implementation for potential issues and quickly suggest a solution. Please note, that we cannot troubleshoot from screencast videos or screenshots.

Please be patient as it takes some time until we respond (usually in 24 - 48 hours).