Download
User Rating: 4.6/5 ( 1 votes)
SiteHelp.Js is a very helpful Javascript plugin made using jQuery to provide interactive site help. Sometimes it happens that a user visits a webpage and he totally helpless as where to navigate next. SiteHelp.js helps such users by navigating them to the important sections or html elements of a website and provide some help guidelines which they could have missed otherwise. It simply creates a virtual tour of the website.
It is very simple and easy to integrate this plugin in an existing website as it is very light weight, just a small javascript code with no images or extra css files. Also it does not requires much coding skills, it requires just few parameters to be initialized and the rest it will mange on its own.
Source: technoplugin.com
1. INCLUDE JS FILES
<script src="//code.jquery.com/jquery-1.7.1.js"></script>
<script src="~/Scripts/SiteHelp.js"></script>
2. HTML
<div class="selector1">
...
</div>
<div class="selector2">
...
</div>
<div id="selector3">
...
</div>
<div id="selector4">
...
</div>
3. JAVASCRIPT
$.sitehelpjq({
HelpModel: [{ selector: ".selector1", text: "Help text for selector1" },
{ selector: ".selector2", text: "Help text for selector2" },
{ selector: "#selector3", text: "Help text for selector3" },
{ selector: "#selector4", text: "Help text for selector4" },]
});
4. OPTIONS
All the customization parameters are optional which you could provide if you need to customize SiteHelp as per your need.
$.sitehelpjq({
HelpModel: [{ selector: ".selector1", text: "Help text for selector1" },
{ selector: ".selector2", text: "Help text for selector2" },
//customization for a particular help
{ selector: "#selector3", text: "Help text", FontSize:"10px", FontColor:"#cdcdcd", FontFamily:"comic sans ms" },
{ selector: "#selector4", text: "Help text for selector4" },],
});
Background: "#eeeeee", //change the background color of the help box
FontSize: "20px", //change the font size of help text
FontColor: "#000000", // change the font color of help text
ButtonBackground: "#cdcdcd", //change the background color of next, previous and close buttons
ButtonFontSize: "15px", //change the button font size
ButtonFontColor: '#efefef', //change the font color of button text
NextText: "-->", //change the text of next button
PreviousText: "<--", // change the text of previous button
CloseText:"Skip", //change the text of close button
FontFamily: "Arial", //change the font family for SiteHelp
modal: true, //show a modal background while navigating in help functionality
//A starting text to make user aware of that help functionality is present here
StartText: "Press next to start a help tour for this site."
JS Tutorial
