Como adicionar um botão que abre popup ou modal
Use um evento de clique de Button quando quiser que um CTA abra um modal ou custom modal (formulário de oferta, detalhes de bônus, vídeo ou etapa curta de qualificação) sem sair da página.
Antes de começar
Confirme que você tem:
- Uma página aberta no Page Builder.
- Conteúdo planejado para o popup (formulário, texto, imagem, CTA).
- Familiaridade com a área Modal do Navigator para editar conteúdo de overlay. Veja Navigator e camadas.
Passo 1: Criar o conteúdo modal
- Abra o Navigator.
- Trabalhe na área Modal para o conteúdo do popup permanecer separado das seções principais da página.
- Adicione as seções, texto, formulário ou mídia que devem aparecer dentro do overlay.
- Mantenha o conteúdo modal curto — overlays competem com a oferta principal.
Se sua página usa um container de custom modal, anote o target/class que o gatilho deve referenciar.
Passo 2: Adicionar o botão gatilho
- No canvas da página principal, arraste um Button para o hero, oferta ou seção de preço.
- Defina um rótulo claro como See offer details, Open form ou Watch bonus.
- Clique no botão para abrir a gaveta de configurações.
Veja Elemento Button (referência).
Passo 3: Definir o evento de clique para Modal
- Abra as configurações de click event.
- Escolha modal ou custom modal (a redação pode variar conforme a versão da UI).
- Para custom modal, informe o target container / class que corresponde à sua configuração modal.
- Confirme que não está usando um evento de link simples — uma URL navegaria para fora em vez de abrir o overlay.
| Tipo de evento | Uso típico |
|---|---|
| Modal | Fluxo modal compartilhado / global na página |
| Custom modal | Container modal específico para aquele CTA |
O Page Summary pode ajudar depois a auditar gatilhos, classes e regras de abertura automática. Veja Page Summary.
Passo 4: Estilizar e verificar conflitos
- Estilize o botão gatilho para contraste e tamanho de toque no mobile.
- Pré-visualize com outros widgets em nível de página (Cookie, WhatsApp, Notification) ativados para o overlay não colidir com controles flutuantes.
- Garanta que CTAs do modal (enviar, fechar, link secundário) sejam óbvios.
Passo 5: Publicar e testar
- Save e Publish.
- 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.
- Teste novamente 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/custom modal, não um link vazio. |
| Conteúdo errado abre | Selecione o target modal correto; edite conteúdo em Navigator → Modal. |
| Modal cortado no mobile | Reduza a altura do conteúdo; teste com cabeçalhos fixos desativados se necessário. |
| Confunde com Notification | Notification é um aviso em nível de página, não um overlay modal. Use eventos de clique modal para popups. |
Resultado
Os 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
Perguntas frequentes
Modal é o mesmo que Notification?
Não. Notification é um aviso singular em nível de página. Um modal é conteúdo de overlay acionado por eventos de clique (ou outras regras modais da página).
Um botão pode abrir modal e ir para uma URL?
Dê ao botão uma função principal. Coloque um link secundário dentro do modal se os visitantes precisarem de um destino após o overlay.
Onde edito o conteúdo modal depois?
Use a área Modal do Navigator para não confundir camadas de overlay com seções principais da página.