Popup com trigger e exit-intent

Popup é o modo de embed do formulário que aparece sobreposto ao conteúdo do site, ao invés de ficar fixo numa seção. Útil pra capturar lead no momento certo — após o user ler conteúdo, antes de sair, ou após scroll comprovando interesse. Esse artigo cobre os 4 triggers, 3 posições, e como configurar show-once pra não cansar o visitante.

Pré-requisitos

• Formulário criado, ativo, e do tipo clássico. Veja Tipos de formulário.
• Acesso pra editar HTML do site.

Acessar configurações de popup

1. /formularios/{form}/editar → aba Distribuição.
2. Bloco Popup widget.
3. Configure trigger, delay/scroll, posição e show-once.
4. Sistema gera o <script> pronto pra colar.

Os 4 triggers

Trigger 1 — Imediatamente (immediate)

Popup aparece assim que a página carrega.

<script src="https://app.syncro.chat/api/form/contato.js"
 data-mode="popup"
 data-trigger="immediate"
 async></script>

Quando usar:

• Páginas de agradecimento (após user fazer X — peça "quer mais?").
• Sites com objetivo único e claro (ex: landing de evento — popup com inscrição).

Quando NÃO usar:

• Site geral (vira intrusivo, prejudica UX e SEO).
• Blog (user vai embora antes de ler).

Trigger 2 — Após X segundos (time)

Popup aparece após X segundos na página.

<script src="https://app.syncro.chat/api/form/newsletter.js"
 data-mode="popup"
 data-trigger="time"
 data-delay="10"
 async></script>

data-delay em segundos (default 5).

Quando usar:

• Blog/site de conteúdo: 15-30s pra dar tempo de ler.
• E-commerce: 30-60s (deixa explorar produtos).

Recomendado:

• Conteúdo curto (landing): 5-10s.
• Conteúdo médio (blog): 20-30s.
• E-commerce: 45-60s.

Trigger 3 — Após scroll (scroll)

Popup aparece quando user rola % da página.

<script src="https://app.syncro.chat/api/form/ebook.js"
 data-mode="popup"
 data-trigger="scroll"
 data-scroll="50"
 async></script>

data-scroll em % (default 50).

Quando usar:

• Sinaliza interesse genuíno (user rolou metade do post → leu metade → engajado).
• Blog post com lead magnet relevante (ex: 50% do post = oferta de ebook).
• Página de produto longa (50% = decidiu, oferece desconto).

Recomendado:

• Posts curtos: 30%.
• Posts longos: 50-70%.
• Páginas com várias seções: 75%.

Trigger 4 — Ao sair da página (exit)

Popup aparece quando user move mouse pra fechar a aba (exit-intent). Detectado via mouseleave no topo da viewport.

<script src="https://app.syncro.chat/api/form/desconto-saida.js"
 data-mode="popup"
 data-trigger="exit"
 async></script>

Quando usar:

• E-commerce: oferecer desconto / cupom de última hora.
• Blog: capturar lead que ia embora (newsletter, ebook).
• Landing page: conversar com quem ia abandonar.

Limitações:

• ❌ Não funciona em mobile (não há "mouse"). Em mobile, exit-intent degrada pra time trigger com delay 30s.
• ❌ Funciona apenas em desktop.

💡 Dica: combine exit-intent (desktop) com time-trigger separado pra mobile (mais delay, ex: 60s). Mas requer 2 forms diferentes ou trigger dinâmico via JS custom.

Posições do popup

data-position:

Posição	Comportamento	Quando usar
center (default)	Modal centrado, overlay escuro de fundo	CTA forte, foco máximo (ex: oferta exclusiva, cupom)
bottom-right	Card no canto inferior direito	Discreto, não bloqueia conteúdo (ex: newsletter, chat-like)
bottom-left	Card no canto inferior esquerdo	Mesma ideia do bottom-right (espelho)

💡 Dica: center é mais agressivo (bloqueia interação). bottom-right / bottom-left mais sutis. Escolha pelo perfil do seu público — agressivo converte mais mas irrita; sutil converte menos mas não polui UX.

Show-once (não reaparecer)

data-show-once="true" (default).

Quando user fecha o popup ou envia o form, sistema salva no localStorage:

localStorage.setItem('syncro_form_shown_{FORM_ID}', '1')

Próximas visitas (no mesmo browser/dispositivo) → popup não reaparece.

Como resetar

User limpa cache/localStorage. Ou abre em modo anônimo.

Mostrar sempre

Se quer popup que sempre aparece (cada visita):

data-show-once="false"

⚠️ Atenção: show-once=false é agressivo. User vai ver popup toda vez. Ruim pra retorno frequente. Use só em campanhas pontuais.

Botão fechar

Todo popup tem X no canto superior direito pra fechar. User não tem como ignorar (exceto fechando aba).

Após fechar:

