Added "Click to umute" option for settings page

.utilities/settings-page-builder/index.html

@@ -29,9 +29,12 @@
         </div>
 
         <!-- Widget Preview Panel -->
+        <div id="widget-preview-wrapper">
+            <label id="unmute-label">Click to unmute...</label>
             <iframe id="widgetPreview">
             </iframe>
         </div>
+    </div>
 
     <!-- Load Settings Popup -->
     <div id="loadSettingsWrapper">

.utilities/settings-page-builder/script.js

@@ -3,6 +3,7 @@ const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
 const settingsJson = urlParams.get("settingsJson") || "";
 const widgetURL = urlParams.get("widgetURL") || "";
+const showUnmuteIndicator = GetBooleanParam("showUnmuteIndicator", false);
 
 // Page elements
 const widgetUrlInputWrapper = document.getElementById('widgetUrlInputWrapper');
@@ -13,6 +14,10 @@ const widgetPreview = document.getElementById('widgetPreview');
 const loadURLBox = document.getElementById('loadUrlBox');
 const cancelSettingsButton = document.getElementById('cancelSettingsButton');
 const loadSettingsBox = document.getElementById('loadSettingsWrapper');
+const unmuteLabel = document.getElementById('unmute-label');
+
+if (showUnmuteIndicator)
+	unmuteLabel.style.display = 'inline';
 
 
 
@@ -343,3 +348,57 @@ function OpenLoadSettingsPopup() {
 	loadSettingsBox.style.visibility = 'visible';
 	loadSettingsBox.style.opacity = 1;
 }
+
+
+
+//////////////////////
+// HELPER FUNCTIONS //
+//////////////////////
+
+function GetBooleanParam(paramName, defaultValue) {
+	const urlParams = new URLSearchParams(window.location.search);
+	const paramValue = urlParams.get(paramName);
+
+	if (paramValue === null) {
+		return defaultValue; // Parameter not found
+	}
+
+	const lowercaseValue = paramValue.toLowerCase(); // Handle case-insensitivity
+
+	if (lowercaseValue === 'true') {
+		return true;
+	} else if (lowercaseValue === 'false') {
+		return false;
+	} else {
+		return paramValue; // Return original string if not 'true' or 'false'
+	}
+}
+
+function GetIntParam(paramName, defaultValue) {
+	const urlParams = new URLSearchParams(window.location.search);
+	const paramValue = urlParams.get(paramName);
+
+	if (paramValue === null) {
+		return defaultValue; // or undefined, or a default value, depending on your needs
+	}
+
+	console.log(paramValue);
+
+	const intValue = parseInt(paramValue, 10); // Parse as base 10 integer
+
+	if (isNaN(intValue)) {
+		return null; // or handle the error in another way, e.g., throw an error
+	}
+
+	return intValue;
+}
+
+
+// Handle first window interaction
+window.addEventListener('message', (event) => {
+	if (event.origin === new URL(widgetPreview.src).origin && event.data === 'iframe-interacted') {
+		iframeHasBeenInteractedWith = true;
+		console.log('Iframe has been interacted with!');
+		unmuteLabel.style.display = 'none';
+	}
+});

.utilities/settings-page-builder/style.css

@@ -78,10 +78,28 @@ body {
     /* Color of the scroll thumb on hover */
 }
 
-#widgetPreview {
+#widget-preview-wrapper {
     flex-grow: 1;
     overflow: hidden;
+    position: relative;
+}
+
+#widgetPreview {
     border: transparent;
+    width: 100%;
+    height: 100%;
+}
+
+#unmute-label {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    font-size: 3em;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.7);
+    display: none;
 }
 
 #widgetUrlInputWrapper {