diff --git a/public/widget.js b/public/widget.js
new file mode 100644
index 0000000..e5d6455
--- /dev/null
+++ b/public/widget.js
@@ -0,0 +1,186 @@
+(function() {
+  console.log("WIDGET JS LOADED");
+
+  const container = document.getElementById("my-signup-widget");
+  if (!container) return;
+
+  // --- Hardcoded tracking values ---
+  const utm_source = "scholarix";
+  const utm_campaign = "trial_widget";
+  const default_product = "odoo_19";
+
+  const shadow = container.attachShadow({ mode: "open" });
+
+  const styles = `
+    :host {
+      all: initial;
+      font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Arial,sans-serif;
+      display: block;
+      max-width: 420px;
+      margin: 0 auto;
+      color: #cffaff;
+    }
+
+    .card {
+      background: #084574;
+      border: 1px solid #cffaff33;
+      border-radius: 16px;
+      box-shadow: 0 6px 20px rgba(0,0,0,0.4);
+      padding: 24px;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 16px;
+    }
+
+    .icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 10px;
+      background: #cffaff22;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .title {
+      font-size: 18px;
+      font-weight: 800;
+      color: #cffaff;
+    }
+
+    .subtitle {
+      font-size: 13px;
+      color: #a9d8f3;
+    }
+
+    label, .label {
+      display: block;
+      font-size: 12px;
+      color: #cffaff;
+      font-weight: 600;
+      margin: 12px 0 6px;
+    }
+
+    select, input[type="email"] {
+      width: 100%;
+      background: #08395f;
+      border: 1px solid #cffaff44;
+      border-radius: 10px;
+      padding: 10px 12px;
+      font-size: 14px;
+      color: #cffaff;
+      outline: none;
+      box-sizing: border-box;
+    }
+
+    button {
+      margin-top: 16px;
+      width: 100%;
+      border: none;
+      border-radius: 12px;
+      padding: 12px 14px;
+      font-size: 15px;
+      font-weight: 800;
+      background: linear-gradient(135deg,#cffaff,#6ad7ff);
+      color: #084574;
+      cursor: pointer;
+      box-shadow: 0 8px 18px rgba(0,0,0,0.3);
+    }
+
+    button:hover {
+      background: linear-gradient(135deg,#b3f2ff,#84e2ff);
+    }
+
+    .footnote {
+      margin-top: 10px;
+      font-size: 11px;
+      color: #a9d8f3;
+      text-align: center;
+    }
+
+    .status {
+      padding: 20px;
+      font-size: 15px;
+      color: #cffaff;
+      background: #08395f;
+      border: 1px solid #cffaff55;
+      border-radius: 12px;
+      text-align: center;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+      word-break: break-word;
+    }
+    .status.success { background: #065f46; color: #cffaff; }
+    .status.error { background: #991b1b; color: #fff; }
+  `;
+
+  const html = `
+    <form class="card">
+      <div class="header">
+        <img class="icon" src="images/logo.jpg">
+        <div>
+          <div class="title">Try Managed ODOO - 4 Weeks Free</div>
+          <div class="subtitle">Full-featured 4-week trial. No credit card required.</div>
+        </div>
+      </div>
+
+      <label for="location">Location</label>
+      <select id="location" name="location" required>
+        <option value="" disabled selected>Select a region</option>
+        <option value="manchester">UK, Manchester</option>
+        <option value="boston">US, Boston</option>
+        <option value="mumbai">IN, Mumbai</option>
+        <option value="saopaulo">BR, Sao Paulo</option>
+        <option value="Meppel">NL, Meppel</option>
+      </select>
+
+      <label for="email">Work Email</label>
+      <input id="email" name="email" type="email" required placeholder="you@company.com">
+
+      <input type="hidden" name="product" value="${default_product}">
+      <input type="hidden" name="utm_source" value="${utm_source}">
+      <input type="hidden" name="utm_campaign" value="${utm_campaign}">
+
+      <button type="submit" class="plausible-event-name=Trial">Start 4-Week Free Trial</button>
+
+      <div class="footnote">
+        By submitting, you agree to the T&C of Scholarix.
+      </div>
+    </form>
+
+    <div id="status" class="status" style="display:none;"></div>
+  `;
+
+  shadow.innerHTML = `<style>${styles}</style>${html}`;
+
+  const form = shadow.querySelector("form");
+  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/47129739-e60b-4944-b6c2-d3fd5ce0991b", {
+        method: "POST",
+        body: formData,
+      });
+
+      const text = await res.text();
+
+      form.style.display = "none";
+      statusEl.textContent = text;
+      statusEl.className = "status success";
+    } catch (err) {
+      statusEl.textContent = "❌ Failed to submit. Please try again.";
+      statusEl.className = "status error";
+    }
+  });
+})();
+