aumera-on-screen-widget 0.0.16 → 0.0.18

package/df-btn.js

@@ -26,6 +26,14 @@
     return supportedLangs.includes(lang) ? lang : "de";
   }
 
+  // Helper function to resize Cloudinary images for optimized file size
+  function cloudinaryResize(url, width = 32, height = 32) {
+    const transform = `w_${width},h_${height},c_fill,f_auto,q_auto`;
+
+    // Insert transformation right after `/upload/`
+    return url.replace('/upload/', `/upload/${transform}/`);
+  }
+
   // Async function to fetch chatbot settings from GraphQL
   async function fetchChatbotSettings(orgId, env, language) {
     try {
@@ -219,8 +227,8 @@
 
     // Use chatbotMask as logo if available
     if (settings.chatbotMask) {
-      config.logo = settings.chatbotMask;
-      config.logoDark = settings.chatbotMask;
+      config.logo = cloudinaryResize(settings.chatbotMask, 64, 64);
+      config.logoDark = cloudinaryResize(settings.chatbotMask, 64, 64);
       console.log(
         "[OSW Widget] Using chatbotMask as logo:",
         settings.chatbotMask
@@ -525,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);
@@ -564,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>
     `;
 
@@ -574,6 +600,7 @@
   document.body.insertAdjacentHTML("beforeend", buttonHTML);
 
   let dfToggled = false;
+  let iframeLoaded = false;
   let inactivityTimer = null;
   let shakeInterval = null;
 
@@ -665,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");
@@ -803,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
@@ -828,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.16",
+  "version": "0.0.18",
   "description": "A lightweight, customizable chat widget for websites",
   "main": "df-btn.js",
   "scripts": {