If you need to provide your users a quick intro to your app or new features that you have just released, you might want to give Anno.js a try. Of the several frameworks I sampled, this is was the sharpest looking and easiest to work with (for me, maybe for you too).
To configure:
1). Link to or host the required files in the DemoAnno.html <head> (see code on GitHub).
2). Configure the annoJS object by setting targets (by element selector, '#demo', '.walkDivs', etc.)
3). Create a button and set its onClick() == anno.show(); //anno, or the name of the annoJS object
And in 3 simple steps, you have a walkthrough:
All credit to @iamdanfox who created this great .js plug in. Here is the htm page source code, see references below for more:
GitHub: https://github.com/Radagast27/AnnoJS_WalkthroughDemo
References: http://iamdanfox.github.io/anno.js/
https://github.com/iamdanfox/anno.js#usage
To configure:
1). Link to or host the required files in the DemoAnno.html <head> (see code on GitHub).
2). Configure the annoJS object by setting targets (by element selector, '#demo', '.walkDivs', etc.)
3). Create a button and set its onClick() == anno.show(); //anno, or the name of the annoJS object
And in 3 simple steps, you have a walkthrough:
All credit to @iamdanfox who created this great .js plug in. Here is the htm page source code, see references below for more:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="anno.js" type="text/javascript"></script>
<script src="jquery.scrollintoview.min.js" type="text/javascript"></script>
<link href="anno.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="background-color='gray'; margin-left:33%;">
<b><i>Use this guided tour to see our latest features!</i></b>
<br/>
<button type="button" class="btn btn-default" onclick="anno.show();">Show Tour</button>
<br/>
<br/>
<div id="demo" style="width:27%;">
Your new login button is here: <button name="LOGIN" value="LOGIN">LOGIN</button>
<div>
</div>
<br />
</body>
<script>
var anno = new Anno([{
target: '#demo',
position:'left',
content: "This is our shiny new left div edge!",
buttons: [AnnoButton.NextButton]
}, {
target: '#demo',
position:'right',
content: "...and on the right...",
buttons: [AnnoButton.BackButton]
}]);
</script>
<html>
Note the NextButton and BackButton- these are very useful for app walkthroughs
GitHub: https://github.com/Radagast27/AnnoJS_WalkthroughDemo
References: http://iamdanfox.github.io/anno.js/
https://github.com/iamdanfox/anno.js#usage
No comments:
Post a Comment