Simple and easy integration guide for your website.
Step-by-step or several steps at once explain its functionality.
Place WebTour files on a server and then adds them to the page. Make sure that the jQuery library is included.
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<!-- Add WebTour -->
<link href="styles/WebTour.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="scripts/WebTour.js"></script>
jQuery(document).ready(function () {
WebTour.config = {
background: '0,0,0',
backgroundOpacity: 0.8,
button: 'auto',
startInFirstStep: true,
scrollAuto: true,
detectResizeWindow: false,
autoplay: false
};
WebTour.create({
0: [{
element: "#EmbedJS h1 span",
description: "- easy integration<br>- infinitely position<br>- full documentation & examples<br>- more, more and more...",
position: "r",
padding: 5,
lineA: 50,
closeSign: false
},
{
element: "#EmbedJS h1 span",
description: "simple guide for Your website",
position: "bl",
padding: 5,
lineA: 20,
lineB: 35,
next: false,
closeSign: false
}],
1: [{
element: ".fb-like",
description: "Click here to liked WebTour ;]",
position: "rb",
padding: 5,
closeSign: false
}]
});
WebTour.init();
});
Config
background | background color in rgbString; Default value: 0,0,0 |
backgroundOpacity | the value of transparency backgroundNumber; Default value: 0.8 |
button | visibility of navigation buttonsString | Boolean; Value: auto | true | false; Default value: auto |
startInFirstStep | start guide from the first stepBoolean; Default value: true |
scrollAuto | auto-scroll to the visible elementBoolean; Default value: true |
detectResizeWindow | detect window resizeBoolean; Default value: false |
autoplay | autoplay stepsBoolean; Default value: false |
Steps
element | presented a page elementString |
description | description of elementString |
position | position description windowString; Value: tl | t | tr | rt | r | rb | br | b | bl | lb | l | lt |
padding | extra space between the frame and the presented elementInteger; Default value: 0 |
lineA | size of the first lineInteger; Default value: 100 |
lineB | size of the second lineInteger; Default value: 150 |
radius | rounded cornersBoolean; Default value: true |
closeSign | whether to be shown an "x" to close the guideBoolean; Default value: true |
closeButton | whether to be shown the "Close"Boolean; Default value: false |
duration | the duration of the display stepInteger; Default value: 2500; 2500 = 2.5s | 1000 = 1s |