Add Rückruf (callback) lead popup to chooser + both demos
Floating button + centered modal on every page, opened from the demo bar and a fixed FAB. Minimal required fields (name + phone), optional business / what-they-want / message. POSTs to the lead-intake webhook (client_id DEMO/DEMO-A/DEMO-B, source callback-*). Also refreshes the stale "noch nicht aktiv" notices now that the forms are live. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -133,7 +133,7 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-bar">Demo · Tier A (Google-Stack) — Beispielseite für Kund:innen · Formular & Buchung noch nicht aktiv</div>
|
||||
<div class="demo-bar">Demo · Tier A (Google-Stack) — Beispielseite für Kund:innen <button class="cb-open" type="button" onclick="cbOpen()">📞 Rückruf anfordern</button></div>
|
||||
|
||||
<header class="nav">
|
||||
<div class="wrap nav-inner">
|
||||
@@ -311,5 +311,116 @@
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
<script>window.CB_CTX = { client_id: "DEMO-A", source: "callback-tier-a" };</script>
|
||||
<!-- ===== Rückruf-Widget (lead capture popup) ===== -->
|
||||
<style>
|
||||
.cb-fab { position: fixed; right: 18px; bottom: 18px; z-index: 900; background: #0f8a7e; color: #fff; border: 0; border-radius: 999px; padding: 13px 20px; font: 600 .95rem system-ui, -apple-system, Segoe UI, Roboto, sans-serif; box-shadow: 0 10px 26px rgba(0,0,0,.28); cursor: pointer; transition: transform .15s, background .2s; }
|
||||
.cb-fab:hover { transform: translateY(-2px); background: #0b6b62; }
|
||||
.cb-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(8,20,19,.55); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 18px; }
|
||||
.cb-overlay.open { display: flex; }
|
||||
.cb-modal { position: relative; width: min(440px, 100%); background: #fff; color: #16302f; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.35); padding: 28px 26px 22px; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; max-height: 92vh; overflow: auto; animation: cbIn .18s ease; }
|
||||
@keyframes cbIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
|
||||
.cb-modal h3 { margin: 0 0 4px; font-size: 1.35rem; }
|
||||
.cb-sub { margin: 0 0 18px; color: #5d716f; font-size: .9rem; }
|
||||
.cb-x { position: absolute; top: 10px; right: 13px; background: none; border: 0; font-size: 1.7rem; line-height: 1; color: #9fb0ad; cursor: pointer; }
|
||||
.cb-x:hover { color: #16302f; }
|
||||
.cb-modal label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 13px; }
|
||||
.cb-modal label .o { color: #9aa7a5; font-weight: 400; }
|
||||
.cb-modal input, .cb-modal textarea { width: 100%; margin-top: 5px; font: inherit; font-size: .94rem; color: #16302f; background: #f6f8f8; border: 1px solid #e3eae9; border-radius: 9px; padding: 10px 12px; resize: vertical; }
|
||||
.cb-modal input:focus, .cb-modal textarea:focus { outline: none; border-color: #0f8a7e; background: #fff; }
|
||||
.cb-submit { width: 100%; margin-top: 4px; background: #0f8a7e; color: #fff; border: 0; border-radius: 999px; padding: 13px; font: 600 1rem system-ui; cursor: pointer; transition: background .2s; }
|
||||
.cb-submit:hover { background: #0b6b62; }
|
||||
.cb-submit:disabled { opacity: .6; cursor: default; }
|
||||
.cb-toast { display: none; margin-top: 14px; padding: 11px 13px; border-radius: 9px; font-size: .88rem; font-weight: 500; }
|
||||
.cb-toast.ok { background: #e3f6ec; color: #0c6b3c; border: 1px solid #b8e6cc; }
|
||||
.cb-toast.err { background: #fdecec; color: #9b2226; border: 1px solid #f3c7c7; }
|
||||
.cb-open { margin-left: 10px; background: rgba(255,255,255,.16); color: inherit; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; padding: 3px 13px; font: 600 .74rem system-ui; cursor: pointer; letter-spacing: .4px; vertical-align: middle; }
|
||||
.cb-open:hover { background: rgba(255,255,255,.30); }
|
||||
@media (max-width: 560px) { .cb-fab { right: 12px; bottom: 12px; padding: 11px 17px; } }
|
||||
</style>
|
||||
|
||||
<button class="cb-fab" type="button" onclick="cbOpen()" aria-label="Rückruf anfordern">📞 Rückruf</button>
|
||||
|
||||
<div class="cb-overlay" id="cbOverlay" onclick="cbBg(event)">
|
||||
<div class="cb-modal" role="dialog" aria-modal="true" aria-labelledby="cbTitle">
|
||||
<button class="cb-x" type="button" onclick="cbClose()" aria-label="Schließen">×</button>
|
||||
<h3 id="cbTitle">Rückruf anfordern</h3>
|
||||
<p class="cb-sub">Name & Nummer genügen — wir melden uns bei Ihnen. Alles andere ist optional.</p>
|
||||
<form onsubmit="return cbSubmit(event, this)">
|
||||
<input type="hidden" name="client_id" />
|
||||
<input type="hidden" name="source" />
|
||||
<label>Name *
|
||||
<input name="name" required autocomplete="name" placeholder="Vor- und Nachname" />
|
||||
</label>
|
||||
<label>Telefon *
|
||||
<input name="phone" required autocomplete="tel" inputmode="tel" placeholder="+49 …" />
|
||||
</label>
|
||||
<label>Ihr Betrieb <span class="o">(optional)</span>
|
||||
<input name="business" placeholder="z. B. Café Lichtblick" />
|
||||
</label>
|
||||
<label>Was sollen wir für Sie umsetzen? <span class="o">(optional)</span>
|
||||
<input name="service" placeholder="Website, Online-Buchung, Rückruf-Service …" />
|
||||
</label>
|
||||
<label>Nachricht <span class="o">(optional)</span>
|
||||
<textarea name="message" rows="2" placeholder="Worum geht es?"></textarea>
|
||||
</label>
|
||||
<button class="cb-submit" type="submit">Rückruf anfordern</button>
|
||||
<div class="cb-toast" id="cbToast"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const CB_WEBHOOK = 'https://n8n.mivanchenko.de/webhook/lead-intake';
|
||||
const cbCtx = window.CB_CTX || { client_id: 'DEMO', source: 'callback' };
|
||||
function cbOpen() {
|
||||
const o = document.getElementById('cbOverlay');
|
||||
o.querySelector('[name=client_id]').value = cbCtx.client_id;
|
||||
o.querySelector('[name=source]').value = cbCtx.source;
|
||||
o.classList.add('open');
|
||||
document.body.style.overflow = 'hidden';
|
||||
setTimeout(() => o.querySelector('[name=name]').focus(), 60);
|
||||
}
|
||||
function cbClose() {
|
||||
document.getElementById('cbOverlay').classList.remove('open');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
function cbBg(e) { if (e.target.id === 'cbOverlay') cbClose(); }
|
||||
document.addEventListener('keydown', e => { if (e.key === 'Escape') cbClose(); });
|
||||
async function cbSubmit(e, form) {
|
||||
e.preventDefault();
|
||||
const btn = form.querySelector('.cb-submit');
|
||||
const toast = document.getElementById('cbToast');
|
||||
const d = Object.fromEntries(new FormData(form).entries());
|
||||
let msg = (d.message || '').trim();
|
||||
if (d.business) msg = (msg ? msg + ' — ' : '') + 'Betrieb: ' + d.business;
|
||||
const payload = {
|
||||
client_id: d.client_id, source: d.source,
|
||||
name: d.name, phone: d.phone,
|
||||
service_interest: d.service || '', message: msg
|
||||
};
|
||||
const old = btn.textContent;
|
||||
btn.disabled = true; btn.textContent = 'Senden…';
|
||||
toast.style.display = 'none';
|
||||
try {
|
||||
const r = await fetch(CB_WEBHOOK, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
|
||||
if (!r.ok) throw new Error(r.status);
|
||||
toast.className = 'cb-toast ok';
|
||||
toast.textContent = '✓ Danke! Wir rufen Sie zurück.';
|
||||
toast.style.display = 'block';
|
||||
form.reset();
|
||||
setTimeout(cbClose, 2200);
|
||||
} catch (err) {
|
||||
toast.className = 'cb-toast err';
|
||||
toast.textContent = '⚠ Senden fehlgeschlagen. Bitte erneut versuchen.';
|
||||
toast.style.display = 'block';
|
||||
} finally {
|
||||
btn.disabled = false; btn.textContent = old;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
<!-- ===== /Rückruf-Widget ===== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user