Crie pop-ups em HTML - Guia Claspo

Seja você um designer de uma landing page, esteja otimizando caminhos de conversão ou apenas experimentando com funcionalidades de front-end, saber como criar um pop-up em HTML é uma habilidade valiosa. Neste guia, mostraremos duas abordagens práticas para adicionar um pop-up personalizado ao seu site — uma usando HTML, CSS e JavaScript, e outra com um construtor sem código que realiza a tarefa em minutos.

Se você gosta de codificar e ter controle total do design, você apreciará nosso passo-a-passo do método manual. E se preferir pular a complexidade técnica, apresentaremos o Claspo — uma ferramenta poderosa e sem código para criar pop-ups responsivos e de alta conversão em apenas alguns cliques.

Como um bônus, também compartilharemos dicas de especialistas sobre usabilidade de pop-ups na web, melhores práticas de design e como fazer seu pop-up parecer uma parte natural do seu site, não uma interrupção.

Como criar um pop-up em HTML e sem código

Nesta seção, exploraremos dois métodos principais: criar uma notificação pop-up em HTML, CSS e JavaScript e usar um template para simplificar o processo. A primeira opção ainda é usada devido às possibilidades infinitas de personalização. Enquanto isso, a segunda refere-se a soluções sem código que estão ganhando impulso e tornando-se um alívio para usuários não técnicos e aqueles que não podem arcar com um desenvolvedor sempre que precisam de um pop-up.

Habilidades avançadas em codificação permitem que você crie uma janela pop-up personalizada em HTML do zero e adapte sua aparência e comportamento no site para atender suas necessidades. Então, como você faz um pop-up em HTML se possui tais habilidades? Vamos percorrer o processo passo a passo.

Passo 1: Prepare sua imagem

Antes de começar a codificar, certifique-se de ter uma imagem de pop-up pronta para sua caixa de pop-up HTML (não pode fazer isso sozinho? Parabéns, você também precisa de um designer). A imagem deve estar hospedada em um servidor para que possa ser acessada via URL. Você pode fazer o upload da sua imagem para o servidor do seu site ou usar um serviço externo de hospedagem de imagens.

Passo 2: Estrutura do widget com um botão pop-up em HTML

O código HTML do pop-up forma a estrutura do seu widget. Aqui está uma explicação do código pop-up:

1. Declaração DOCTYPE: define o tipo de documento e a versão do HTML.

<!DOCTYPE html>
<html lang="pt">

2. Seção Head: contém meta-informações sobre o documento, como conjunto de caracteres e links para folhas de estilo e scripts.

<head>

<meta charset="UTF-8">

<title>Como Fazer um Popup</title>

<link rel="stylesheet" href="style.css">

<script defer src="app.js"></script>

</head>

3. Seção Body: contém o conteúdo principal do documento, incluindo o botão pop-up em HTML para acionar o pop-up e o próprio pop-up.

<body>

<div class="container">

Div do container: centraliza a caixa de pop-up em HTML e o botão.
Botão: aciona o pop-up ao clicar.
Div do popup: contém o conteúdo do pop-up, incluindo uma imagem, um título, uma mensagem e um botão de fechar.
Imagem: exibe a imagem que você preparou. O atributo src deve apontar para a URL onde sua imagem está hospedada.

Passo 3: Estilização de popup CSS

O design de popup CSS é usado para estilizar o widget e torná-lo visualmente atraente. Aqui está o que cada parte do código CSS faz:

1. Importar fonte: importa uma fonte personalizada do Google Fonts.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

2. Estilos globais: define estilos padrão para todos os elementos.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

3. Estilos do container: centraliza o conteúdo na página.

