Oliver/od8n_homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new url

Browse Source
This commit is contained in:
Oliver
2025-08-31 15:34:45 +02:00
parent eea991a680
commit b3adf938c3
1 changed files with 64 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
public/widget-signup/widget.js
View File

@@ -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 = `
<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="mumbai" selected>Mumbai</option>
<option value="saopaulo">São Paulo</option>
<option value="manchester">UK - Manchester</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>${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";
}
});
})();