Dialog Start tour

eTour

eTour is a plugin that allows you to take your visitors on a trip true your site, showing them, for example the new features of your site. You can choose between 3 types of tours, 'timer', 'step' and 'all'.

Basic

Build your own tour.

How to use

How to use HTML elements.

Markup
<a href="javascript:void(0);" id="start-tour">Start the tour</a>
    ...
    ...
    
<div id="step-1" style="display:none;">
content goes here
</div>
                                            

Usage plugin

How to use our custom made jQuery plugins.

Markup
$('#start-tour').eTour({
      type: 'step',
      time: '00:30',
      showTimer: true,
      showArrow: true,
      timerLabel: 'Next step in: ',
      stopButton: '#e-tour-stop',
      draggable: false,
      effectSpeed:500,
      easyCancel: true,
      endLabel: 'End',
      step:[
          {
              hookTo: '#widget1',
              content: '#step-1',
              width: 500,
              title: 'The first step',
              arrowPosition: 'rb',
              offsetY: 0,
              offsetX: 0,
              prevLabel: 'Go back',
              nextLabel: 'Continue',
              center: 'hook',
              onShow: function(){}
          },
          { //more steps },
          { //more steps },
          { //more steps }							
      ],
      onStop: function(){}
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Default Desctription Since
type string step This is the type of tour option, you can choose between 'timer', which will automate the tour, 'step', this will allow you to go trough all of the steps with a click(prev/next) and 'all', which will show all of the steps at once. 1.0
time time format 00:30 You can set a time if you are using the type 'timer'. Notice that that you can set a time up to almost an hour, so you have to use the time format as displayed! 1.0
showTimer boolean true Show the countdown timer if you are using the type 'timer'. 1.0
showArrow boolean true You can remove the arrows and let the steps float more(using the offsetX and offsetY). 1.0
timerLabel string Next step in: The label that is used for the type 'timer' with the options 'showTimer' set to true. 1.0
stopButton string #e-tour-stop' This is the link to the stop button, which allows you to stop the tour. 1.0
draggable boolean false Allow users to drag the steps. 1.0
effectSpeed number(integer) 500 Set the speed of the effects(show and hide steps). 1.0
easyCancel boolean true Easy cancel is if a user wants to stop the tour it can just click outside the steps and the tour will stop. 1.0
endLabel string End: The label that is used for the type 'step' end button, which you can find in every last step. 1.0
step: { [
hookTo string This is the div(or other element) where you want to the step to hook to(connect). 1.0
content string To make this plugin easier, you can link to the content of the step, this way you wont have to add the text to the plugin itselfe, and you can use markup in the content if you want. 1.0
width number(integer) 300 You have to set the width of the step. 1.0
arrowPosition string rb This is where the arrow will connect to. You can choose between every corner and the middle of each side. Choose betweem 'rt', 'rm' , 'rb', 'br', 'bm', 'bl', 'lb', 'lm', 'lt', 'tl', 'tm', 'tr' (tr = top right, lm = left middle) 1.0
offsetY number(integer) 0 Offset Y. You can use negative value's(example: -45). 1.0
offsetX number(integer) 0 Offset X. You can use negative value's(example: -45). 1.0
prevLabel string Go back The label of the previous/back button used by the type 'step'. 1.0
nextLabel string Continue The label of the next button used by the type 'step'. 1.0
center string hook You can choose between centering the hook or the step. If the hook is bigger than the window it will center the step instead of the hook. Choose between 'hook' or 'step'. 1.0
onShow function function(){} Callback function that runs when the step is showen. 1.0
]}
onStop function function(){} Callback function that runs after the tour has finished. 1.0

Globally And Per-Call Overridable Options

This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: $.fn.pluginName.key = 'value';