Modelos de pop-up para sites: 16 designs prontos para cada objetivo

Um pop-up só é tão bom quanto o momento em que aparece. O design importa, mas o que decide se ele converte ou irrita é a segmentação, o timing e se o formato combina com a mensagem — uma barra fina para um aviso de frete, uma sobreposição de tela cheia para um lançamento.

A seguir estão 16 modelos de pop-up para sites que cobrem todos os formatos comuns: barras, modais, sobreposições, notificações, interações gamificadas e indicadores de progresso. Cada um é um modelo funcional que você pode configurar — texto, cores, segmentação e frequência — sem escrever código. Cada um tem link para o guia completo de configuração.

O que faz um bom design de pop-up

Antes dos modelos, os critérios que separam um pop-up com o qual as pessoas interagem de um que elas fecham:

• Uma única tarefa. Um pop-up que pede um email, promove uma liquidação e anuncia um novo recurso não vai conseguir nenhuma das três coisas.
• Formato proporcional ao peso. Mensagem pequena, espaço pequeno. Reserve as sobreposições de tela cheia para momentos que realmente mereçam a interrupção.
• Saída visível. Um pop-up difícil de fechar transforma uma rejeição em ressentimento e, no celular, pode render uma penalização do Google.
• Limite de frequência. A segunda exibição da mesma mensagem tem desempenho pior que a primeira; a quinta causa estrago.
• Segmentação acima do timing. “Depois de 5 segundos” é uma regra grosseira. “Visitante recorrente, carrinho acima de $50, ainda não viu esta oferta” é um motivo para aparecer.

Barras: mensagens persistentes e pouco intrusivas

As barras ficam no topo ou no rodapé da página sem bloquear o conteúdo — a escolha certa para tudo o que deve continuar visível em vez de exigir uma decisão.

Barra de anúncios — uma faixa fina de largura total para mensagens do site inteiro: ofertas de frete, liquidações, novidades de produtos ou avisos de política. No topo ou no rodapé, fixa ou estática.

Barra de anúncios rotativa — a mesma faixa alternando até cinco mensagens, cada uma com seu link, em um timer com navegação por pontos e transição de esmaecimento ou deslizamento. Útil quando várias coisas disputam o mesmo espaço.

Barra de status de frete grátis — uma barra de progresso em tempo real que lê um valor do perfil do visitante — “Faltam $65 para o frete grátis” — e se enche conforme o carrinho cresce.

Barra de status por níveis — a versão de fidelidade: mostra o nível atual, o progresso até o próximo e o que é desbloqueado nele, com base em pontos, gasto ou pedidos.

Pop-ups e modais: pedidos focados

Modal centralizado — um pop-up centralizado sobre uma sobreposição escura, com quatro layouts de imagem em um só modelo e controle sobre a posição da imagem no celular. A escolha padrão para uma oferta única e clara.

Sobreposição de tela cheia — uma tela de boas-vindas que ocupa todo o viewport, com fundo em cor, gradiente ou imagem sangrada. Para lançamentos, campanhas sazonais e boas-vindas na primeira visita.

Notificação de canto — um cartão de notificação compacto que combina imagem, título, mensagem curta e chamada para ação. Pouco intrusivo — ideal para prova social, promoções leves e empurrõezinhos para recursos.

Pop-up de cupom — um código promocional com opções de revelação: clicar para copiar, clicar para revelar ou sempre visível, além de imagem, título, CTA e letras miúdas.

Formulário de captura de leads — coleta os dados do visitante e os grava no perfil do Personyze, para que você possa fazer follow-up, segmentar ou personalizar o que ele verá a seguir. Layout lado a lado ou empilhado.

Formatos interativos e gamificados

Estes pedem que o visitante faça algo. O engajamento é muito maior, e o custo de usá-los em excesso também.

Roleta de prêmios — uma roleta de prêmios gamificada com chances que você controla, em layout empilhado ou de tela cheia. O que cada visitante ganha é salvo no perfil para segmentação posterior.

Quiz de recomendação — algumas perguntas em que cada resposta vota em um grupo de resultado, terminando em uma recomendação sob medida e uma chamada para ação.

Os dois são tratados com mais profundidade no guia de marketing de gamificação.

A Roleta de prêmios em detalhes

Entre os modelos interativos, a Roleta de prêmios é a que merece uma explicação completa — ela converte bem porque o desconto parece conquistado em vez de dado, e coleta muito mais do que um resgate de cupom se você a configurar direito.

Você configura de quatro a oito segmentos, cada um com rótulo, cor, mensagem de prêmio e código de cupom. O visitante clica, a roleta desacelera e a mensagem do segmento vencedor aparece com confete ou um brilho.

