diff --git a/README.md b/README.md
index 155af5d..b04a721 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,19 @@
-## Instructions
+## Build
+
+```
+npm install
+```
+
+```
+gulp build
+```
+
+NOTE:
+
+The ZIP file in the dist directory is just for convenience in case multiple artifacts are published on a server. This
+gadget file (wakatime.xml) is self containing (everything is inlined); easier to handle.
+
+## Hangout Integration
 
 ### Dev Console
 
@@ -8,7 +23,12 @@ NOTE:
 
 At the moment it's a bit confusing; the new UI doesn't seem to be complete; some tasks had to be done with old one.
 
-## Install
+### Install
 
 The gadget doesn't have to be public. If you've finished the process with the dev console you'll see it in your Hangout
-widget list (dev category).
\ No newline at end of file
+widget list (dev category).
+
+### Note
+
+The URL that I am using points to the raw Github file (https://raw.../wakatime.xml). This is just for testing. Ultimately
+it should be hosted on a proper server.
\ No newline at end of file
diff --git a/gadget/index.html b/gadget/index.html
new file mode 100644
index 0000000..4cdc5f8
--- /dev/null
+++ b/gadget/index.html
@@ -0,0 +1 @@
+<h3>Wakatime Hangout</h3>
\ No newline at end of file
diff --git a/gadget/scripts/wakatime.js b/gadget/scripts/wakatime.js
index e69de29..6bebd19 100644
--- a/gadget/scripts/wakatime.js
+++ b/gadget/scripts/wakatime.js
@@ -0,0 +1,82 @@
+/* global gapi, gadgets, $ */
+
+var logoUrl = 'https://wakatime.com/static/img/wakatime-white-120.png';
+var overlayEffect = null;
+
+function sendHeartbeat(file, time, project, language, isWrite, lines) {
+    // TODO
+}
+
+function createTextOverlay(string) {
+    // Create a canvas to draw on
+    var canvas = document.createElement('canvas');
+    canvas.setAttribute('width', 166);
+    canvas.setAttribute('height', 100);
+
+    var context = canvas.getContext('2d');
+
+    // Draw background
+    context.fillStyle = '#BBB';
+    context.fillRect(0,0,166,50);
+
+    // Draw text
+    context.font = '16pt Impact';
+    context.lineWidth = 6;
+    context.lineStyle = '#000';
+    context.fillStyle = '#FFF';
+    context.fillColor = '#ffff00';
+    context.fillColor = '#ffff00';
+    context.textAlign = 'center';
+    context.textBaseline = 'bottom';
+    context.strokeText(string, canvas.width / 2, canvas.height / 2);
+    context.fillText(string, canvas.width / 2, canvas.height / 2);
+
+    return canvas.toDataURL();
+}
+
+function showOverlay() {
+    var options = {};
+    //var overlayImage = gapi.hangout.av.effects.createImageResource(logoUrl);
+    var overlayImage = gapi.hangout.av.effects.createImageResource(createTextOverlay('Time: 00:00:23'));
+    overlayEffect = overlayImage.createOverlay(options);
+    overlayEffect.setVisible(true);
+}
+
+function startApp() {
+    gapi.hangout.onair.onYouTubeLiveIdReady.add(
+        function(eventObject) {
+        });
+
+    gapi.hangout.onParticipantsChanged.add(
+        function(eventObject) {
+        });
+
+    gapi.hangout.onair.onBroadcastingChanged.add(
+        function(eventObject) {
+        });
+
+    gapi.hangout.onair.onNewParticipantInBroadcastChanged.add(
+        function(eventObject) {
+        });
+
+    gapi.hangout.onTopicChanged.add(
+        function(eventObject) {
+        });
+
+    gapi.hangout.onTopicChanged.add(
+        function(eventObject) {
+        });
+
+}
+
+function init() {
+    // When API is ready...
+    gapi.hangout.onApiReady.add(
+        function(eventObj) {
+            // TODO
+            showOverlay();
+        });
+}
+
+// Wait for gadget to load.
+gadgets.util.registerOnLoadHandler(init);
diff --git a/gadget/styles/wakatime.css b/gadget/styles/wakatime.css
new file mode 100644
index 0000000..09e6b57
--- /dev/null
+++ b/gadget/styles/wakatime.css
@@ -0,0 +1,4 @@
+body {
+    color: #ffffff;
+    background-color: #000000;
+}
\ No newline at end of file
diff --git a/gadget/wakatime.xml b/gadget/wakatime.xml
index 2e1382c..f02ee6c 100644
--- a/gadget/wakatime.xml
+++ b/gadget/wakatime.xml
@@ -19,67 +19,21 @@
     </ModulePrefs>
     <Content type="html"><![CDATA[
 <html>
+<head>
+<link href="wakatime.css" />
+<!-- inject:css -->
+<!-- endinject -->
+</head>
 <body>
+
 <script src="//plus.google.com/hangouts/_/api/v1/hangout.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 
-<h3>Wakatime</h3>
-
-<script>
-
-var logoUrl = 'https://wakatime.com/static/img/wakatime-white-120.png';
-var overlayEffect = null;
-
-function sendHeartbeat(file, time, project, language, isWrite, lines) {
-    // TODO
-}
-
-function showOverlay() {
-    var options = {};
-    var overlayImage = gapi.hangout.av.effects.createImageResource(logoUrl);
-    overlayEffect = overlayImage.createOverlay(options);
-    overlayEffect.setVisible(true);
-}
-
-function startApp() {
-  gapi.hangout.onair.onYouTubeLiveIdReady.add(
-      function(eventObject) {
-      });
-
-  gapi.hangout.onParticipantsChanged.add(
-      function(eventObject) {
-  });
-
-  gapi.hangout.onair.onBroadcastingChanged.add(
-      function(eventObject) {
-      });
-
-  gapi.hangout.onair.onNewParticipantInBroadcastChanged.add(
-      function(eventObject) {
-      });
-
-  gapi.hangout.onTopicChanged.add(
-      function(eventObject) {
-      });
-
-  gapi.hangout.onTopicChanged.add(
-      function(eventObject) {
-      });
-
-}
-
-function init() {
-  // When API is ready...
-  gapi.hangout.onApiReady.add(
-      function(eventObj) {
-        // TODO
-        showOverlay();
-      });
-}
+<include src="index.html" />
 
-// Wait for gadget to load.
-gadgets.util.registerOnLoadHandler(init);
-</script>
+<script src="wakatime.js" />
+<!-- inject:js -->
+<!-- endinject -->
 </body>
 ]]>
     </Content>
diff --git a/gulpfile.js b/gulpfile.js
index 83ad473..06049cc 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -8,12 +8,25 @@ var $ = require('gulp-load-plugins')();
 
 var merge = require('merge-stream');
 var pkg = require('./package.json');
-var request = require('request');
+var fs = require('fs');
 
-gulp.task('package', function () {
-    return gulp.src('gadget/**/*')
-        .pipe($.zip(pkg.name + '.zip'))
-        .pipe(gulp.dest('dist'));
+gulp.task('merge', function () {
+    //.pipe($.inject(gulp.src(['./gadget/**/*.js', './gadget/**/*.css'], {read: false})))
+
+    return gulp.src('./gadget/wakatime.xml')
+        .pipe($.replace(/<link href="(.*\.css)"[^>]*>/g, function(s, filename) {
+            var style = fs.readFileSync('./gadget/styles/' + filename, 'utf8');
+            return '<style>\n' + style + '\n</style>';
+        }))
+        .pipe($.replace(/<script src="(wakatime\.js)"[^>]*>/g, function(s, filename) {
+            var script = fs.readFileSync('./gadget/scripts/' + filename, 'utf8');
+            return '<script>\n' + script + '\n</script>';
+        }))
+        .pipe($.replace(/<include src="(.*\.html)"[^>]*>/g, function(s, filename) {
+            var html = fs.readFileSync('./gadget/' + filename, 'utf8');
+            return '\n' + html + '\n';
+        }))
+        .pipe(gulp.dest('public/')); // this should be a temp directory; just adding this to Github to be able to publish directly from the repository
 });
 
 gulp.task('clean', function () {
@@ -24,4 +37,10 @@ gulp.task('clean', function () {
         .pipe(vinylPaths(del));
 });
 
+gulp.task('build', ['clean', 'merge'], function () {
+    return gulp.src('.tmp/**/*')
+        .pipe($.zip(pkg.name + '.zip'))
+        .pipe(gulp.dest('dist'));
+});
+
 gulp.task('default', ['package']);
diff --git a/package.json b/package.json
index 69e0262..62167f2 100644
--- a/package.json
+++ b/package.json
@@ -24,9 +24,11 @@
     "del": "^1.1.1",
     "gulp": "^3.8.10",
     "gulp-buffer": "^0.0.2",
+    "gulp-file": "^0.2.0",
     "gulp-filter": "^2.0.0",
     "gulp-flatten": "^0.0.4",
     "gulp-if": "^1.2.5",
+    "gulp-inject": "^1.1.1",
     "gulp-jshint": "^1.9.2",
     "gulp-load-plugins": "^0.8.0",
     "gulp-replace": "^0.5.2",
diff --git a/public/wakatime.xml b/public/wakatime.xml
new file mode 100644
index 0000000..443991b
--- /dev/null
+++ b/public/wakatime.xml
@@ -0,0 +1,131 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Module>
+    <!-- Licensed under the Apache License, Version 2.0 (the "License"); you may not
+     * use this file except in compliance with the License. You may obtain a copy of
+     * the License at
+     *
+     * http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+     * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+     * License for the specific language governing permissions and limitations under
+     * the License
+    -->
+    <ModulePrefs title="Wakatime Gadget">
+        <Require feature="rpc" />
+        <Require feature="views" />
+        <Require feature="locked-domain" />
+    </ModulePrefs>
+    <Content type="html"><![CDATA[
+<html>
+<head>
+<style>
+body {
+    color: #ffffff;
+    background-color: #000000;
+}
+</style>
+<!-- inject:css -->
+<!-- endinject -->
+</head>
+<body>
+
+<script src="//plus.google.com/hangouts/_/api/v1/hangout.js"></script>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+
+
+<h3>Wakatime Hangout</h3>
+
+
+<script>
+/* global gapi, gadgets, $ */
+
+var logoUrl = 'https://wakatime.com/static/img/wakatime-white-120.png';
+var overlayEffect = null;
+
+function sendHeartbeat(file, time, project, language, isWrite, lines) {
+    // TODO
+}
+
+function createTextOverlay(string) {
+    // Create a canvas to draw on
+    var canvas = document.createElement('canvas');
+    canvas.setAttribute('width', 166);
+    canvas.setAttribute('height', 100);
+
+    var context = canvas.getContext('2d');
+
+    // Draw background
+    context.fillStyle = '#BBB';
+    context.fillRect(0,0,166,50);
+
+    // Draw text
+    context.font = '16pt Impact';
+    context.lineWidth = 6;
+    context.lineStyle = '#000';
+    context.fillStyle = '#FFF';
+    context.fillColor = '#ffff00';
+    context.fillColor = '#ffff00';
+    context.textAlign = 'center';
+    context.textBaseline = 'bottom';
+    context.strokeText(string, canvas.width / 2, canvas.height / 2);
+    context.fillText(string, canvas.width / 2, canvas.height / 2);
+
+    return canvas.toDataURL();
+}
+
+function showOverlay() {
+    var options = {};
+    //var overlayImage = gapi.hangout.av.effects.createImageResource(logoUrl);
+    var overlayImage = gapi.hangout.av.effects.createImageResource(createTextOverlay('Time: 00:00:23'));
+    overlayEffect = overlayImage.createOverlay(options);
+    overlayEffect.setVisible(true);
+}
+
+function startApp() {
+    gapi.hangout.onair.onYouTubeLiveIdReady.add(
+        function(eventObject) {
+        });
+
+    gapi.hangout.onParticipantsChanged.add(
+        function(eventObject) {
+        });
+
+    gapi.hangout.onair.onBroadcastingChanged.add(
+        function(eventObject) {
+        });
+
+    gapi.hangout.onair.onNewParticipantInBroadcastChanged.add(
+        function(eventObject) {
+        });
+
+    gapi.hangout.onTopicChanged.add(
+        function(eventObject) {
+        });
+
+    gapi.hangout.onTopicChanged.add(
+        function(eventObject) {
+        });
+
+}
+
+function init() {
+    // When API is ready...
+    gapi.hangout.onApiReady.add(
+        function(eventObj) {
+            // TODO
+            showOverlay();
+        });
+}
+
+// Wait for gadget to load.
+gadgets.util.registerOnLoadHandler(init);
+
+</script>
+<!-- inject:js -->
+<!-- endinject -->
+</body>
+]]>
+    </Content>
+</Module>