shopify-chatbot-widget 0.4.3 → 0.4.5

package/dist/jawebDirect.js

@@ -0,0 +1,93 @@
+(() => {
+    // ----- Read config from attributes -----
+    const currentScript = document.currentScript || document.querySelector('script[data-company][src*="jaweb-chatbot"]');
+    if (!currentScript) return console.warn('[Jaweb] install script not found');
+    const company = (currentScript.getAttribute('data-company') || '').trim();
+    if (!company) return console.error('[Jaweb] data-company is required');
+  
+    const apiBase = currentScript.getAttribute('data-src') || 'https://jawebcrm.onrender.com/api/proxy/iframe';
+    const corner = currentScript.getAttribute('data-corner') || 'right';  // 'right' | 'left'
+    const openWidth  = currentScript.getAttribute('data-open-width')  || '400px';
+    const openHeight = currentScript.getAttribute('data-open-height') || '95%';
+    const mobileSheetVh = currentScript.getAttribute('data-mobile-vh') || '100%'; // leave some page visible
+  
+    // ----- Make styles -----
+    const style = document.createElement('style');
+    style.textContent = `
+      #jaweb-chatbot-iframe {
+        position: fixed;
+        ${corner === 'left' ? 'left' : 'right'}: 16px;
+        bottom: 16px;
+        z-index: 2147483647;
+        border: 0;
+        transition: width .2s, height .2s, border-radius .2s, inset .2s, box-shadow .2s;
+        overflow: hidden;
+        background: transparent;
+      }
+    
+      #jaweb-chatbot-iframe.is-open {
+        width: ${openWidth}; height: ${openHeight};
+        border-radius: 16px;
+        box-shadow: 0 10px 30px rgba(0,0,0,.15);
+      }
+      @media (max-width: 768px) {
+        #jaweb-chatbot-iframe.is-open {
+          left: 0; right: 0; bottom: 0; top: auto;
+          width: 100%; height: ${mobileSheetVh};
+          border-radius: 16px 16px 0 0;
+          box-shadow: 0 -10px 30px rgba(0,0,0,.15);
+        }
+    
+      }
+    `;
+    document.head.appendChild(style);
+  
+    // ----- Build iframe src -----
+    const params = new URLSearchParams({ company_username: company });
+    try {
+      const trackId = localStorage.getItem('track_id');
+      if (trackId) params.set('track_id', trackId);
+      localStorage.setItem('company_username', company);
+    } catch (_) {}
+  
+    // ----- Create iframe -----
+    if (document.getElementById('jaweb-chatbot-iframe')) return;
+    const iframe = document.createElement('iframe');
+    iframe.id = 'jaweb-chatbot-iframe';
+    iframe.className = 'is-closed'; // start as bubble
+    iframe.src = `${apiBase}?${params.toString()}`;
+    iframe.allow = 'microphone; camera; autoplay; clipboard-write';
+    document.body.appendChild(iframe);
+  
+    // Optional: ensure outside page stays scrollable
+    const unlockScroll = () => {
+      document.documentElement.style.overflow = '';
+      document.body.style.overflow = '';
+      document.body.style.position = '';
+      document.body.style.top = '';
+      ['modal-open','no-scroll','overflow-hidden','lock-scroll','js-focus-lock'].forEach(c => {
+        document.documentElement.classList.remove(c);
+        document.body.classList.remove(c);
+      });
+    };
+    requestAnimationFrame(unlockScroll);
+  
+    // ----- Handshake with child -----
+    window.addEventListener('message', (e) => {
+      const msg = e.data || {};
+      if (msg.type !== 'JAWEB_CHAT') return;
+  
+      if (msg.action === 'open') {
+        iframe.classList.remove('is-closed');
+        iframe.classList.add('is-open');
+        unlockScroll();
+        iframe.contentWindow?.postMessage({ type: 'JAWEB_CHAT', action: 'open-ready' }, '*');
+      } else if (msg.action === 'close') {
+        iframe.classList.remove('is-open');
+        iframe.classList.add('is-closed');
+        unlockScroll();
+        iframe.contentWindow?.postMessage({ type: 'JAWEB_CHAT', action: 'closed' }, '*');
+      }
+    });
+  })();
+  

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shopify-chatbot-widget",
   "private": false,
-  "version": "0.4.3",
+  "version": "0.4.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/xx.html

@@ -2,60 +2,55 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <title>Jaweb Chatbot — Iframe Demo</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Jaweb Chatbot Test</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      height: 200vh; /* make page scrollable */
+      background: linear-gradient(180deg, #f0f4ff 0%, #ffffff 100%);
+    }
+    header {
+      padding: 20px;
+      background: #7f28f8;
+      color: white;
+      text-align: center;
+    }
+    main {
+      padding: 20px;
+      max-width: 700px;
+      margin: 0 auto;
+    }
+  </style>
 </head>
 <body>
-  <h1>Test page for Jaweb Chatbot</h1>
-  <p>This page shows how your chatbot iframe will be injected, like Intercom.</p>
+  <header>
+    <h1>Jaweb Chatbot Integration Test</h1>
+  </header>
 
-  <!-- Just load your script -->
-  <script>
-    (function () {
-      // Configuration that you (or your users) can set
-      const config = {
-        shop: "your-shop.myshopify.com",
-        widgetId: "YOUR_WIDGET_ID",
-        apiBase: "https://api.your-domain.com",
-        themeColor: "#7F28F8",
-        position: "bottom-right",
-        language: "en",
-      };
+  <main>
+    <p>
+      Scroll this page up and down to make sure background scrolling still works
+      while the chatbot bubble is showing.
+    </p>
+    <p>
+      The bubble should appear at the bottom-right corner. Click it, and the
+      chatbot iframe should expand.
+    </p>
+    <p>
+      Replace <code>YOUR_COMPANY_USERNAME</code> below with a real one to test a
+      live bot session.
+    </p>
+  </main>
 
-      // Create iframe
-      const iframe = document.createElement("iframe");
-      iframe.src =
-        "../dist/iframe.html"; 
-      iframe.style.position = "fixed";
-      iframe.style.bottom = "20px";
-      iframe.style.right = "20px";
-      iframe.style.width = "400px";
-      iframe.style.height = "600px";
-      iframe.style.zIndex = "999999";
-      iframe.style.borderRadius = "16px";
-      iframe.style.border="none"
-      iframe.id = "jaweb-chatbot-iframe";
+  <!-- ✅ Jaweb chatbot embed (script one-liner) -->
+  <script
+    src="https://cdn.jsdelivr.net/npm/shopify-chatbot-widget@0.4.5/dist/jawebDirect.js"
+    data-company="jaweb"
+    async
+  ></script>
 
-      document.body.appendChild(iframe);
-
-      // Pass config into iframe (postMessage)
-      iframe.onload = function () {
-        iframe.contentWindow.postMessage(
-          { type: "jaweb:init", payload: config },
-          "*"
-        );
-      };
-
-      // (Optional) handle messages back from chatbot
-      window.addEventListener("message", (e) => {
-        if (e.data.type === "jaweb:ready") {
-          console.log("Jaweb chatbot is ready!");
-        }
-        if (e.data.type === "jaweb:event") {
-          console.log("Chatbot event:", e.data.payload);
-        }
-      });
-    })();
-  </script>
 </body>
 </html>