diff --git a/includes/GlModelViewer.php b/includes/GlModelViewer.php
index 375452d..7b7566f 100644
--- a/includes/GlModelViewer.php
+++ b/includes/GlModelViewer.php
@@ -48,7 +48,13 @@ class GlModelViewer extends ImageHandler {
     }
     $out = $editor->getContext()->getOutput();
     $out->addModules('ext.glmv');
-    $previewHTML = self::buildViewer($content->getText(), $file->getFullUrl(), ['class' => 'view-default']);
+    $previewViewer = self::buildViewer($content->getText(), $file->getFullUrl(), ['class' => 'view-default']);
+    $addButtonAttr = array(
+      'class' => 'AddHotspot',
+      'onclick' => 'readyAddHotspot()'
+    );
+    $addHsButton = Html::rawElement('button',$addButtonAttr,'Add a new hotspot');
+    $previewHTML = Html::rawElement('div',NULL,$previewViewer.$addHsButton);
 
     return false;
   }
diff --git a/modules/glmv.css b/modules/glmv.css
index 5be3786..02f8756 100644
--- a/modules/glmv.css
+++ b/modules/glmv.css
@@ -1,3 +1,7 @@
+.AddingHotspot {
+    cursor: crosshair !important;
+}
+
 .Hotspot{
     background: #00000080;
     border-radius: 100%;
diff --git a/modules/glmv.js b/modules/glmv.js
index ce6a3a9..392f977 100644
--- a/modules/glmv.js
+++ b/modules/glmv.js
@@ -4,33 +4,47 @@ modelLoad.setAttribute('src','https://ajax.googleapis.com/ajax/libs/model-viewer
 let headElem = document.getElementsByTagName('head')[0]
 headElem.appendChild(modelLoad)
 
-if (mw.config.values.wgAction == 'submit') {
-	[...document.getElementsByTagName('model-viewer')].forEach( mv => {
-		mv.disableTap = true;
-	});
-	console.log('Starting point locator...');
-	document.addEventListener('click', e => {
-		var hsPosition = null;
-		var targetModel = e.target.closest('model-viewer');
-		if (targetModel) {
-			hsPosition = targetModel.positionAndNormalFromPoint(e.clientX, e.clientY);
-		}
-		if (hsPosition) {
-			var hsOutput = {label: 'NewHotspot'};
-			hsOutput['data-position'] = hsPosition.position.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m");
-			hsOutput['data-normal'] = hsPosition.normal.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m");
-            let orbitObj = targetModel.getCameraOrbit()
-			hsOutput['data-orbit'] = `${orbitObj.theta.toFixed(2)}rad ${orbitObj.phi.toFixed(2)}rad ${orbitObj.radius.toFixed(2)}m`;
-            let targetObj = targetModel.getCameraTarget();
-			hsOutput['data-target'] = `${targetObj.x.toFixed(5)}m ${targetObj.y.toFixed(5)}m ${targetObj.z.toFixed(5)}m`;
-			navigator.clipboard.writeText(JSON.stringify(hsOutput, null, 2));
-		}
-	});
+readyAddHotspot = function() {
+    const previewMv = $('model-viewer')
+    previewMv.one('click', clickAddHotspot)
+    previewMv.addClass('AddingHotspot')
+    previewMv[0].disableTap = true
 }
+
+clickAddHotspot = function(e) {
+    const previewMv = $('model-viewer')
+    previewMv.removeClass('AddingHotspot')
+    let hsPosition = null;
+    let targetModel = previewMv[0]
+    targetModel.disableTap = false
+    if (targetModel) {
+        hsPosition = targetModel.positionAndNormalFromPoint(e.clientX, e.clientY);
+    }
+    if (hsPosition) {
+        let currentText = $('#wpTextbox1').val();
+        let extractMetadata = currentText.match(/<pre>([\S\s]*?)<\/pre>/);
+        let metadata = (extractMetadata.length >= 2) ? JSON.parse(extractMetadata[1]) : {viewerConfig: {}, annotations: [], annotationSets: {}};
+        if (metadata.annotations === undefined) {
+            metadata.annotations = [];
+        }
+        let hsOutput = {label: 'NewHotspot'};
+        hsOutput['data-position'] = hsPosition.position.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m");
+        hsOutput['data-normal'] = hsPosition.normal.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m");
+        let orbitObj = targetModel.getCameraOrbit()
+        hsOutput['data-orbit'] = `${orbitObj.theta.toFixed(2)}rad ${orbitObj.phi.toFixed(2)}rad ${orbitObj.radius.toFixed(2)}m`;
+        let targetObj = targetModel.getCameraTarget();
+        hsOutput['data-target'] = `${targetObj.x.toFixed(5)}m ${targetObj.y.toFixed(5)}m ${targetObj.z.toFixed(5)}m`;
+        //navigator.clipboard.writeText(JSON.stringify(hsOutput, null, 2));
+        metadata.annotations.push(hsOutput);
+        let newText = currentText.replace(/(.*?<pre>)[\S\s]*?(<\/pre>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`);
+        $('#wpTextbox1').val(newText);
+    }
+};
+
 onAnnotation = function(e) {
 	e.stopPropagation();
-	var targetAnnotation = e.target.slot.split('-')[1];
-	var targetModel = e.target.closest('model-viewer');
+	let targetAnnotation = e.target.slot.split('-')[1];
+	let targetModel = e.target.closest('model-viewer');
 	[...targetModel.querySelectorAll('.HotspotAnnotation')].forEach( (an, idx) => {
 		if (idx + 1 == targetAnnotation && an.classList.contains('HiddenAnnotation')) {
 			an.classList.remove('HiddenAnnotation');
@@ -41,6 +55,7 @@ onAnnotation = function(e) {
 		}
 	});
 };
+
 clearAnnotations = function() {
 	[...document.getElementsByClassName('HotspotAnnotation')].forEach( an => {
 		an.classList.add('HiddenAnnotation');