• Popup some.
• LocalStorage marca shown (se show-once=true).
• Próximas visitas não exibem.

Backdrop / overlay

Pra data-position="center":

• Overlay semi-transparente escurece o site atrás.
• Clique fora do form → fecha popup.

Pra bottom-right / bottom-left:

• Sem overlay — site continua interativo.
• Apenas o card do form fica visível no canto.

Snippet completo de exemplo

Cenário 1 — Newsletter no blog

<script
 src="https://app.syncro.chat/api/form/newsletter-jX9pK2mAb3.js"
 data-mode="popup"
 data-trigger="scroll"
 data-scroll="60"
 data-position="bottom-right"
 data-show-once="true"
 async
></script>

User rola 60% do post → card no canto inferior direito → preenche e-mail → vira lead na lista de newsletter.

Cenário 2 — Cupom de saída em e-commerce

<script
 src="https://app.syncro.chat/api/form/cupom10-K9pX2qA4mZ.js"
 data-mode="popup"
 data-trigger="exit"
 data-position="center"
 data-show-once="true"
 async
></script>

User move mouse pra fechar aba → modal centrado com "Espera! Cupom 10% off aqui" → vira lead com desconto entregue por e-mail.

Cenário 3 — Captura de evento ao vivo

<script
 src="https://app.syncro.chat/api/form/inscricao-evento-pX9bA3kQ.js"
 data-mode="popup"
 data-trigger="immediate"
 data-position="center"
 data-show-once="false"
 async
></script>

User entra → modal central com inscrição. show-once=false → reaparece toda visita (campanha ativa por 7 dias).

Customização visual

Mesmas configurações de cores e fonte do form clássico. Veja Personalizar cores e logo.

💡 Dica: pra popup, use:

• Cor primária que se destaque (não a mesma do site, pra "quebrar" visualmente).
• Border radius maior (12-20px) — popups com cantos arredondados são percebidos como menos agressivos.
• Logo opcional — em popup pequeno (bottom-right), logo poupa espaço.

Tracking de popup

Cada vez que popup aparece, sistema incrementa:

• views_count — total geral.
• views_count_popup — só popups.

Se user fecha sem enviar, conta como view, mas não como conversão.

Em /formularios, KPI Taxa de conversão = (envios / views) × 100. Veja Ver envios.

Boas práticas

1. Não use trigger=immediate em homepage

User mal chegou — popup imediato é o maior fator de bounce. SEO Google penaliza popups intrusivos.

✅ Use time (≥10s) ou scroll (≥30%) em vez disso.

2. Ofereça algo de valor

Popup só converte se promete algo concreto:

• ❌ "Cadastre-se na newsletter" (genérico).
• ✅ "Receba 5 dicas exclusivas de SEO toda semana".
• ✅ "Cupom 10% off só pra você".
• ✅ "Ebook gratuito: Guia do empreendedor 2026".

3. Form curto no popup

Popup é momento de 1 ou 2 campos (e-mail + nome max). Forms longos no popup convertem mal.

4. Mensagem de confirmação clara

Após envio:

• ✅ "Pronto! Cupom enviado pro seu e-mail."
• ✅ "Obrigado! Você está na lista de inscritos."
• ❌ "Sua resposta foi registrada." (genérico).

Configure em Aba Envio do form.

Erros comuns

"Popup não aparece"

• Verifique se o <script> está na página correta.
• Inspeciona console (F12) — erro JS bloqueia carregamento.
• Confira se show-once já marcou no localStorage. Limpe cache pra testar.
• Se trigger=scroll, role manualmente pra confirmar que dispara.

"Popup aparece toda visita mesmo com show-once=true"

LocalStorage está sendo limpo (extensão privacidade ou cache). Default browser persiste — verifique extensões.

"Popup aparece em mobile mas trigger é exit"

Comportamento esperado — exit-intent degrada pra time trigger 30s em mobile (não há mouseleave).

"Form não envia dentro do popup"

Mesma causa de erros do form normal. Veja Embedar no site via SDK.

Diferença entre popup vs inline

Aspecto	Popup	Inline
Posição	Sobreposto ao site	Dentro do site (em seção)
Aparência	Modal/card flutuante	Form fixo
Trigger	4 opções (immediate/time/scroll/exit)	Sempre visível
Show-once	Sim (localStorage)	Não — sempre carrega
Conversão típica	2-8%	5-15% (se bem posicionado)
Intrusividade	Alta	Baixa

💡 Dica: combine os dois. Form inline numa seção fixa do site (rodapé, sidebar) + popup em exit-intent pra capturar saída.

Próximos passos

• Pra customizar visual, veja Personalizar cores e logo.
• Pra ver envios e KPIs, veja Ver envios.

Artigos relacionados

• Criar formulário
• Embedar no site via SDK
• Personalizar cores e logo
• Ver envios