.container {

width: 100%;

4. Estilos do botão: estiliza o botão popup e adiciona uma animação de clique.

.btn {

padding: 10px 60px;

5. Estilos do popup: estiliza o popup e controla sua visibilidade e animação de entrada (como fade ou slide).

.popup {

width: 400px;

Dicas para fazer seu popup em HTML CSS se destacar

Quando você cria um popup em HTML, não se trata apenas de funcionalidade — é sobre impacto visual. Um widget bem elaborado pode atrair atenção instantaneamente e aumentar o engajamento se projetado com clareza e propósito. Veja como aprimorar seu popup usando estratégias comuns de design.

1. Use uma sobreposição com opacidade ajustada.
Uma sobreposição é uma camada semitransparente que fica atrás do popup. Ela escurece o resto da tela, permitindo que os usuários se concentrem na sua mensagem. Para conseguir isso, crie um div separado como um container de sobreposição para o popup e defina sua cor de fundo com rgba e um valor de opacidade apropriado (como 0.6) no seu CSS.

.popup-overlay {

position: fixed;

2. Mantenha a caixa de popup HTML centralizada e estilizada para impacto.
Quando você cria popups em HTML usando CSS, certifique-se de que seu container é estilizado com padding, largura máxima, sombra sutil e borda arredondada. Projete seu container de popup com um fundo branco ou brilhante, sombra sutil e generoso padding. Seja exibindo-o no topo da tela, no centro ou próximo a um menu, o contraste visual é essencial. Use um CTA forte e uma fonte chamativa (como Poppins ou Montserrat) para aumentar a visibilidade.

3. Adicione animações suaves com transições CSS.

As animações como fade-in ou slide-down podem elevar a experiência. Aplique uma classe com propriedades de transição e transform ao seu popup em HTML e CSS. Isso faz com que pareça mais interativo e moderno, mesmo sem efeitos pesados de JavaScript.

4. Responsivo por padrão.
Não se esqueça de garantir que seu popup funcione em todos os tamanhos de tela. Use consultas @media e larguras baseadas em porcentagem para seu contêiner. Isso torna seu popup com a abordagem HTML amigável para dispositivos móveis sem ferramentas extras.

Combinando a estrutura, HTML e CSS, e animações sutis, você pode criar um popup em HTML que não é apenas funcional, mas realmente atraente — projetado para se destacar e converter.

Passo 4: Funcionalidade em JavaScript

JavaScript é usado para dar vida ao popup em HTML controlando seu comportamento. Aqui está o que as funções básicas fazem:

1. Obter elemento do popup: seleciona o elemento de popup pelo seu ID.

let popup = document.getElementById('popup')

2. Função de abrir popup: adiciona uma classe para mostrar o popup e iniciar a animação.


function openPopup() {

popup.classList.add('open-popup')

}

3. Função de fechar popup: remove essa classe para esconder o popup e restaurar o estado padrão.


function closePopup() {

popup.classList.remove('open-popup')

}

Com JavaScript, você pode controlar quando e onde seu popup aparece — como em páginas específicas como a de preços, blog ou checkout. Isso garante que sua mensagem seja relevante e bem cronometrada, em vez de disruptiva.


if (window.location.pathname === "/pricing") {

popup.style.display = "block";

}

Os principais benefícios das soluções sem código para criar uma janela de popup em HTML são a economia de tempo e flexibilidade. Quando você tem um modelo pronto, não perde tempo preparando uma imagem de popup, e o editor de arrastar e soltar oferece a flexibilidade de personalizar o modelo de acordo com suas necessidades. Podemos adicionar economia de dinheiro a essa lista, já que você não precisa de um desenvolvedor e designer. Então, como adicionar um popup em HTML neste caso? Em geral, o processo se resume aos seguintes passos, tornando-o muito mais simples do que codificar um popup em HTML com CSS do zero:

Selecione um modelo pronto que atenda ao seu propósito (como um popup de inscrição, informador, evitar abandono de carrinho, etc.) das opções disponíveis na biblioteca.
Personalize-o de acordo com sua marca, design do site e requisitos específicos.
Visualize como seu popup finalizado parece nas versões móvel e desktop do site.
Configure as regras de exibição do popup (quando, onde, com que frequência e para quem ele é exibido, e assim por diante).
Incorpore o popup em seu site e publique-o.

Essa opção parece muito mais simples do que a anterior, certo? É assim se você escolher o Claspo. Afinal, você já veio até nós, então veja abaixo como criar um popup em HTML com CSS (usando nosso editor intuitivo, é claro!) e comece a trabalhar imediatamente após ler o artigo.

A primeira coisa a saber é que o Claspo, uma das melhores ferramentas de popup, oferece as mesmas opções abrangentes de personalização que o método que requer código. No entanto, ao contrário deste último, o Claspo é adequado para aqueles sem habilidades de programação e design. Ele torna a criação de um pop-up em HTML uma tarefa simples e rápida. Vamos ver como criar um pop-up usando nosso construtor sem esforço extra.

Passo 1. Cadastre-se e comece

Crie uma conta gratuita no Claspo e clique no botão "Novo Widget". Você tem a opção de criar um widget do zero ou usar a galeria de modelos. Para economizar o máximo de tempo, vamos optar pela segunda opção.

Passo_1

Passo 2. Escolha seu modelo

Nossa biblioteca de modelos contém mais de 1000 modelos prontos que cobrem diversos casos de uso. Você pode facilmente encontrar a combinação ideal usando os filtros no lado esquerdo da tela. Eles permitem que você escolha o caso de uso, layout (formulário de inscrição em pop-up em HTML, barra flutuante, caixa flutuante, widget de bloqueio de conteúdo, etc.), indústria e tema. Uma vez que você encontre um exemplo necessário, você irá para o editor.

Passo_2

Passo 3. Personalize seu modelo

Como este artigo é dedicado a como fazer um pop-up em HTML no seu site, escolhimos um pop-up como layout e um dos casos de uso mais populares para ele — coletar dados do usuário. Como você pode ver no exemplo abaixo, nosso modelo pode ser alterado além do reconhecimento.

Nesse caso, substituímos a imagem, primeiro criando uma usando IA, substituímos o texto de um formulário pop-up em HTML, removemos um campo de entrada, adicionamos uma checkbox para consentimento de processamento de dados para tornar o pop-up compatível com o GDPR e, por fim, modificamos o esquema de cores, incluindo a cor do botão de CTA. A única limitação é sua imagem, então você pode personalizar o modelo ainda mais.

Passo_3_2 Passo_3_1

Passo 4. Visualize seu pop-up

Depois de fazer todas as mudanças necessárias, você pode visualizar como seu pop-up aparece nas versões desktop e móvel do seu site. Para fazer isso, clique no ícone do dispositivo correspondente na parte superior direita da tela. Se você não estiver satisfeito com algo, pode sempre continuar editando.

Passo_4

Passo 5. Configure regras de exibição

Se você está se perguntando como criar um pop-up em HTML em um site sem incomodar os usuários, o Claspo tem a solução. Nossa plataforma oferece capacidades de segmentação avançadas e regras de exibição otimizadas para uma experiência de usuário perfeita, pré-definidas por padrão. Por exemplo, o pop-up de notificação em HTML aparece automaticamente uma vez por sessão após o usuário passar 20 segundos na página. Além disso, ele para automaticamente de ser exibido para aqueles que já deixaram seu e-mail, ajudando você a capturar efetivamente o público do seu site. Lógico, certo?

E o toque final — nós protegemos automaticamente os seus pop-ups de aparecerem simultaneamente e se sobresporem. Isso significa que você pode expandir com segurança sua estratégia de geração de leads com pop-ups, sem o medo de afastar os visitantes.

Ainda assim, você sempre pode personalizar as regras de exibição para atender às suas necessidades. Você pode facilmente alternar várias opções para direcionar o comportamento específico do usuário, como ativar triggers de intenção de saída. Diferente do método que exige código, tudo que você precisa é clicar em alguns botões em nossa seção “Gatilhos”, sem precisar se aprofundar em CSS complexo de pop-up. Isso significa que um pop-up da Claspo oferece mais controle e flexibilidade ao criar um pop-up usando nossas ferramentas intuitivas para coletar endereços de e-mail e outros dados valiosos.

Step_5_Rule_based

Passo 6. Integre a Claspo com a plataforma escolhida

Além da questão de como criar um pop-up em seu site, você precisa entender como sincronizar uma mensagem de pop-up em HTML com outras ferramentas de marketing. Mas na Claspo, essa tarefa também se resume a alguns cliques.

Integre a Claspo com um CRM, ESP ou CDP adequado a partir da lista suspensa. Nesse caso, todas as informações sobre os usuários coletadas usando nossos pop-ups serão transferidas instantaneamente para a plataforma selecionada para a subsequente segmentação e lançamento de suas campanhas automáticas.
Integre a Claspo com o Google Analytics. Isso lhe dará insights mais valiosos sobre como os usuários interagem com seus pop-ups e ajudará a otimizá-los para obter um desempenho melhor.

Step_6_Integration

Passo 7. Instale o seu pop-up

Uma vez que o seu pop-up estiver pronto, você receberá um código de script pronto que precisa incorporar em seu site. Você provavelmente está pensando: "Espere! Achei que estávamos falando sobre como criar um pop-up em um site sem habilidades de codificação de pop-up!" Isso é verdade! Na Claspo, você só precisa copiar e colar o código final seguindo uma de nossas instruções passo a passo. Você pode facilmente encontrá-las sob o seu código de script em nosso editor.

Ainda assim, se você não conseguir lidar com isso sozinho, sinta-se à vontade para entrar em contato com a nossa equipe de suporte, e nós iremos instalar a mensagem de pop-up em HTML em seu site totalmente grátis!

Step_7_1 Step_7_2

Passo 8. Analise e otimize

Seu pop-up foi criado e está ativo para aumentar suas conversões! Mas quão bem-sucedido ele é? Você pode sempre acompanhar indicadores-chave de desempenho de cada pop-up, como o número de visualizações únicas, o número de ações direcionadas, e a taxa de conversão diretamente na Claspo. Tem alguma ideia de como melhorar o desempenho do seu pop-up? Use nosso teste A/B para experimentar com qualquer elemento e verificar o que ressoa melhor com seu público.

A Claspo tem como objetivo simplificar sua tarefa e obter os resultados desejados mais rapidamente. Com isso em mente, nossa equipe de marketing criou um modelo de teste A/B. Ele contém as etapas críticas deste processo e permite que você coloque qualquer hipótese em prática. Obtenha-o gratuitamente e use-o para todos os testes A/B subsequentes (não apenas aqueles relacionados a pop-ups).

Como formatar um pop-up para ser amigável ao usuário

Aviso: a aparência ideal do seu pop-up só pode ser determinada através de testes A/B. No entanto, algumas regras básicas irão ajudá-lo a criar um design de pop-up que seja atraente para os usuários e eficaz para você.

A marca é essencial, então certifique-se de que todos os elementos de design do pop-up sejam consistentes com o esquema de cores e estilo da sua marca. Isso ajudará a reforçar a identidade da sua marca e fará o pop-up parecer uma parte natural do seu site.
Lembre-se do princípio da reciprocidade e ofereça algo em troca pelas informações de contato deles.
Reforce sua mensagem com uma imagem para aumentar a taxa de clique em até 25%. Use imagens de alta resolução para garantir que elas fiquem boas em todos os dispositivos. Imagens desfocadas ou pixeladas podem prejudicar o profissionalismo do seu pop-up.
Não adicione muitos campos de entrada. Estatísticas mostram que pop-ups com dois campos de entrada têm a maior taxa de conversão. Isso é suficiente para esclarecer os detalhes de contato e nome do cliente em potencial sem aborrecê-los com seu formulário de pop-up.
Certifique-se de que cada campo esteja claramente rotulado para que os usuários saibam exatamente quais informações são requeridas. Use texto de espaço reservado para fornecer exemplos ou instruções adicionais.
Desenhe para visibilidade e legibilidade. Use alto contraste entre o texto e o fundo para facilitar a leitura da sua mensagem. Escolha fontes que sejam fáceis de ler e evite fontes excessivamente decorativas que possam ser difíceis de decifrar.
Otimize para dispositivos móveis. Garanta que seu formulário de pop-up seja responsivo e fique bem em todas as tamanhos de tela, incluindo smartphones e tablets. Certifique-se de que botões e links sejam grandes o suficiente para serem facilmente tocados com um dedo.
Seja cuidadoso com widgets de tela cheia. O Norman Nielsen Group aconselha usar widgets que bloqueiem conteúdo apenas quando você precisar verificar a idade dos usuários, obter seu consentimento legal, etc. Em outros casos, eles podem tornar sua publicidade intrusiva e irritar os usuários.
Certifique-se de que haja um botão de fechar claramente visível para que os usuários possam facilmente dispensar o pop-up se não estiverem interessados. Permita que os usuários fechem o pop-up clicando fora dele ou pressionando a tecla de escape.

Dicas para ajustar a janela de pop-up

Mesmo o pop-up mais visualmente atraente pode ser intrusivo, afastando visitantes do seu site. Portanto, para responder à questão de como criar um pop-up que converta e não irrite, é vital discutir não apenas o design, mas também as regras de exibição.

Não bombardeie os usuários com pop-ups. 45,6% dos visitantes reclamamsobre muitos pop-ups em um site. Com o Claspo, você pode evitar isso de várias maneiras:

Use o intervalo silencioso pré-configurado para impedir o aparecimento simultâneo de pop-ups, exibindo-os uma vez a cada três minutos (o intervalo pode ser ajustado)
Escolha páginas com o contexto apropriado para um pop-up específico, em vez de apenas mostrar o mesmo pop-up em todo o site.
Personalize seus pop-ups, por exemplo, somente para visitantes de primeira viagem, usuários de uma geolocalização específica ou aqueles que chegaram ao site a partir de uma fonte de tráfego ou campanha específica

Don't_bombard_users_with_pop-ups

28,6% dos usuários odeiam a exibição imediata de pop-ups. Crie um pop-up que apareça quando o usuário tiver passado pelo menos alguns segundos no site. Dessa forma, você dá tempo a eles para se acomodarem e aprenderem um pouco mais sobre sua empresa antes de mostrar sua oferta. Isso melhora sua experiência de navegação e aumenta suas chances de conversão. Nossas regras de exibição predefinidas atrasam os pop-ups em 20 segundos, mas você sempre pode ajustar esse tempo.
Use um gatilho de rolagem para seu formulário de pop-up. Isso permite que você mostre um pop-up quando o usuário tiver rolado a página por uma certa porcentagem, trazendo mais conversões do que um gatilho de tempo. A principal razão é que seu pop-up aparece no contexto apropriado.

Por exemplo, se um usuário leu seu artigo no blog até certo ponto, convide-o a assinar sua newsletter para mais informações úteis. Um pop-up também pode aparecer quando o usuário chega à seção de preços, oferecendo um desconto na primeira compra ou uma avaliação gratuita.

Interrompa seu pop-up de forma oportuna. 20% dos usuários ficam irritados ao ver os mesmos formulários de pop-up toda vez que visitam um site. Cuide da experiência deles! Evite mostrar o pop-up para aqueles que já o fecharam uma ou mais vezes e para aqueles que já deixaram suas informações de contato. Isso é facilmente alcançável com o Claspo.

Stop_your_pop-up

Conclusão

Então, aí está! Você aprendeu como criar pop-ups em HTML e o caminho incrivelmente simples e sem código. Esperamos que você tenha visto o quanto o Claspo pode realmente simplificar sua vida e seus projetos de design web. Com o Claspo, você não precisa de nenhuma experiência prévia em codificação para obter seu primeiro widget para site. Nossa plataforma permite criar pop-ups que ficam ótimos em qualquer dispositivo, de desktops a smartphones, garantindo uma experiência perfeita para seus visitantes.

Seja qual for o seu objetivo, construir sua lista de e-mails com exemplos de pop-up de e-mail atraentes, coletar feedback, ou anunciar uma oferta especial, você pode literalmente ter pop-ups impressionantes em minutos. Assim que você descobrir casos de sucesso do uso de pop-ups, você naturalmente deseja criar um pop-up para o seu site também. É por isso que o convidamos a mergulhar de cabeça com nosso plano vitalício gratuito. Você pode começar a construir e ver resultados reais para o seu negócio sem gastar um centavo. É a maneira perfeita de usar HTML (sem realmente codificá-lo!) para impulsionar o desempenho do seu site. Por que não experimentar e ver como é fácil criar widgets impactantes para o seu site hoje?

Como criar um pop-up em HTML para o seu site