scholarix
This commit is contained in:
Oliver
186
public/widget.js
Normal file
186
public/widget.js
Normal file
@@ -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";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
|
||||||
Reference in New Issue
Block a user