Como Adicionar um Botão que Abre Popup ou Modal
Use o evento de clique de um Botão quando quiser que um CTA abra um modal ou modal personalizado (formulário de oferta, detalhes de bônus, vídeo ou etapa curta de qualificação) sem navegar para fora da página.
Antes de Começar
Certifique-se de ter:
- Uma página aberta no Construtor de Páginas.
- Conteúdo planejado para o popup (formulário, texto, imagem, CTA).
- Familiaridade com a área Modal do Navegador para editar conteúdo de overlay. Consulte Navegador e camadas.
Passo 1: Crie o Conteúdo do Modal
- Abra o Navegador.
- Trabalhe na área Modal para manter o conteúdo do popup separado das seções principais da página.
- Adicione seções, texto, formulário ou mídia que devem aparecer dentro do overlay.
- Mantenha o conteúdo do modal curto — overlays competem com a oferta principal.
Se sua página usa um container alvo de modal personalizado, anote o alvo/classe que o gatilho deve referenciar.
Passo 2: Adicione o Botão Gatilho
- No canvas da página principal, arraste um Botão para o hero, oferta ou seção de preços.
- Defina um rótulo claro como Ver detalhes da oferta, Abrir formulário ou Assistir bônus.
- Clique no botão para abrir o painel de configurações.
Consulte Elemento Botão (referência).
Passo 3: Defina o Evento de Clique para Modal
- Abra as configurações de evento de clique.
- Escolha modal ou modal personalizado (a redação pode variar por versão da UI).
- Para modal personalizado, informe o container alvo / classe que corresponde à sua configuração de modal.
- Confirme que não está usando evento de link simples — uma URL navegaria para fora em vez de abrir o overlay.
| Tipo de evento | Uso típico |
|---|---|
| Modal | Fluxo de modal compartilhado / global na página |
| Modal personalizado | Container modal específico para aquele CTA |
O Resumo da página pode ajudar depois a auditar gatilhos, classes e regras de abertura automática. Consulte Resumo da página.
Passo 4: Estilize e Verifique Conflitos
- Estilize o botão gatilho para contraste e tamanho de toque no mobile.
- Faça preview com outros widgets em nível de página (Cookie, WhatsApp, Notificação) ativos para o overlay não colidir com controles flutuantes.
- Garanta que CTAs do modal (enviar, fechar, link secundário) sejam óbvios.
Passo 5: Publique e Teste
- Salve e Publique.
- Na URL ao vivo, clique no botão gatilho.
- Confirme que o modal abre com o conteúdo correto.
- Feche/dispense o modal e confirme que a página permanece utilizável.
- Reteste no mobile — overlays e teclados podem alterar a altura disponível.
Solução de Problemas
| Problema | O que tentar |
|---|---|
| Botão não faz nada | Confirme que o evento de clique é modal/modal personalizado, não link vazio. |
| Conteúdo errado abre | Selecione o alvo modal correto; edite conteúdo em Navegador → Modal. |
| Modal cortado no mobile | Reduza altura do conteúdo; teste com cabeçalhos fixos desativados se necessário. |
| Confunde com Notificação | Notificação é aviso em nível de página, não overlay modal. Use eventos de clique modal para popups. |
Resultado
Visitantes podem abrir seu popup a partir de um CTA permanecendo na mesma página — útil para ofertas secundárias, formulários e detalhes de bônus.
Documentação Relacionada
FAQ
Modal é o mesmo que Notificação?
Não. Notificação é um aviso singular em nível de página. Um modal é conteúdo de overlay acionado por eventos de clique (ou outras regras de modal da página).
Um botão pode abrir modal e ir para URL?
Dê ao botão uma função principal. Coloque um link secundário dentro do modal se visitantes precisarem de destino após o overlay.
Onde edito o conteúdo do modal depois?
Use a área Modal do Navegador para não confundir camadas de overlay com seções principais da página.