diff --git a/.gitignore b/.gitignore
index e1b67ac..9acea27 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,5 @@ npm-debug.log
 .idea
 .vscode
 package-lock.json
-yarn-error.log
\ No newline at end of file
+yarn-error.log
+dist/demo
diff --git a/demo/scripts/demo.js b/demo/scripts/demo.js
index 4041f5b..0ff92f6 100644
--- a/demo/scripts/demo.js
+++ b/demo/scripts/demo.js
@@ -145,7 +145,7 @@ document.addEventListener("DOMContentLoaded", function () {
 /////////////////////////////////////////////
 // Form focus examples
 /////////////////////////////////////////////
-  const focusDriver = new Driver({ padding: 0 });
+  const focusDriver = new Driver({padding: 0});
   const inputIds = ['creation-input', 'creation-input-2', 'creation-input-3', 'creation-input-4'];
   inputIds.forEach(inputId => {
     // Highlight the section on focus
@@ -293,6 +293,34 @@ document.addEventListener("DOMContentLoaded", function () {
       });
     });
 
+/////////////////////////////////////////////
+// Single no close demo
+/////////////////////////////////////////////
+  const singleNoClose = new Driver({
+    allowClose: false,
+    position: 'top'
+  });
+
+  singleNoClose.defineSteps([{
+    element: '#single-element-no-close',
+    popover: {
+      title: 'Uh-huh!',
+      description: 'You cannot close by clicking outside'
+    }
+  }, {
+    element: '#third-element-introduction',
+    popover: {
+      title: 'Title on Popover',
+      description: 'Body of the popover',
+      position: 'top'
+    }
+  }]);
+
+  document.querySelector('#run-single-element-no-close').addEventListener('click', function (e) {
+    e.preventDefault();
+    singleNoClose.start();
+  });
+
 /////////////////////////////////////////////////////
 // Highlighting single element with popover position
 /////////////////////////////////////////////////////
diff --git a/index.html b/index.html
index 31306e6..f4b6a14 100644
--- a/index.html
+++ b/index.html
@@ -6,9 +6,9 @@
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Driver</title>
-  <meta name=description itemprop=description
+  <meta name="description" itemprop="description"
         content="A light-weight, no-dependency, vanilla JavaScript library to drive the user's focus across the page"/>
-  <link rel="stylesheet" href="./dist/demo.css">
+  <link rel="stylesheet" href="./dist/demo/driver-demo.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai.min.css">
 </head>
 <body>
@@ -167,7 +167,28 @@ driver.highlight({
     <p class="top-20">And of course it can be any valid HTML.</p>
 
     <hr class="hr__fancy">
+    <div id="single-element-no-close" class="section__example">
+      <h4>Disable Close on Outside Click</h4>
+      <p>By default, driver.js gets reset if user clicks outside the highlighted element, you can disable this:</p>
+      <a href="#" class="btn__run-demo" id="run-single-element-no-close">Show Demo</a>
+      <pre><code class="javascript">const driver = new Driver({
+    allowClose: false,
+});
 
+driver.highlight({
+  element: '#some-element',
+  popover: {
+    title: '&lt;em&gt;An italicized title&lt;/em&gt;',
+    description: 'Description may also contain &lt;strong&gt;HTML&lt;/strong&gt;'
+  }
+});
+</code></pre>
+      <p class="top-20">
+        If you use this option, for multi-step driver, it would close after you are done with the popover or you can close it programmatically. For single element popover, you need to close it properly, otherwise it won't be closed
+      </p>
+      <pre><code class="javascript">driver.reset()</code></div>
+
+    <hr class="hr__fancy">
     <div id="third-element-introduction" class="section__example">
       <h4 id="first-element-introduction">Creating Feature Introductions</h4>
       <p id="second-para-feature-introductions">You can also make powerful feature introductions to guide the users
@@ -343,8 +364,15 @@ activeElement.getNode();  // Gets the DOM Element behind this element
 <script src="//twemoji.maxcdn.com/2/twemoji.min.js?2.5"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
 
-<script src="./dist/driver.js"></script>
-<script src="./dist/demo.js"></script>
-<script src="./dist/emoji.js"></script>
+<script src="./dist/demo/driver-demo.js"></script>
+
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+  ga('create', 'UA-58155965-1', 'auto');
+  ga('send', 'pageview');
+</script>
 </body>
 </html>
diff --git a/package.json b/package.json
index 2379222..5c1746c 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "types": "types/index.d.ts",
   "scripts": {
     "start": "node server.js",
+    "build-demo": "NODE_ENV=production webpack --config webpack.config.dev.js",
     "build": "webpack --config webpack.config.prod.js"
   },
   "bugs": {
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
index 749bf5e..5253327 100644
--- a/webpack.config.dev.js
+++ b/webpack.config.dev.js
@@ -2,17 +2,23 @@ const path = require('path');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
+const isProduction = process.env.NODE_ENV === 'production';
+const scriptFileName = isProduction ? 'driver-demo.min.js' : 'driver-demo.js';
+const styleFileName = isProduction ? 'driver-demo.min.css' : 'driver-demo.css';
+
 module.exports = {
-  mode: 'development',
+  mode: isProduction ? 'production' : 'development',
   entry: [
     'webpack-dev-server/client?http://localhost:3000',
     './demo/styles/demo.scss',
+    './demo/scripts/emoji.js',
+    './demo/scripts/demo.js',
     './src/index.js',
   ],
   output: {
-    path: path.join(__dirname, '/dist'),
-    publicPath: '/dist/',
-    filename: 'driver.js',
+    path: path.join(__dirname, '/dist/demo'),
+    publicPath: '/dist/demo/',
+    filename: scriptFileName,
     libraryTarget: 'umd',
     library: 'Driver',
   },
@@ -49,18 +55,22 @@ module.exports = {
       },
       {
         test: /.scss$/,
-        loader: ExtractTextPlugin.extract(['css-loader?url=false', 'sass-loader']),
+        loader: ExtractTextPlugin.extract([
+          {
+            loader: 'css-loader',
+            options: { minimize: isProduction, url: false },
+          },
+          'sass-loader',
+        ]),
       },
     ],
   },
   plugins: [
     new ExtractTextPlugin({
-      filename: 'demo.css',
+      filename: styleFileName,
       allChunks: true,
     }),
     new CopyWebpackPlugin([
-      './demo/scripts/emoji.js',
-      './demo/scripts/demo.js',
       './demo/images/separator.png',
     ]),
   ],