aumera-on-screen-widget 0.0.17 → 0.0.18

package/df-btn.js

@@ -533,6 +533,26 @@
           config.shakeDuration / 1000
         }s cubic-bezier(.36,.07,.19,.97) both;
     }
+
+    .df-iframe-placeholder {
+        display: none;
+    }
+
+    .df-btn-loading .df-btn-text:after {
+        content: '';
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        margin-left: 8px;
+        border: 2px solid transparent;
+        border-top-color: currentColor;
+        border-radius: 50%;
+        animation: df-spin 0.8s linear infinite;
+    }
+
+    @keyframes df-spin {
+        to { transform: rotate(360deg); }
+    }
 `;
 
   document.head.appendChild(style);
@@ -572,9 +592,7 @@
             <div class="df-btn-header">
             <div class="df-btn-text">${config.openText || "Chat"}</div>
             </div>
-            <iframe class="df-btn-content" src="${getChatUrl()}/${detectedLang}/?orgId=${
-    config.orgId
-  }" allow="microphone *"></iframe>
+            <div class="df-btn-content df-iframe-placeholder"></div>
         </button>
     `;
 
@@ -582,6 +600,7 @@
   document.body.insertAdjacentHTML("beforeend", buttonHTML);
 
   let dfToggled = false;
+  let iframeLoaded = false;
   let inactivityTimer = null;
   let shakeInterval = null;
 
@@ -673,6 +692,46 @@
     }
   };
 
+  // Create and inject the iframe on first open
+  function ensureIframeLoaded() {
+    return new Promise((resolve) => {
+      if (iframeLoaded) {
+        resolve();
+        return;
+      }
+
+      const btn = document.querySelector(".df-btn");
+      const placeholder = btn?.querySelector(".df-iframe-placeholder");
+
+      if (!placeholder) {
+        console.error("[OSW Widget] Placeholder not found");
+        resolve();
+        return;
+      }
+
+      const iframe = document.createElement("iframe");
+      iframe.className = "df-btn-content";
+      iframe.src = `${getChatUrl()}/${detectedLang}/?orgId=${config.orgId}`;
+      iframe.allow = "microphone *";
+      iframe.style.opacity = "0";
+
+      iframe.addEventListener("load", () => {
+        iframe.style.opacity = "";
+        iframeLoaded = true;
+        resolve();
+      });
+
+      setTimeout(() => {
+        iframe.style.opacity = "";
+        iframeLoaded = true;
+        resolve();
+      }, 5000);
+
+      placeholder.replaceWith(iframe);
+      console.log("[OSW Widget] Iframe created on first open");
+    });
+  }
+
   // Add close and maximize/minimize buttons dynamically when chat is open
   function updateHeaderButtons() {
     const header = document.querySelector(".df-btn-header");
@@ -811,7 +870,7 @@
   // Check if mobile for later use
   const isMobile = window.innerWidth <= 768;
 
-  btn.addEventListener("click", () => {
+  btn.addEventListener("click", async () => {
     // Only toggle if chat is closed (popover mode)
     if (btn.classList.contains("df-closed")) {
       // Dismiss notification when opening chat
@@ -836,6 +895,11 @@
         );
       }
 
+      // Load iframe on first open
+      btn.classList.add("df-btn-loading");
+      await ensureIframeLoaded();
+      btn.classList.remove("df-btn-loading");
+
       const isMobile = window.innerWidth <= 768;
 
       if (isMobile) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aumera-on-screen-widget",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "A lightweight, customizable chat widget for websites",
   "main": "df-btn.js",
   "scripts": {