shopify-chatbot-widget 0.4.4 → 0.4.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/jawebDirect.js +4 -11
  2. package/package.json +1 -1
  3. package/xx.html +45 -50
package/dist/jawebDirect.js CHANGED
@@ -8,8 +8,8 @@
8
8
  const apiBase = currentScript.getAttribute('data-src') || 'https://jawebcrm.onrender.com/api/proxy/iframe';
9
9
  const corner = currentScript.getAttribute('data-corner') || 'right'; // 'right' | 'left'
10
10
  const openWidth = currentScript.getAttribute('data-open-width') || '400px';
11
- const openHeight = currentScript.getAttribute('data-open-height') || '560px';
12
- const mobileSheetVh = currentScript.getAttribute('data-mobile-vh') || '85vh'; // leave some page visible
11
+ const openHeight = currentScript.getAttribute('data-open-height') || '95%';
12
+ const mobileSheetVh = currentScript.getAttribute('data-mobile-vh') || '100%'; // leave some page visible
13
13
 
14
14
  // ----- Make styles -----
15
15
  const style = document.createElement('style');
@@ -24,11 +24,7 @@
24
24
  overflow: hidden;
25
25
  background: transparent;
26
26
  }
27
- #jaweb-chatbot-iframe.is-closed {
28
- width: 64px; height: 64px;
29
- border-radius: 9999px;
30
- box-shadow: 0 8px 20px rgba(0,0,0,.2);
31
- }
27
+
32
28
  #jaweb-chatbot-iframe.is-open {
33
29
  width: ${openWidth}; height: ${openHeight};
34
30
  border-radius: 16px;
@@ -41,10 +37,7 @@
41
37
  border-radius: 16px 16px 0 0;
42
38
  box-shadow: 0 -10px 30px rgba(0,0,0,.15);
43
39
  }
44
- #jaweb-chatbot-iframe.is-closed {
45
- ${corner === 'left' ? 'left' : 'right'}: 16px;
46
- bottom: 16px;
47
- }
40
+
48
41
  }
49
42
  `;
50
43
  document.head.appendChild(style);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "shopify-chatbot-widget",
3
3
  "private": false,
4
- "version": "0.4.4",
4
+ "version": "0.4.5",
5
5
  "type": "module",
6
6
  "scripts": {
7
7
  "dev": "vite",
package/xx.html CHANGED
@@ -2,60 +2,55 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="UTF-8" />
5
- <title>Jaweb Chatbot — Iframe Demo</title>
6
- <meta name="viewport" content="width=device-width, initial-scale=1" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Jaweb Chatbot Test</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ margin: 0;
11
+ padding: 0;
12
+ height: 200vh; /* make page scrollable */
13
+ background: linear-gradient(180deg, #f0f4ff 0%, #ffffff 100%);
14
+ }
15
+ header {
16
+ padding: 20px;
17
+ background: #7f28f8;
18
+ color: white;
19
+ text-align: center;
20
+ }
21
+ main {
22
+ padding: 20px;
23
+ max-width: 700px;
24
+ margin: 0 auto;
25
+ }
26
+ </style>
7
27
  </head>
8
28
  <body>
9
- <h1>Test page for Jaweb Chatbot</h1>
10
- <p>This page shows how your chatbot iframe will be injected, like Intercom.</p>
29
+ <header>
30
+ <h1>Jaweb Chatbot Integration Test</h1>
31
+ </header>
11
32
 
12
- <!-- Just load your script -->
13
- <script>
14
- (function () {
15
- // Configuration that you (or your users) can set
16
- const config = {
17
- shop: "your-shop.myshopify.com",
18
- widgetId: "YOUR_WIDGET_ID",
19
- apiBase: "https://api.your-domain.com",
20
- themeColor: "#7F28F8",
21
- position: "bottom-right",
22
- language: "en",
23
- };
33
+ <main>
34
+ <p>
35
+ Scroll this page up and down to make sure background scrolling still works
36
+ while the chatbot bubble is showing.
37
+ </p>
38
+ <p>
39
+ The bubble should appear at the bottom-right corner. Click it, and the
40
+ chatbot iframe should expand.
41
+ </p>
42
+ <p>
43
+ Replace <code>YOUR_COMPANY_USERNAME</code> below with a real one to test a
44
+ live bot session.
45
+ </p>
46
+ </main>
24
47
 
25
- // Create iframe
26
- const iframe = document.createElement("iframe");
27
- iframe.src =
28
- "../dist/iframe.html";
29
- iframe.style.position = "fixed";
30
- iframe.style.bottom = "20px";
31
- iframe.style.right = "20px";
32
- iframe.style.width = "400px";
33
- iframe.style.height = "600px";
34
- iframe.style.zIndex = "999999";
35
- iframe.style.borderRadius = "16px";
36
- iframe.style.border="none"
37
- iframe.id = "jaweb-chatbot-iframe";
48
+ <!-- ✅ Jaweb chatbot embed (script one-liner) -->
49
+ <script
50
+ src="https://cdn.jsdelivr.net/npm/shopify-chatbot-widget@0.4.5/dist/jawebDirect.js"
51
+ data-company="jaweb"
52
+ async
53
+ ></script>
38
54
 
39
- document.body.appendChild(iframe);
40
-
41
- // Pass config into iframe (postMessage)
42
- iframe.onload = function () {
43
- iframe.contentWindow.postMessage(
44
- { type: "jaweb:init", payload: config },
45
- "*"
46
- );
47
- };
48
-
49
- // (Optional) handle messages back from chatbot
50
- window.addEventListener("message", (e) => {
51
- if (e.data.type === "jaweb:ready") {
52
- console.log("Jaweb chatbot is ready!");
53
- }
54
- if (e.data.type === "jaweb:event") {
55
- console.log("Chatbot event:", e.data.payload);
56
- }
57
- });
58
- })();
59
- </script>
60
55
  </body>
61
56
  </html>