From b3adf938c3652fb6f4e75f91621b98a3a38e121f Mon Sep 17 00:00:00 2001 From: Oliver Date: Sun, 31 Aug 2025 15:34:45 +0200 Subject: [PATCH] new url --- public/widget-signup/widget.js | 146 +++++++++++++++------------------ 1 file changed, 64 insertions(+), 82 deletions(-) diff --git a/public/widget-signup/widget.js b/public/widget-signup/widget.js index 18b1b90..0fb67b7 100644 --- a/public/widget-signup/widget.js +++ b/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, - .label { - display: block; - font-size: 12px; - color: #334155; - font-weight: 600; - margin: 12px 0 6px; + .header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } + .icon { width: 36px; height: 36px; border-radius: 12px; + 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, .label { display: block; font-size: 12px; color: #334155; font-weight: 600; margin: 12px 0 6px; } - .options { - display: flex; - gap: 12px; - flex-wrap: wrap; - margin-bottom: 6px; + .options { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } + .option { 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; } - .option { - 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 { + 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 { - margin-top: 10px; - font-size: 11px; - color: #64748b; + .footnote { margin-top: 10px; font-size: 11px; color: #64748b; text-align: center; } + + .status { + 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 = ` -
+
-
★
+
Try Managed Odoo or n8n — Free
Full-featured 4-week trial. No credit card required.
@@ -159,9 +115,7 @@ @@ -172,15 +126,43 @@
- By submitting, you agree to be contacted about your trial and our T&Cs. + By submitting, you agree to the T&C of ODOO4projects.
+ + `; - // Append everything into shadow DOM - shadow.innerHTML = ` - - ${html} - `; + shadow.innerHTML = `${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/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"; + } + }); })();