diff --git a/README.md b/README.md
index 586afcb..e1428aa 100644
--- a/README.md
+++ b/README.md
@@ -1,23 +1,38 @@
-# kc_inputs
+# Toggle Switch Custom Element for Kentico Kontent
 
-This KC custom element is jsut a simple switch -> on/off
+This is a [custom element](https://docs.kontent.ai/tutorials/develop-apps/integrate/integrating-your-own-content-editing-features) for [Kentico Kontent](https://kontent.ai) that allows you to toggle a switch on or off.
 
-You can test it by configuring https://amend.cz/inputs/switch.html url for your custom element.
+![screenshot](ToggleSwitch.png)
 
-![screenshot](https://amend.cz/inputs/switch.png)
+## Setup
 
-You can specify the Parameters {JSON} part of the configuration to configure the default state or a lable.
-Possible configurations:
+1. Deploy the code to a secure public host
+    * See [deploying section](#Deploying) for a really quick option
+1. Follow the instructions in the [Kentico Kontent documentation](https://docs.kontent.ai/tutorials/develop-apps/integrate/integrating-your-own-content-editing-features#a-3--displaying-a-custom-element-in-kentico-kontent) to add the element to a content model.
+    * The `Hosted code URL` is where you deployed to in step 1
+    * Pass any desired optional parameters as directing in the [JSON Parameters configuration](#json-parameters) section of this readme.
 
-(empty)
+## Deploying
 
-{ "default": true }
+Netlify has made this easy. If you click the deploy button below, it will guide you through the process of deploying it to Netlify and leave you with a copy of the repository in your GitHub account as well.
 
-{
-    "label": "Confirmed"
-}
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/hzik/kc_inputs)
+
+## JSON Parameters
+
+You are not required to specify any parameters to use this custom element. If desired, you can configure the default state or a label for the toggle.
 
+`default` is an optional boolean value indicating the default state of the toggle on first load.
+
+`label' is an optional string value used as the label to the right of the toggle to provide additional context to an editor.
+
+```Json
 {
     "default": true,
-    "label": "Accepted"
+    "label": "Featured"
 }
+```
+
+## Saved Value
+
+The value is saved as a string of true or false representing the switch's state.
diff --git a/ToggleSwitch.png b/ToggleSwitch.png
new file mode 100644
index 0000000..c7f1b28
Binary files /dev/null and b/ToggleSwitch.png differ
diff --git a/switch.html b/index.html
similarity index 89%
rename from switch.html
rename to index.html
index 895773f..0022054 100644
--- a/switch.html
+++ b/index.html
@@ -1,166 +1,166 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Switch</title>
-    <!-- Include jQuery library -->
-	<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
-	
-    <!-- Include the Custom Elements API-->
-    <script src="https://app.kenticocloud.com/js-api/custom-element.js"></script>
-
-    <!-- Custom element CSS styles -->
-    <style>
-        /* We recommended you always set margin to zero to avoid problems when displaying the element in UI */
-		@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic,700italic);
-		html{
-		  font-family:sans-serif;
-		  -ms-text-size-adjust:100%;
-		  -webkit-text-size-adjust:100%;
-		}
-        	body {
-            		margin: 0;
-			padding: 10px;
-       		 }
-		.switch-wrapper{
-		  display:flex;
-		  align-items:center;
-		}
-		.switch{
-		  position:relative;
-		  display:inline-block;
-		  width:40px;
-		  height:16px;
-		  margin:4px 4px 4px 6px;
-		  vertical-align:middle;
-		  cursor:pointer;
-		  background:#e0e0e0;
-		  border-radius:8px;
-		}
-		.switch,.switch:before{
-		  transition:.25s cubic-bezier(.23, 1, .32, 1) 50ms;
-		}
-		.switch:before{
-		  position:absolute;
-		  top:-4px;
-		  left:-4px;
-		  width:24px;
-		  height:24px;
-		  background:#fff;
-		  border-radius:50%;
-		  content:"";
-		  box-shadow:0 1px 3px 1px rgba(0, 0, 0, .2);
-		}
-		input:checked+.switch{
-		  background:rgba(33, 150, 243, .5);
-		}
-		input:checked+.switch:before{
-		  left:20px;
-		  background:#2196f3;
-		}
-		input:disabled+.switch{
-		  cursor:not-allowed;
-		  background:#e0e0e0;
-		}
-		input:disabled+.switch:before{
-		  background:#eee;
-		}
-		input:checked:disabled+.switch{
-		  cursor:not-allowed;
-		  background:rgba(33, 150, 243, .25);
-		}
-		input:checked:disabled+.switch:before{
-		  background:#90caf9;
-		}
-		.switch__label{
-		  margin-left:4px;
-		  color:#9e9e9e;
-		  white-space:nowrap;
-		  transition:.25s cubic-bezier(.23, 1, .32, 1) 50ms;
-		}
-		input:checked~.switch__label{
-		  color:#2196f3;
-		}
-      
-        	.disabled_overlay {
-            		position: fixed;
-			background-color: #777;
-           		z-index: 10;
-            		cursor: not-allowed;
-            		top: 0;
-            		left: 0;
-			width: 100%;
-			height: 100%;
-			opacity: 0.1;
-        	}
-    </style>
-</head>
-<body>
-	<div class="disabled_overlay"></div>
-	<div class="switch-wrapper">
-		<input id="switchId" type="checkbox" checked="" hidden="" value="on">
-		<label class="switch" for="switchId"></label>
-		<span id="switchLabel" class="switch__label"></span>
-	</div>
-
-    <!-- Custom logic of the Custom element -->
-    <script>
-        var isDisabled = false;
-      
-        function updateDisabled(disabled) {
-            isDisabled = disabled;
-            if (disabled) {
-                $('.disabled_overlay').show();
-            }
-            else {
-                $('.disabled_overlay').hide();
-            }
-        }
-      
-        function setup(value,checked,label) {
-		if (!value && checked) {
-			$("#switchId").prop("checked", true);
-			CustomElement.setValue("true"); 
-		}
-		else {
-			$("#switchId").prop("checked", (value=="true"));
-		}
-
-		$("#switchLabel").text(label);
-
-		$("#switchId").change(function() {			 
-			CustomElement.setValue($(this).is(":checked").toString());   
-		});
-        }
-      
-        function updateSize() {
-            // Update the Custom element height in the Kentico Cloud UI
-            const height = $("html").height();
-            CustomElement.setHeight(height);
-        }
-      
-        function initCustomElement() {
-            try {
-                CustomElement.init((element, _context) => {
-				  var value = (element.config?element.config.default:false);
-				  var label = (element.config?element.config.label:"");
-                  // Setup with initial value and disabled state
-                  setup(element.value, value, label);  
-                  updateDisabled(element.disabled);
-                  updateSize();
-                });
-                // React when the disabled state changes (e.g. when publishing the item)
-                CustomElement.onDisabledChanged(updateDisabled);
-            } catch (err) {
-                // Initialization with the Custom elements API failed 
-                // (page displayed outside of the Kentico Cloud UI)
-                console.error(err);
-                updateDisabled(true);
-            }
-        }
-      
-        initCustomElement();
-      
-    </script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Switch</title>
+    <!-- Include jQuery library -->
+	<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
+
+    <!-- Include the Custom Elements API-->
+    <script src="https://app.kontent.ai/js-api/custom-element/v1/custom-element.min.js"></script>
+
+    <!-- Custom element CSS styles -->
+    <style>
+        /* We recommended you always set margin to zero to avoid problems when displaying the element in UI */
+		@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic,700italic);
+		html{
+		  font-family:sans-serif;
+		  -ms-text-size-adjust:100%;
+		  -webkit-text-size-adjust:100%;
+		}
+        	body {
+            		margin: 0;
+			padding: 10px;
+       		 }
+		.switch-wrapper{
+		  display:flex;
+		  align-items:center;
+		}
+		.switch{
+		  position:relative;
+		  display:inline-block;
+		  width:40px;
+		  height:16px;
+		  margin:4px 4px 4px 6px;
+		  vertical-align:middle;
+		  cursor:pointer;
+		  background:#e0e0e0;
+		  border-radius:8px;
+		}
+		.switch,.switch:before{
+		  transition:.25s cubic-bezier(.23, 1, .32, 1) 50ms;
+		}
+		.switch:before{
+		  position:absolute;
+		  top:-4px;
+		  left:-4px;
+		  width:24px;
+		  height:24px;
+		  background:#fff;
+		  border-radius:50%;
+		  content:"";
+		  box-shadow:0 1px 3px 1px rgba(0, 0, 0, .2);
+		}
+		input:checked+.switch{
+		  background:rgba(33, 150, 243, .5);
+		}
+		input:checked+.switch:before{
+		  left:20px;
+		  background:#2196f3;
+		}
+		input:disabled+.switch{
+		  cursor:not-allowed;
+		  background:#e0e0e0;
+		}
+		input:disabled+.switch:before{
+		  background:#eee;
+		}
+		input:checked:disabled+.switch{
+		  cursor:not-allowed;
+		  background:rgba(33, 150, 243, .25);
+		}
+		input:checked:disabled+.switch:before{
+		  background:#90caf9;
+		}
+		.switch__label{
+		  margin-left:4px;
+		  color:#9e9e9e;
+		  white-space:nowrap;
+		  transition:.25s cubic-bezier(.23, 1, .32, 1) 50ms;
+		}
+		input:checked~.switch__label{
+		  color:#2196f3;
+		}
+
+        	.disabled_overlay {
+            		position: fixed;
+			background-color: #777;
+           		z-index: 10;
+            		cursor: not-allowed;
+            		top: 0;
+            		left: 0;
+			width: 100%;
+			height: 100%;
+			opacity: 0.1;
+        	}
+    </style>
+</head>
+<body>
+	<div class="disabled_overlay"></div>
+	<div class="switch-wrapper">
+		<input id="switchId" type="checkbox" checked="" hidden="" value="on">
+		<label class="switch" for="switchId"></label>
+		<span id="switchLabel" class="switch__label"></span>
+	</div>
+
+    <!-- Custom logic of the Custom element -->
+    <script>
+        var isDisabled = false;
+
+        function updateDisabled(disabled) {
+            isDisabled = disabled;
+            if (disabled) {
+                $('.disabled_overlay').show();
+            }
+            else {
+                $('.disabled_overlay').hide();
+            }
+        }
+
+        function setup(value,checked,label) {
+		if (!value && checked) {
+			$("#switchId").prop("checked", true);
+			CustomElement.setValue("true");
+		}
+		else {
+			$("#switchId").prop("checked", (value=="true"));
+		}
+
+		$("#switchLabel").text(label);
+
+		$("#switchId").change(function() {
+			CustomElement.setValue($(this).is(":checked").toString());
+		});
+        }
+
+        function updateSize() {
+            // Update the Custom element height in the Kentico Cloud UI
+            const height = $("html").height();
+            CustomElement.setHeight(height);
+        }
+
+        function initCustomElement() {
+            try {
+                CustomElement.init((element, _context) => {
+				  var value = (element.config?element.config.default:false);
+				  var label = (element.config?element.config.label:"");
+                  // Setup with initial value and disabled state
+                  setup(element.value, value, label);
+                  updateDisabled(element.disabled);
+                  updateSize();
+                });
+                // React when the disabled state changes (e.g. when publishing the item)
+                CustomElement.onDisabledChanged(updateDisabled);
+            } catch (err) {
+                // Initialization with the Custom elements API failed
+                // (page displayed outside of the Kentico Cloud UI)
+                console.error(err);
+                updateDisabled(true);
+            }
+        }
+
+        initCustomElement();
+
+    </script>
+</body>
+</html>
