diff --git a/README.md b/README.md
index 809f6a5..5b6ea48 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,12 @@
 # LagRadar
 
-> It's a sexy little lag radar for demonstrating performance - or lack of.
+> It's a sexy little component for demonstrating performance - or lack of in your javascript application.
 
 Add this to any javascript application and you can see when the app drops below
 60fps as the radar sweep changes colour and gets janky.
 
-[Demo](https://mobz.github.io/lag-radar/)
+[Get your live demo](https://mobz.github.io/lag-radar/)
+[Extra awesome as Bookmarklet](https://mobz.github.io/lag-radar/bookmarklet.html)
 
 ## Usage
 
diff --git a/bookmarklet.html b/bookmarklet.html
index 7dc0f39..40f4cb1 100644
--- a/bookmarklet.html
+++ b/bookmarklet.html
@@ -25,6 +25,9 @@
         font-size: 75%;
         color: #aaa;
       }
+      VIDEO {
+        margin: 40px auto;
+      }
     </style>
   </head>
   <body>
@@ -48,7 +51,7 @@ <h1>Lag Radar - Bookmarklet</h1>
 document.querySelector('#bookmarklet').setAttribute('href', linkSource());
 
     </script>
-
+    <video width="532" height="458" autoplay="true" loop="true" src="bookmarklet.mp4"></video>
 
 
   </body>
diff --git a/bookmarklet.mp4 b/bookmarklet.mp4
new file mode 100644
index 0000000..cf5368f
Binary files /dev/null and b/bookmarklet.mp4 differ
diff --git a/index.css b/index.css
index 780fc1a..4b84646 100644
--- a/index.css
+++ b/index.css
@@ -21,3 +21,11 @@ BODY {
   text-align: right;
   width: 3em;
 }
+
+#link {
+  margin: 6em auto;
+}
+
+A {
+  color: #42f;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 8c62b55..a04c9e7 100644
--- a/index.html
+++ b/index.html
@@ -12,12 +12,17 @@ <h1>Lag Radar</h1>
       <input id="lag" type="range" min="0" max="1000" value="0">
       <span id="val">0</span>ms
     </div>
-
+    <div id="radar"></div>
+    <div id="link">
+      Install the <a href="./bookmarklet.html">lag-radar as a bookmarklet</a> and use it on any page.
+    </div>
     <script type="module">
 
 import lagRadar from './lag-radar.js';
 
-const destroy = lagRadar();
+const destroy = lagRadar({
+  parent: document.querySelector('#radar')
+});
 
 // document.body.addEventListener('click', destroy );
 
diff --git a/lag-radar-ui.js b/lag-radar-ui.js
index 26c3313..b79c312 100644
--- a/lag-radar-ui.js
+++ b/lag-radar-ui.js
@@ -11,28 +11,28 @@ export default function lagRadarUI() {
   }
   const $style = document.createElement('style');
   $style.appendChild(document.createTextNode(`
-    BODY #lagRadarBM.lagRadarBM-radar {
+    BODY #lagRadarUI.lagRadarUI-radar {
       font-family: Futura, "Trebuchet MS", sans-serif;
       font-style: normal;
       text-align: center;
       font-size: 16px;
     }
-    .lagRadarBM-radar {
+    .lagRadarUI-radar {
       position: fixed;
       z-index: 999999;
       top: 100px;
       left: 100px;
       user-select: none;
     }
-    .lagRadarBM-radar.active {
+    .lagRadarUI-radar.active {
       outline: 3px dotted rgba(100,100,100,0.5);
       cursor: ns-resize;
     }
-    .lagRadarBM-radar.active .lagRadarBM-title,
-    .lagRadarBM-radar:hover .lagRadarBM-title {
+    .lagRadarUI-radar.active .lagRadarUI-title,
+    .lagRadarUI-radar:hover .lagRadarUI-title {
       visibility: visible;
     }
-    .lagRadarBM-title {
+    .lagRadarUI-title {
       position: absolute;
       display: flex;
       width: 210px;
@@ -48,43 +48,43 @@ export default function lagRadarUI() {
       border-radius: 10px;
       opacity: 0.85;
     }
-    .lagRadarBM-title > * {
+    .lagRadarUI-title > * {
       padding: 0 10px;
     }
-    .lagRadarBM-title > .active,
-    .lagRadarBM-title > *:hover {
+    .lagRadarUI-title > .active,
+    .lagRadarUI-title > *:hover {
       background: #4a0;
       color: #efd;
     }
-    .lagRadarBM-title > *:first-child {
+    .lagRadarUI-title > *:first-child {
       border-radius: 8px 0 0 8px;
     }
-    .lagRadarBM-title > *:last-child {
+    .lagRadarUI-title > *:last-child {
       border-radius: 0 8px 8px 0;
     }
-    .lagRadarBM-close {
+    .lagRadarUI-close {
       cursor: pointer;
     }
-    .lagRadarBM-label {
+    .lagRadarUI-label {
       flex-grow: 1;
       cursor: -webkit-grab;
       cursor: grab;
     }
-    .lagRadarBM-label.active {
+    .lagRadarUI-label.active {
       cursor: -webkit-grabbing;
       cursor: grabbing;
     }
-    .lagRadarBM-rsize {
+    .lagRadarUI-rsize {
       line-height: 19px;
       cursor: ns-resize;
     }
-    .lagRadarBM-sweep {
+    .lagRadarUI-sweep {
       pointer-events: none;
     }
   `));
   function $e(cls, children = []) {
     const el = document.createElement('div');
-    el.className = 'lagRadarBM-' + cls;
+    el.className = 'lagRadarUI-' + cls;
     children.forEach( child => el.appendChild( child ) );
     return el;
   }
@@ -96,7 +96,7 @@ export default function lagRadarUI() {
   const $sweep = $e('sweep');
   const $radar = $e('radar', [ $style, $title, $sweep ] );
 
-  $radar.id = 'lagRadarBM';
+  $radar.id = 'lagRadarUI';
   const RESIZE = 1, MOVE = 2;
   let mode = null, origSize = 300, size = 300, offsetX, offsetY;
   const mouseDown = ev => {
