diff --git a/example/index.html b/example/index.html
index 0c729d4..8b68a77 100644
--- a/example/index.html
+++ b/example/index.html
@@ -1,63 +1,88 @@
 <!DOCTYPE html>
 <html lang="en" ng-app="app">
-  <head>
-    <meta charset="utf-8">
-    <title>Chardin.js</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Chardin.js - Better introductions for websites and features with a step-by-step guide for your projects.">
-    <meta name="author" content="Pablo Fernandez">
-
-    <!-- styles -->
-    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
-    <link href="css/bootstrap.min.css" rel="stylesheet">
-    <link href="css/demo.css" rel="stylesheet">
-
-    <link href="../bower_components/chardin.js/chardinjs.css" rel="stylesheet">
-
-    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
-
-    <script src="../bower_components/jQuery/dist/jquery.min.js"></script>
-    <script src="../bower_components/chardin.js/chardinjs.min.js"></script>
-    <script src="../bower_components/angular/angular.js"></script>
-    <script src="../lib/angular-help-overlay.js"></script>
-    <script src="js/app.js"></script>
-    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
-  </head>
-
-  <body ng-controller="MainCtrl" help-overlay="showHelp" overlay-start-callback="onStart(event)" overlay-stop-callback="onStop(event)">
-    <div class="container" >
-      <div class="jumbotron">
-        <h1 data-intro="Project title" data-position="right">Chardin.js</h1>
-        <p class="lead">
-          Simple overlay instructions for your apps.
+<head>
+  <meta charset="utf-8">
+  <title>Chardin.js</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description"
+        content="Chardin.js - Better introductions for websites and features with a step-by-step guide for your projects.">
+  <meta name="author" content="Pablo Fernandez">
+
+  <!-- styles -->
+  <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
+  <link href="css/bootstrap.min.css" rel="stylesheet">
+  <link href="css/demo.css" rel="stylesheet">
+
+  <link href="../bower_components/chardin.js/chardinjs.css" rel="stylesheet">
+
+  <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
+
+  <script src="../bower_components/jQuery/dist/jquery.min.js"></script>
+  <script src="../bower_components/chardin.js/chardinjs.min.js"></script>
+  <script src="../bower_components/angular/angular.js"></script>
+  <script src="../lib/angular-help-overlay.js"></script>
+  <script src="js/app.js"></script>
+  <script>!function (d, s, id) {
+    var js, fjs = d.getElementsByTagName(s)[0];
+    if (!d.getElementById(id)) {
+      js = d.createElement(s);
+      js.id = id;
+      js.src = "https://platform.twitter.com/widgets.js";
+      fjs.parentNode.insertBefore(js, fjs);
+    }
+  }(document, "script", "twitter-wjs");</script>
+</head>
+<!-- You need CSS like this if you are using a wrapper element instead of the body -->
+<style>
+  body, html {
+    height: 100%;
+  }
+</style>
+<body ng-controller="MainCtrl">
+<!--
+You don't need a wrapper if you can use the body directly, we cannot here as we put the controller on it, but
+in most applications you can use the router to specify the controller freeing up the body. You want to use this
+on a outer most wrapper as the backdrop works off the element it's placed on.
+-->
+<div help-overlay="showHelp" overlay-start-callback="onStart(event)" overlay-stop-callback="onStop(event)"
+     style="height: 100%;">
+  <div class="container">
+    <div class="jumbotron">
+      <h1 data-intro="Project title" data-position="right">Chardin.js</h1>
+
+      <p class="lead">
+        Simple overlay instructions for your apps.
+      </p>
+      <img src="img/chardin.png"
+           data-intro="An awesome 18th-century painter, who found beauty in everyday, common things."
+           data-position="right"/>
+      <a href="#" class="btn btn-large primary" data-toggle="chardinjs"
+         data-intro="This button toggles the overlay, you can click it, even when the overlay is visible"
+         data-position="left" ng-click="toggleHelp()">See it in action</a>
+      <a href="" id="opentour" class="hide" data-toggle="chardinjs">Or open it again</a>
+
+      <div class="credits">
+        <p data-intro="Author of this plugin, aka Pablo Fernandez" data-position="right">
+          Baked with
+          <b>&lt;3</b>
+          by
+          <a href="https://github.com/heelhook">@heelhook</a>.
         </p>
-        <img src="img/chardin.png" data-intro="An awesome 18th-century painter, who found beauty in everyday, common things." data-position="right" />
-        <a href="#" class="btn btn-large primary" data-toggle="chardinjs" data-intro="This button toggles the overlay, you can click it, even when the overlay is visible"
-           data-position="left" ng-click="toggleHelp()">See it in action</a>
-        <a href="" id="opentour" class="hide" data-toggle="chardinjs">Or open it again</a>
-        <div class="credits">
-          <p data-intro="Author of this plugin, aka Pablo Fernandez" data-position="right">
-            Baked with
-            <b>&lt;3</b>
-            by
-            <a href="https://github.com/heelhook">@heelhook</a>.
-          </p>
-        </div>
       </div>
+    </div>
 
+    <div class="links">
+      <p id="links" data-intro="Links to Github, Twitter, etc." data-position="bottom">
+        <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Check out Chardin.js, simple overlay instructions for apps" data-count="none" data-via="heelhookrc">Tweet</a>
+        <a href="https://twitter.com/heelhookrc" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @heelhookrc</a>
+      </p>
+    </div>
 
-        <div class="links">
-          <p id="links" data-intro="Links to Github, Twitter, etc." data-position="top">
-            <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Check out Chardin.js, simple overlay instructions for apps, https://heelhook.github.com/chardin.js" data-count="none" data-via="pablo2dot0">Tweet</a>
-            <a href="https://twitter.com/pablo2dot0" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @pablo2dot0</a>
-            <iframe style="display: inline-block;" frameborder="no" scrolling="no" height="30px" width="70px" src="http://hnlike.com/upvote.php?link=http%3A%2F%2Fheelhook.github.com&title=Chardin">iframes not supported by your browser</iframe>
-          </p>
-        </div>
-
-<div class="license">
-  Code licensed under the
-  <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>.
-</div>
+    <div class="license">
+      Code licensed under the
+      <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>.
+    </div>
+  </div>
 </div>
 </body>
 </html>
