BDG Popup Lead Magnet (Ativo via Agente)

<p><!-- BDG Lead Magnet Popup (Agent Active) --></p> <style id="bdg-popup-styles"> #bdg-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:99998;backdrop-filter:blur(4px);animation:bdgFadeIn 0.3s ease} #bdg-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:99999;background:#fff;border-radius:16px;width:min(520px,92vw);box-shadow:0 24px 64px rgba(0,0,0,0.3);overflow:hidden;animation:bdgSlideUp 0.35s cubic-bezier(.16,1,.3,1)} @keyframes bdgFadeIn{from{opacity:0}to{opacity:1}} @keyframes bdgSlideUp{from{opacity:0;transform:translate(-50%,-42%)}to{opacity:1;transform:translate(-50%,-50%)}} #bdg-popup .bdg-header{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);padding:28px 28px 20px;text-align:center;position:relative} #bdg-popup .bdg-header .bdg-cat{font-size:3rem;display:block;margin-bottom:4px} #bdg-popup .bdg-header h2{color:#fff;margin:0;font-size:1.25rem;font-family:Georgia,serif;line-height:1.4} #bdg-popup .bdg-header p{color:rgba(255,255,255,0.7);font-size:0.85rem;margin:6px 0 0} #bdg-popup .bdg-close{position:absolute;top:12px;right:14px;background:rgba(255,255,255,0.15);border:none;border-radius:50%;color:#fff;width:28px;height:28px;cursor:pointer;font-size:1rem;line-height:28px;text-align:center;transition:background 0.2s} #bdg-popup .bdg-close:hover{background:rgba(255,255,255,0.3)} #bdg-popup .bdg-body{padding:24px 28px 28px} #bdg-popup .bdg-body p{margin:0 0 16px;color:#444;font-size:0.95rem;line-height:1.6} #bdg-popup .bdg-benefits{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:8px} #bdg-popup .bdg-benefits li{display:flex;align-items:center;gap:10px;color:#333;font-size:0.9rem} #bdg-popup .bdg-benefits li::before{content:'✓';background:#e63946;color:#fff;border-radius:50%;width:20px;height:20px;min-width:20px;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:bold} #bdg-form{display:flex;flex-direction:column;gap:12px} #bdg-form input{padding:12px 16px;border:1.5px solid #ddd;border-radius:8px;font-size:0.95rem;width:100%;box-sizing:border-box;transition:border-color 0.2s;font-family:inherit} #bdg-form input:focus{outline:none;border-color:#e63946} #bdg-form button{background:#e63946;color:#fff;border:none;border-radius:8px;padding:14px;font-size:1rem;font-weight:700;cursor:pointer;transition:background 0.2s,transform 0.1s;font-family:inherit} #bdg-form button:hover{background:#c1121f} #bdg-form button:active{transform:scale(0.98)} #bdg-msg{display:none;text-align:center;padding:8px;border-radius:6px;font-size:0.9rem;margin-top:8px} #bdg-msg.success{background:#d1fae5;color:#065f46} #bdg-msg.error{background:#fee2e2;color:#991b1b} .bdg-privacy{font-size:0.75rem;color:#999;text-align:center;margin-top:10px} </style> <div id="bdg-overlay" role="dialog" aria-modal="true" aria-labelledby="bdg-popup-title"> <div id="bdg-popup"> <div class="bdg-header"> <button class="bdg-close" id="bdg-close-btn" aria-label="Fechar">&times;</button><br /> <span class="bdg-cat">🐱</span></p> <h2 id="bdg-popup-title">Guia Gratuito para Donos de Gatos</h2> <p>Mais de 3.000 tutores já baixaram!</p> </p></div> <div class="bdg-body"> <p>Receba agora <strong>“Os 7 Erros que Todo Dono de Gato Comete”</strong> — direto no seu e-mail:</p> <ul class="bdg-benefits"> <li>Como identificar sinais de estresse no seu gato</li> <li>A dieta certa para cada fase da vida do pet</li> <li>Enriquecimento ambiental com o que você tem em casa</li> </ul> <form id="bdg-form" novalidate> <input type="text" id="bdg-name" name="name" placeholder="Seu nome" autocomplete="given-name" required><br /> <input type="email" id="bdg-email" name="email" placeholder="Seu melhor e-mail" autocomplete="email" required><br /> <button type="submit" id="bdg-submit">🐾 Quero meu guia grátis!</button><br /> </form> <div id="bdg-msg"></div> <p class="bdg-privacy">🔒 Sem spam. Cancele quando quiser.</p> </p></div> </p></div> </div> <p><script> (function(){ var W='https://n8n-oqut.srv1184392.hstgr.cloud/webhook/bdg-lead-magnet'; var D=8000,S=7; var o=document.getElementById('bdg-overlay'),c=document.getElementById('bdg-close-btn'),f=document.getElementById('bdg-form'),b=document.getElementById('bdg-submit'),m=document.getElementById('bdg-msg'); function sup(){var t=localStorage.getItem('bdg_popup_closed');if(!t)return false;return(Date.now()-parseInt(t))/(86400000)<S;} function open(){o.style.display='block';} function close(){o.style.display='none';localStorage.setItem('bdg_popup_closed',Date.now().toString());} if(!sup())setTimeout(open,D); c.addEventListener('click',close); o.addEventListener('click',function(e){if(e.target===o)close();}); document.addEventListener('keydown',function(e){if(e.key==='Escape')close();}); f.addEventListener('submit',function(e){ e.preventDefault(); var n=document.getElementById('bdg-name').value.trim(),em=document.getElementById('bdg-email').value.trim(); if(!n||!em){msg('Por favor, preencha todos os campos.','error');return;} if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(em)){msg('E-mail inválido.','error');return;} b.disabled=true;b.textContent='Enviando...'; fetch(W,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:n,email:em,source:'popup-wp'})}) .then(function(r){return r.json();}) .then(function(d){if(d.success){msg('🐱 Verifique seu e-mail!','success');f.style.display='none';localStorage.setItem('bdg_popup_closed',Date.now().toString());}else{msg(d.message||'Tente novamente.','error');b.disabled=false;b.textContent='🐾 Quero meu guia grátis!';}}) .catch(function(){msg('Erro de conexão.','error');b.disabled=false;b.textContent='🐾 Quero meu guia grátis!';}); }); function msg(t,tp){m.textContent=t;m.className=tp;m.style.display='block';} })(); </script></p>