Popup para site (aviso, cupom ou newsletter)
Escreva a mensagem e escolha quando o popup aparece. No celular ele fica na parte de baixo da tela, sem cobrir o conteúdo todo.
Como usarPopup que aparece na hora certa
Popup para site (aviso, cupom ou newsletter): para que serve
Um popup bem feito divulga um cupom, uma novidade ou a newsletter sem espantar o visitante. Escreva o título, o texto e o botão, e escolha quando ele aparece: depois de alguns segundos, ao rolar parte da página ou quando o mouse vai sair (no computador).
O código usa o elemento dialog (fecha com Esc, mantém o foco dentro do popup), guarda no navegador quando o visitante fechou para só repetir depois dos dias que você escolher e vira uma faixa na parte de baixo no celular, porque o Google considera intrusivos os popups que cobrem o conteúdo principal no celular. A animação respeita quem pediu menos movimento.
Como usar
- Escreva a mensagem e o botão.
- Escolha quando aparece e o intervalo de dias.
- Copie o código para o fim do body.
Quando usar
- Cupom de primeira compra.
- Aviso de novidade ou de horário especial.
- Convite para a newsletter ou o WhatsApp.
Perguntas frequentes
Popup prejudica o site no Google?
Pode prejudicar. O Google considera 'intersticiais intrusivos' os popups que cobrem o conteúdo principal, principalmente no celular e logo que a pessoa chega da busca, e isso conta contra a experiência da página. Por isso o código mostra uma faixa pequena no celular e deixa você atrasar o popup por tempo ou rolagem.
Como evitar que o popup apareça toda hora?
O código guarda no navegador do visitante (localStorage) quando ele fechou o popup e só mostra de novo depois do número de dias que você escolher. Quem clicou no botão não vê mais.
O que é a opção ao sair da página?
No computador, o popup aparece quando o mouse sobe em direção à barra de endereço ou às abas, sinal de que a pessoa vai embora. No celular não existe esse movimento, então o popup abre depois de alguns segundos.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.