• Você controla as chances. Cada segmento tem um peso relativo de chance de ganhar — pesos de 35/25/20/12/5 viram exatamente essas porcentagens. Mantenha os prêmios grandes raros e os pequenos comuns.
• Adicione uma fatia perdedora para gerar suspense. Dê a um segmento um rótulo como Tente de novo e deixe o cupom em branco: ele contará como fatia sem prêmio.
• Controle os novos giros. Modo de tentativas pode ser Único (um giro, resultado travado), Nova tentativa (girar de novo só em uma fatia perdedora até ganhar) ou Múltiplo (um número fixo de giros).
• Incorporada ou em tela cheia. Incorpore em uma página ou centralize sobre uma sobreposição escurecida, com as mesmas chances nos dois casos.
• Salve o resultado no perfil. Esta é a parte que a maioria das roletas deixa de fora — o prêmio e o código vencedores são gravados no perfil do visitante, para que você possa fazer follow-up com quem ganhou frete grátis mas nunca comprou, ou excluir quem já resgatou.

A versão com formulário, quando você quer o email

A roleta padrão deliberadamente não coloca um formulário antes do giro — a recompensa é o próprio giro, o que mantém o atrito baixo. Quando o lead importa mais do que o jogo, a roleta de prêmios com formulário coloca um formulário na frente.

A roleta fica visível desde o primeiro instante, mas acinzentada e com um cadeado, para que o visitante veja exatamente em troca de quê está deixando o endereço. Ao enviar, o formulário dá lugar a um agradecimento, a roleta é desbloqueada e gira — e o email e o prêmio ganho vão para o mesmo perfil. Um alerta: quando alguém “pagou” com o próprio endereço, uma fatia perdedora frustra, então mantenha essas fatias raras ou faça todas darem alguma coisa.

A configuração completa está na documentação do modelo Roleta de prêmios, e há um artigo mais longo no guia prático da roleta de prêmios.

Progresso, status e urgência

Cartão de status — o formato em cartão da mecânica de progresso — o quanto o visitante está perto do frete grátis ou de uma recompensa, como cartão centralizado ou pop-up movido por um valor do perfil em tempo real.

Cartão de status por níveis — o mesmo cartão mostrando a progressão nos níveis de fidelidade: Bronze, Prata, Platina, com a distância até o próximo nível.

Modelos de contagem regressiva — três variantes — cartão, barra e barra de evento — que compartilham o mesmo mecanismo de timer, para uma liquidação que termina, um preço que sobe ou um evento que começa.

Contagem regressiva com progresso do evento — uma barra que se enche conforme a data se aproxima, em vez de depender só de números, com um botão de inscrição. Feita para webinars, lançamentos e sessões ao vivo.

Na página: o espaço do hero

Slider de hero — um banner hero rotativo com até quatro slides, cada um com imagem, título, subtítulo e botão próprios — texto ao lado da imagem ou sobre um fundo sangrado.

Exemplos de pop-up por objetivo

Se você sabe o resultado que quer, este é o caminho mais curto até um formato:

• Aumentar a lista de emails — Formulário de captura de leads, uma Roleta de prêmios que pede o endereço depois da vitória, ou a Roleta de prêmios com formulário que pede antes.
• Aumentar o ticket médio — Barra de status de frete grátis ou Cartão de status.
• Movimentar uma promoção — Pop-up de cupom, com uma contagem regressiva se o prazo for real.
• Anunciar algo no site inteiro — Barra de anúncios, ou a versão rotativa para várias mensagens.
• Ajudar os visitantes a escolher — Quiz de recomendação.
• Gerar inscrições em eventos — Contagem regressiva com progresso do evento.
• Reter e recompensar — Barra ou Cartão de status por níveis.

Você nem precisa escolher um modelo

Tudo acima pressupõe que você navega por uma biblioteca e escolhe. Existe um caminho mais rápido: descrever o pop-up que você quer e deixar o agente de IA criá-lo. Com isso, o seu trabalho deixa de ser escolher um modelo e reestilizá-lo e passa a ser revisar algo já pronto.

Três coisas fazem disso mais do que um gerador de modelos:

• Ele estiliza a partir do seu site real. Antes de criar, o agente analisa suas páginas em busca de cores da marca, fontes, estilo de botões e o tom dos seus textos. O resultado parece o seu site, e não um modelo colado por cima — e nenhum visitante percebe que foi gerado.
• Palavras simples viram segmentação real. Diga “visitantes de primeira viagem no celular que chegaram à página de preços” e ele transforma isso em regras de segmentação reais, depois lê as regras compiladas para você conferir.
• Nada chega ao tráfego real. Tudo o que ele cria fica em staging — visível apenas para visitantes vindos de um IP de staging. Você pré-visualiza nas suas páginas reais e publica você mesmo.

