diff --git a/index.html b/index.html
index 3df5a9d..dd7b786 100644
--- a/index.html
+++ b/index.html
@@ -6,10 +6,11 @@
   <script src="%VITE_SDK_URL%"></script>
   <script type="module" src="/main.js"></script>
   <link href="/style.css" rel="stylesheet" />
-  <title>Vite WebSDK Example</title>
+  <title>Permission Example</title>
 </head>
 <body>
   <main id="app">
+    <div id="permission-screen"><button id="ask-permission">Ask Camera Permission</button></div>
     <div id="camera-container"></div>
     <div id="finish-container"></div>
   </main>
diff --git a/main.js b/main.js
index bc6c56f..73a1d72 100644
--- a/main.js
+++ b/main.js
@@ -3,6 +3,8 @@ import { fakeBackendStart, fakeBackendFinish } from './fake_backend'
 let incode;
 let incodeSession;
 const container = document.getElementById("camera-container");
+const permissionButton = document.getElementById("ask-permission");
+const permissionScreen = document.getElementById("permission-screen");
 
 function showError(e=null) {
   container.innerHTML = "<h1>There was an error</h1>";
@@ -57,17 +59,17 @@ function finishOnboarding() {
   // Finishing the session works along with the configuration in the flow
   // webhooks and business rules are ran here.
   fakeBackendFinish(incodeSession.token)
-    .then((response) => {
-        console.log(response);
-        const container = document.getElementById("finish-container");
-        container.innerHTML = "<h1>Onboarding Finished.</h1>";
-    })
-    .catch((error) => {
-        showError(error);
-    });  
+  .then((response) => {
+    console.log(response);
+    const container = document.getElementById("finish-container");
+    container.innerHTML = "<h1>Onboarding Finished.</h1>";
+  })
+  .catch((error) => {
+    showError(error);
+  });  
 }
 
-async function app() {
+async function runIncode() {
   try { 
     const apiURL = import.meta.env.VITE_API_URL;
     incode = window.OnBoarding.create({
@@ -77,12 +79,12 @@ async function app() {
     // Create the single session
     container.innerHTML = "<h1>Creating session...</h1>";
     try {
-        incodeSession = await fakeBackendStart();
+      incodeSession = await fakeBackendStart();
     } catch(e) {
-        showError(e);
-        return;
+      showError(e);
+      return;
     }
-
+    
     // Empty the container and start the flow
     container.innerHTML = "";
     saveDeviceData();
@@ -93,4 +95,56 @@ async function app() {
   }
 }
 
-document.addEventListener("DOMContentLoaded", app);
+async function askPermissions(callback){
+  
+  const  permissionError = () => {
+    permissionScreen.innerHTML="One or more Permissions where denied, please reset your permissions from config > Site config"
+  }
+  
+  const askCamera = (callback) => {
+    navigator.getUserMedia (
+      // Constraints
+      {video: true},
+      
+      // Success Callback
+      function(localMediaStream) {
+        console.log('Camera permission accepted');
+        callback();
+      },
+      
+      // Error Callback
+      function(cameraError) {
+        console.log({cameraError});
+        permissionError();
+      }
+    );
+  }
+
+  const askGeolocation = (callback) => {
+    
+    navigator.geolocation.getCurrentPosition(
+      // Success Callback
+      function (position) {
+        console.log('Geolocation permission accepted');
+        callback();
+      },
+      
+      // Error CallBack
+      function (geolocationError){
+        console.log({geolocationError});
+        permissionError();
+      }
+    );
+  }
+  
+  askGeolocation( () => askCamera( () => {
+    permissionScreen.remove();
+    callback();
+  }));
+}
+
+permissionButton.addEventListener("click", () => {
+  askPermissions(() => runIncode());
+});
+
+
