new url

public/widget-signup/widget.js

@@ -1,22 +1,17 @@
 (function() {
-  // Locate the script tag
   const currentScript = document.currentScript;
   const affiliateFromAttr = currentScript.getAttribute("data-affiliate");
 
-  // Allow ?affiliate=... from URL
   const params = new URLSearchParams(window.location.search);
   const affiliateFromURL = params.get("affiliate");
 
   const affiliateCode = affiliateFromURL || affiliateFromAttr || "None";
 
-  // Container element
   const container = document.getElementById("my-signup-widget");
   if (!container) return;
 
-  // Attach shadow DOM
   const shadow = container.attachShadow({ mode: "open" });
 
-  // CSS for the widget (isolated)
   const styles = `
     :host {
       all: initial;
@@ -34,68 +29,24 @@
       padding: 20px;
     }
 
-    .header {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      margin-bottom: 12px;
-    }
-    .icon {
-      width: 36px;
-      height: 36px;
-      border-radius: 12px;
-      background: linear-gradient(135deg,#6ee7b7,#3b82f6);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: 700;
-      color: #fff;
-    }
-    .title {
-      font-size: 18px;
-      line-height: 1.2;
-      font-weight: 800;
-      color: #0f172a;
-    }
-    .subtitle {
-      font-size: 13px;
-      color: #475569;
-    }
 
-    label,
+    .header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
-    .label {
+    .icon { width: 36px; height: 36px; border-radius: 12px;
-      display: block;
+      display: flex; align-items: center; justify-content: center;
-      font-size: 12px;
+      font-weight: 700; color: #fff;
-      color: #334155;
-      font-weight: 600;
-      margin: 12px 0 6px;
     }
+    .title { font-size: 18px; line-height: 1.2; font-weight: 800; color: #0f172a; }
+    .subtitle { font-size: 13px; color: #475569; }
+    label, .label { display: block; font-size: 12px; color: #334155; font-weight: 600; margin: 12px 0 6px; }
 
-    .options {
+    .options { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
-      display: flex;
+    .option { flex: 1; display: flex; align-items: center; gap: 8px;
-      gap: 12px;
+      border: 1px solid #cbd5e1; border-radius: 10px; padding: 10px 12px;
-      flex-wrap: wrap;
+      cursor: pointer; background: #fff;
-      margin-bottom: 6px;
     }
+    input[type="radio"] { accent-color: #3b82f6; margin: 0; }
 
-    .option {
+    select, input[type="email"], .affiliate-display {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      border: 1px solid #cbd5e1;
-      border-radius: 10px;
-      padding: 10px 12px;
-      cursor: pointer;
-      background: #fff;
-    }
-
-    input[type="radio"] {
-      accent-color: #3b82f6;
-      margin: 0;
-    }
-
-    select, input[type="email"], affiliate-display {
       width: 100%;
       background: #fff;
       border: 1px solid #cbd5e1;
@@ -106,10 +57,7 @@
       outline: none;
       box-sizing: border-box;
     }
-
+    .affiliate-display { background: #f8fafc; }
-    .affiliate-display {
-      background: #f8fafc;
-    }
 
     button {
       margin-top: 16px;
@@ -125,19 +73,27 @@
       box-shadow: 0 8px 18px rgba(37,99,235,.25);
     }
 
-    .footnote {
+    .footnote { margin-top: 10px; font-size: 11px; color: #64748b; text-align: center; }
-      margin-top: 10px;
+
-      font-size: 11px;
+    .status {
-      color: #64748b;
+      padding: 20px;
+      font-size: 15px;
+      color: #0f172a;
+      background: linear-gradient(135deg,#f0f9ff,#e0f2fe);
+      border: 1px solid #cbd5e1;
+      border-radius: 12px;
       text-align: center;
+      box-shadow: 0 4px 12px rgba(16,24,40,.08);
+      word-break: break-word;
     }
+    .status.success { background: linear-gradient(135deg,#d1fae5,#a7f3d0); color: #065f46; }
+    .status.error { background: linear-gradient(135deg,#fee2e2,#fecaca); color: #991b1b; }
   `;
 
-  // HTML structure
   const html = `
-    <form action="https://001-001-123e4567-e89b-12d3-a456-426614174000.od8n.com/webhook-test/28c30b58-7786-4c63-b662-2a840014e472" method="post" class="card">
+    <form class="card">
       <div class="header">
-        <div class="icon">★</div>
+        <img class="icon" src="https://sp01.odoo4projects.com/hugo/live/4.svg">
         <div>
           <div class="title">Try Managed Odoo or n8n — Free</div>
           <div class="subtitle">Full-featured 4-week trial. No credit card required.</div>
@@ -159,9 +115,7 @@
       <label for="location">Location</label>
       <select id="location" name="location" required>
         <option value="" disabled>Select a region</option>
-        <option value="amsterdam">Amsterdam</option>
+        <option value="manchester">UK - Manchester</option>
-        <option value="mumbai" selected>Mumbai</option>
-        <option value="saopaulo">São Paulo</option>
       </select>
 
       <label for="email">Work Email</label>
@@ -172,15 +126,43 @@
       <button type="submit">Start 4-Week Free Trial</button>
 
       <div class="footnote">
-        By submitting, you agree to be contacted about your trial and our T&Cs.
+        By submitting, you agree to the T&C of ODOO4projects.
       </div>
     </form>
+
+    <div id="status" class="status" style="display:none;"></div>
   `;
 
-  // Append everything into shadow DOM
+  shadow.innerHTML = `<style>${styles}</style>${html}`;
-  shadow.innerHTML = `
+
-    <style>${styles}</style>
+  const form = shadow.querySelector("form");
-    ${html}
+  const statusEl = shadow.getElementById("status");
-  `;
+
+  form.addEventListener("submit", async (e) => {
+    e.preventDefault();
+    statusEl.style.display = "block";
+    statusEl.textContent = "Submitting...";
+    statusEl.className = "status";
+
+    try {
+      const formData = new FormData(form);
+      const res = await fetch("https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c25169c6-4234-4b47-8e74-612b9539da0a", {
+        method: "POST",
+        body: formData,
+      });
+
+      const text = await res.text();
+
+      // Hide the form
+      form.style.display = "none";
+
+      // Show the webhook response nicely
+      statusEl.textContent = text;
+      statusEl.className = "status success";
+    } catch (err) {
+      statusEl.textContent = "❌ Failed to submit. Please try again.";
+      statusEl.className = "status error";
+    }
+  });
 })();