Como isso funciona na prática

Você pode começar por qualquer uma das pontas. “Crie um pop-up de oferta de boas-vindas para visitantes de primeira viagem” entrega um pop-up pronto, com a cara da sua marca e com a segmentação já incluída. Ou escolha um modelo da biblioteca acima e deixe o agente adaptá-lo à sua marca mantendo a sua oferta. De qualquer forma, você ajusta conversando — “transforme em uma barra”, “teste outra cor”, “inclua também visitantes recorrentes” — sem abrir um painel de CSS.

Também funciona ao contrário: pergunte “o que devo melhorar esta semana?” e ele devolve oportunidades priorizadas em todas as suas páginas e campanhas, cada uma com uma ação de um toque. Em um site com algumas centenas de páginas, saber onde vale a pena adicionar um pop-up costuma ser a metade mais difícil.

O agente funciona dentro do painel do Personyze — veja o agente de personalização com IA — e os mesmos recursos podem ser acessados pelo Claude ou pelo ChatGPT, se você preferir trabalhar com um assistente que já usa. Mais detalhes no guia do agente de marketing com IA.

Prefere trabalhar pelo Claude? Instale o conector pelo diretório: Personyze no diretório do Claude.

Boas práticas para pop-ups

• Respeite o celular. O Google trata intersticiais intrusivos no celular como um problema de ranqueamento. Barras e notificações são mais seguras ali do que sobreposições.
• Dispare pela intenção, não só pelo tempo. Intenção de saída, profundidade de rolagem, valor do carrinho e visitas repetidas superam qualquer atraso arbitrário.
• Suprima depois da ação. Quem já se inscreveu nunca deveria ver o pop-up de inscrição de novo.
• Teste a oferta antes do design. Mudar o incentivo mexe muito mais na conversão do que mudar a cor do botão.
• Salve o resultado. Um pop-up que captura uma preferência e a grava no perfil do visitante continua rendendo depois que a campanha termina.

Modelos de pop-up: perguntas frequentes

Quantos pop-ups são demais?

Um pedido ativo por visita é uma regra segura. Uma barra persistente e um pop-up interativo podem conviver porque a barra não exige decisão, mas duas sobreposições concorrentes vão se anular.

Pop-ups prejudicam o SEO?

Só quando são intrusivos no celular. Barras, notificações e pop-ups disparados depois de um engajamento real não são penalizados. Mais sobre isso em personalização e SEO.

Posso editar esses modelos?

Sim — cada um é um ponto de partida. Texto, cores, layout, imagens, gatilhos, regras de segmentação e frequência são configuráveis, e o HTML e o CSS por trás continuam editáveis se você quiser ir além.

Qual é a diferença entre um pop-up e uma barra de anúncios?

Um pop-up se sobrepõe à página e interrompe a visita para pedir uma decisão. Uma barra reserva uma faixa na borda do viewport e não atrapalha, o que a torna adequada a mensagens contínuas, e não a pedidos pontuais.

A IA pode criar um pop-up para mim?

Sim. Descreva o que você quer e o agente de IA do Personyze cria, depois de analisar o seu site em busca de cores da marca, fontes, estilo de botões e tom, para que o resultado combine com as suas páginas. A segmentação em linguagem natural é compilada em regras reais e lida de volta para você, e tudo é criado em staging, então o tráfego real não é afetado até você publicar.

Como a Roleta de prêmios decide o que cada pessoa ganha?

Cada um dos quatro a oito segmentos tem um peso relativo de chance de ganhar, e os pesos são somados para calcular as chances reais — então pesos de 35, 25, 20, 12 e 5 viram essas porcentagens. Um segmento com um rótulo como Tente de novo e sem cupom funciona como fatia perdedora. O prêmio e o código vencedores são salvos no perfil do visitante para segmentação posterior.

Comece agora

Os 16 modelos podem ser configurados e segmentados sem código. Agende uma demo ou veja os planos.

Crie qualquer um deles só pedindo: o agente de personalização com IA.

Leitura relacionada

• Marketing de gamificação — as mecânicas por trás dos modelos interativos.
• Roletas de prêmios gire e ganhe — a roleta em detalhes.
• Barras de frete grátis e de níveis de fidelidade — a estratégia para o ticket médio.
• Pop-ups e banners — como funcionam a segmentação e a frequência.