/* ═══════════════════════════════════════════════════════════
FLUTUANTES — WhatsApp, sticky CTA (mobile) e exit-intent
Gatilhos do exit-popup preservados da v1: só aparece depois de
45s + 35% de rolagem, para não interromper a leitura.
═══════════════════════════════════════════════════════════ */
const floatingStyles = {
waBtn: { position: 'relative' },
};
/* ── Botão flutuante do WhatsApp ─────────────────────────── */
function WhatsAppFloat() {
const [tip, setTip] = React.useState(false);
const scrollY = useScrollY();
// Em telas estreitas o botão fica sobre o texto do hero: só aparece
// depois que o usuário passa da primeira tela.
const narrow = typeof window !== 'undefined' && window.innerWidth <= 760;
const hidden = narrow && scrollY < window.innerHeight * 0.6;
React.useEffect(() => {
const show = setTimeout(() => setTip(true), 9000);
const hide = setTimeout(() => setTip(false), 17000);
return () => {
clearTimeout(show);
clearTimeout(hide);
};
}, []);
return (
Fale com a gente agora!
Tire dúvidas sobre planos ou peça uma demonstração ao vivo.
);
}
/* ── Barra fixa de CTA no mobile ─────────────────────────── */
function StickyCTA() {
const scrollY = useScrollY();
const show = scrollY > 700;
return (
);
}
/* sessionStorage lança em file://, Safari privado e quando cookies de
terceiros estão bloqueados — nunca acessar sem proteção. */
const memoryStore = {};
function safeStorage(key, value) {
try {
if (value === undefined) return window.sessionStorage.getItem(key);
window.sessionStorage.setItem(key, value);
return value;
} catch (e) {
if (value === undefined) return memoryStore[key] || null;
memoryStore[key] = value;
return value;
}
}
/* ── Exit-intent ─────────────────────────────────────────── */
function ExitPopup() {
const [open, setOpen] = React.useState(false);
const doneRef = React.useRef(false);
React.useEffect(() => {
if (safeStorage('klyvo-exit-seen')) {
doneRef.current = true;
return;
}
let elapsed = false;
const timer = setTimeout(() => {
elapsed = true;
}, 45000);
const scrolledEnough = () => {
const max = document.body.scrollHeight - window.innerHeight;
return max > 0 && window.scrollY / max > 0.35;
};
const trigger = () => {
if (doneRef.current || !elapsed || !scrolledEnough()) return;
doneRef.current = true;
safeStorage('klyvo-exit-seen', '1');
setOpen(true);
};
// Desktop: mouse sai pelo topo da viewport
const onLeave = (e) => {
if (e.clientY <= 0) trigger();
};
// Mobile: usuário volta rapidamente ao topo (sem gatilho de inatividade)
let lastY = window.scrollY;
const onScroll = () => {
const y = window.scrollY;
if (lastY - y > 260 && y < 420) trigger();
lastY = y;
};
document.addEventListener('mouseout', onLeave);
window.addEventListener('scroll', onScroll, { passive: true });
return () => {
clearTimeout(timer);
document.removeEventListener('mouseout', onLeave);
window.removeEventListener('scroll', onScroll);
};
}, []);
React.useEffect(() => {
if (!open) return;
const onKey = (e) => e.key === 'Escape' && setOpen(false);
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [open]);
const close = () => setOpen(false);
return (
e.target === e.currentTarget && close()}
>
Antes de sair…
Você ainda não testou o Klyvo. São 15 dias grátis, sem cartão e sem compromisso — dá pra
ver tudo funcionando na sua rotina hoje mesmo.
Feito por quem atende
O Klyvo foi fundado por uma equipe de dentistas. Cada módulo nasceu de um problema real de
consultório — não de um manual de software.