Os popups são ferramentas comuns e que fazem parte da estratégia de sites, lojas e blogs para ganhar a atenção de seus visitantes. Muitas vezes informando sobre promoções, posts destacados e ainda – um dos usos mais recomendados – para capturar assinantes e assim, e-mails.
Se você está precisando trabalhar com popups para aumentar a sua lista de contatos, quer algo prático, rápido e de qualidade, o CanalWP trouxe a solução certa para você. Neste post você vai aprender a criar e configurar um popup no WordPress com PopupAlly.
Como Criar um Popup no WordPress
PopupAlly
O plugin PopupAlly soma hoje um número de mais de 10 mil usuários ativos e oferece uma forma bastante rápida de trabalhar com popups para capturar contatos. Ele possui 2 versões, sendo uma Free e outra PRO. A versão gratuita (Free) permite criar e configurar até 2 popups – vamos trabalhar com essa versão neste tutorial.
As vantagens do PopupAlly são muitas. Ele é Mobile friendly, Responsivo, compatível com qualquer tema e ainda, compatível com a maioria dos serviços de e-mail marketing – como: MailChimp, AWeber, ConvertKit, Infusionsoft, Ontraport, ActiveCampaign, GetResponse, ConstantContact, CampaignMonitor, TotalSend, Emma, iContact, MailerLite, MadMimi, MailPoet, FeedBlitz e com qualquer outro sistema que forneçam o código de ativação HTML.
Veja Como Instalar e Ativar um Plugin no WordPress para não ter dúvidas de como adicionar o PopupAlly ao seu WordPress.
Criando e Configurando Popups
Assim que o plugin PopupAlly for instalado e ativado em seu WordPress, um novo item de menu será adicionado à sua Dashboard. Clique em PopupAlly para acessar as configurações.
Para quem seja possível criar popups com o PopupAlly é necessário que primeiramente o plugin esteja integrado com uma plataforma ou serviço de e-mail marketing. Como muitas pessoas começam com MailChimp, irei demonstrar a integração com esse sistema. É muito simples!
O que o PopupAlly faz é integrar o formulário do MailChimp – permitindo customizá-lo diretamente em seu site WordPress -, dentro dos seus popups. Então, é preciso que tenha ou crie uma lista contatos no MailChimp para receber os dados dos visitantes que irão preencher o formulário de captura. Para isso, recomendo que você confira o nosso Guia Completo de Como Usar MailChimp no WordPress, onde você vai encontrar um guia de como pode criar suas listas de contato dentro da plataforma.
Recomendo que você mantenha 2 abas abertas em seu navegador, uma com Dashboard do seu site aberta na página de configurações do PopupAlly e outra, para acessar o MailChimp e realizar os passos que mostro a seguir.
Integração com MailChimp
Faça login em sua conta MailChimp e acesse as suas listas de contato (menu Lists).
Nas opções da lista que deseja integrar ao PopupAlly, escolha Signup forms.
Depois, selecione a opção General Forms clicando no botão Select.
Aqui você deve adicionar ou deletar campos do formulário de captura que irá utilizar no popup que vamos criar com o PopupAlly. Para esse tutorial vou utilizar apenas 2 campos no meu formulário: nome e e-mail.
Com os campos básicos do formulário devidamente adicionados, volte para o menu Lists. Acesse novamente Signup forms nas opções da lista que será integrada ao PopupAlly. Então, na página que será exibida, escolha a opção Embedded forms.
Na página de Embedded forms você terá uma pré-visualização do formulário de contato, com os campos que acabou de configurar.
Então Copie o código exibido e volte para a Dashboard do seu site WordPress.
Na página de configuração do plugin PopupAlly que acessamos antes, clique na opção Style Settings. Escolha um popup para adicionar o código e clique na aba para que o local de inserção do código se expanda.
Cole o código que você acabou de copiar no MailChimp para a área Sign Up HTML.
Assim que o código for adicionado ao plugin, você perceberá que os campos de nome e e-mail serão automaticamente reconhecidos.
Estilizando seu Popup
Ainda dentro da aba Style Settings – onde você acaba de colar o código que copiou do MailChimp, você pode escolher entre os 2 temas disponíveis que o PopupAlly oferece na versão gratuita do plugin.
A Tried-and-true é a versão mais utilizada para popups quadrados.
A Express yourself é uma versão mais “fininha” para quem quer trabalhar com o estilo horizontal.
As opções que você encontrará depois em Customization são para que você customize mais detalhadamente seu popup e o formulário de captura dentro dele.
Você pode escolher cor de background ou uma imagem. Pode também definir as dimensões do popup, textos, fontes, cores e outras várias opções.
Depois de definir a parte visual do seu popup, clique no botão Save Changes para armazenar todas as suas customizações.
Configurações Gerais
Ainda na página de configurações do PopupAlly, podemos definir as Configurações Gerais para o funcionamento do seu popup.
Na aba Display Settings você deve definir qual será o tipo do seu popup.
Você pode selecionar as 2 opções ou apenas 1, elas são:
- Exit-intent popup – Aquele que é exibido quando o visitante tem a intenção de sair do site;
- – É exibido após alguns segundos que o visitante acessa o site.
Ainda existe a Embedded opt-in, mas essa opção não funciona como um popup. Ela integra o formulário configurado em suas páginas e posts, como parte da página.
Para Time-delayed é necessário informar após quantos segundos o popup deve ser exibido. Se adicionar 0 será exibido imediatamente na abertura do site e se -1 você desativa a exibição do mesmo.
Rolando essa mesma página mais para baixo, você encontra a opção de escolher em quais páginas e posts o popup deve ser exibido, ou se deseja mostrar em todo o site.
Logo abaixo você vai encontrar a área com o título How to stop showing this popup. Aqui você deve definir uma regra de dias para o popup. Isso é imprescindível para que seu popup não comece a chatear seus visitantes, sendo exibido todas as vezes que eles voltam ao seu site.
- Defina um número de dias para controlar a frequência com que o mesmo visitante veja o popup novamente. Exemplo: 7 dias;
- Defina como 0 para que o popup seja exibido após o navegador ser fechado e aberto novamente;
- Deixe como -1 apenas quando estiver testando o funcionamento do popup no WordPress, pois essa opção mostrará o popup sempre que a página for carregada.
O PopupAlly permite que você defina também uma página de agradecimento, para a qual seus visitantes, ao preencherem o formulário no popup, podem ser redirecionados.
Basta marcar o checkbox e escolher uma das páginas.
Se você quiser integrar a página de agradecimentos diretamente com o MailChimp ou com qualquer outro serviço de e-mail, isso também é possível. Você precisa apenas acessar as configurações do formulário de captura e lá definir a página de agradecimento que já existe em seu site!
Observação: o PopupAlly fornece um código no final da área para redirecionar à página de agradecimento. Você deve utilizá-lo apenas se trabalha com a plataforma LeadPages.
Finalizando todas as configurações e customizações para o seu popup com PopupAlly, clique no botão Save Changes para que nada seja perdido.
Agora, acesse seu site e teste as configurações que acabou de realizar.
Conclusão
O plugin PopupAlly é a ferramenta que pequenos e médios sites WordPress necessitam para iniciar o trabalho com popups. Ele tem um customizador para trabalhar layout, bastante amigável e fácil de configurar, bem como traz tipos diferentes de popup – onde você pode escolher quando a exibição do mesmo deve acontecer.
PopupAlly é ótimo para realizar o “casamento” entre popup e formulário de captura, pois traz toda a base que você precisa, para que em poucos minutos tudo esteja configurado e funcionando. Faça seus testes e comece a usufruir da versatilidade e qualidade desse plugin.
Se você gostou desse artigo considere compartilhar nas redes sociais. Siga-nos nas redes sociais para acompanhar mais artigos como esse. Se de alguma forma este artigo lhe foi útil deixa seu comentário abaixo para podermos saber a sua opinião.
Ferramentas WordPress Veja Mais Ferramentas
PixelYourSite PRO
Q2W3 Fixed Widget
RafflePress
Parabéns me ajudou com o Lead lovers
Parabéns pelo post !! muito bom !!!
Muita boa explicação ! muito obrigado por compartilhar seu conhecimentos!
abraço .
Excelente, me ajudou bastante. Já apliquei no meu blog. Muiiiiito obrigada
Muito bom! Estou amando seu site! Parabéns!!
Excelente esse artigo! Muito obrigada e sucesso!
Olá Giovanna,
Concordo com você!
Obrigado por deixar sua opinião.
Abraço.
Obrigada por compartilhar essa dica. Já vou fazer o teste no meu blog.
Geralmente eu vejo por aí um monte de ferramentas para inserir popup no wordpress, mas as melhores sempre são pagas.
Eu tenho alguns popups em alguns sites mas sempre uso com MUITA MODERAÇÃO. Vejo que ultimamente tem sido abusiva a colocação deles nos blogs, juntamente com uma avalanche de blocos de anúncios.
Obrigado por compartilhar seu conhecimento.
Muito bacana!!! Estava a procure desse tipo de plugin! Valew Mesmo
Bom dia, é possível configurar para que apareça em todas as páginas todo o tempo?
Eu segui a configuração mas ele aparece uma única vez por usuário,
Obrigado
Tbm tenho essa dúvida
Olá Alan,
Você pode configurar o plugin para isso em “Show popup every”.
Colocando -1, você exibe o popup toda vez que a página for visitada.
Colocando 0, você exibe apenas quando o visitante fechar o browser, abrir e acessar sua página novamente.
Espero ter ajudado.
Abraço!
Oi! Mas esse plugin permite colocar formulário para a pessoa colocar seu email para minha newsletter no MailChimp?
Olá Ana,
Esse plugin permite que você adicione qualquer código HTML dentro do popup.
O Mailchimp lhe dá um código para o formulário de captura que você pode inserir na opção de HTML.
Abraço.
Mano, aqui no seu site em alguma dica para assim que o usuário visitar o site automaticamente exiba um lightbox com um vídeo do youtube? Entrei algumas dicas na web, porém, antes o usuário tem que clicar na opção (Seja uma imagem ou texto.) Porém, preciso que o lightbox seja apresentado automaticamente! Pode me ajudar? Um exemplo?
URL: http://www.suamusica.com.br/
Após segundos é exibido uma imagem “num” efeito lightbox. Qual o procedimento para adicionar a mesma função em meu site? Obs: Uso o WordPress para operar o meu site. Abraço!
Olá Ronildo,
Dá uma olhada nesses plugins para ver se atende o que você precisa:
https://wordpress.org/plugins/wp-video-lightbox/
https://br.wordpress.org/plugins/video-popup/
Abraço.
Boa tarde, ativei o plugin, configurei tudo, mas assim que ativo o plugin, o site não carrega. Desativo o plugin, atualizo a página, o site volta carregado. O que fazer? Muito obrigado!
Olá Àquila,
A maioria dos plugins gratuitos por questões de leis internacionais tem um limite minimo de 1 dia para exibição do mesmo popup como padrão.
No entanto, conheço esse plugin gratuito com essa capacidade https://wordpress.org/plugins/ultimate-popup-free/
Vou ver se atualizo esse artigo com esse plugin, pois ele é excelente.
Me dê um retorno se deu certo para você.
Abraço.
Olá, segui estes passos mas não aparece nada no meu site, pode me ajudar?
Olá Michele,
Obrigado por entrar em contato.
Com certeza, você chegou adicionar algum conteúdo dentro da opção HTML?
Se desejar posso verificar sua configuração, mas preciso que entre em contato comigo via email pela página de contato aqui do blog.
Fico no aguardo.
Abraço.
Realmente muito simples de configurar! Parabéns a todos pelo excelente trabalho :D
Existe a possibilidade de configurar esse ou outro plugin de acordo com a página que está acessando. Exemplo: Tenho um site com assuntos diversos e gostaria de montar um lista de acordo com interesse do assinante, então em cada página aparecer o seu popup personalizado?
Com esse plugin infelizmente não. Você pode utilizar o SumoMe para essa função. Nós temos um artigo sobre o plugin aqui => https://www.canalwp.com/tutorial-wordpress/lista-de-email-e-redes-sociais-com-sumome/.
Abraço.
valew cara. Resolveu meu problema
Existe sim. Você pode configurar Campanhas para uma lista definida que só aparecem em certas páginas. É um dos melhores plugins para realizar esse tipo de conversão.
Abraço.
Oi Sendy
Com este plugin eu consigo fazer aparecer igual o que aparece na página do seu post?
Estou precisando de algo como o que está aqui.
Olá Lepe12,
Para utilizar igual ao do nosso site você precisa utilizar esse plugin => https://www.canalwp.com/tutorial-wordpress/lista-de-email-e-redes-sociais-com-sumome/.
Abraço.
Obrigada!
Tem como configurar esse popup para não aparecer logo de cara na home? só depois de um certo tempo ou caso o usuário passe para uma outra página?
Olá Topquadros,
Infelizmente com esse plugin não é possível. Existem outros plugins que permite esse tipo de configuração, mas são pagos. SumoMe é um exemplo, temos tutorial dele aqui basta pesquisar.
Abraço.
Obrigado Gabriel !!
Muito bom, obrigado .
Como faço para o popup abrir e depois de 10 segundos fechar automaticamente?
Inseri uma imagem no plugin, com caminho para uma outra pagina. Salvei, mas não apareceu. É instantâneo ou demora um tempo pra funcionar?
Deveria aparecer sem problemas. Verifique se o link e o código que você adicionou está correto. Deve ser algo mais ou menos assim:
http://pastebin.com/YFUjBD3k
Abraço.
Boa tarde, Paulo.
Você pode adicionar HTML na seção POPUP CONTENT nas configurações do plugin.
Era essa sua dúvida?
Abraço!
Boa Tarde
Só uma duvida onde vou inserir meu codigo html, com esse plugin?
Boa tarde, Paulo.
Você pode adicionar HTML na seção POPUP CONTENT nas configurações do plugin. Era essa sua dúvida?
Abraço.
OLA, BOA TARDE,
Consigo gerar esses codigo html com o dreamweaver e depois colar o codigo na caixa?
outra duvida consigo inserir botões de like do facebook nesse codigo?como? obrigado
Você pode gerar o código html com o dreamweaver sem problemas e colar o código na caixa.
Pode inserir o botão de like do facebook utilizando o código e instruções gerados nessa página:
https://developers.facebook.com/docs/plugins/like-button?locale=pt_BR
Abraço.
Como procurei e testei popup e antes de achar seu artigo, tinha achado um outro muito legal!! nome PopupAlly fica bem legal pros WP vale dar uma olhada!
Olá Eduardo,
Obrigado pela sua opinião. Acredito que seja sempre válido conhecer diversas opções diferentes para que possamos escolher a que melhor se encaixa em nossas necessidades.
Abraço!
Como faço para o popup abrir e depois de 10 segundos fechar automaticamente?
Deveria aparecer sem problemas. Verifique se o link e o código que você adicionou está correto. Deve ser algo mais ou menos assim:
http://pastebin.com/YFUjBD3k
Abraço.
Boa Tarde
Só uma duvida onde vou inserir meu codigo html, com esse plugin?
Boa tarde, Paulo.
Você pode adicionar HTML na seção POPUP CONTENT nas configurações do plugin. Era essa sua dúvida?
Abraço.
OLA, BOA TARDE,
Consigo gerar esses codigo html com o dreamweaver e depois colar o codigo na caixa?
outra duvida consigo inserir botões de like do facebook nesse codigo?como? obrigado
Você pode gerar o código html com o dreamweaver sem problemas e colar o código na caixa.
Pode inserir o botão de like do facebook utilizando o código e instruções gerados nessa página:
https://developers.facebook.com/docs/plugins/like-button?locale=pt_BR
Abraço.
Como procurei e testei popup e antes de achar seu artigo, tinha achado um outro muito legal!! nome PopupAlly fica bem legal pros WP vale dar uma olhada!
Olá Eduardo,
Obrigado pela sua opinião. Acredito que seja sempre válido conhecer diversas opções diferentes para que possamos a que melhor se encaixa em nossas necessidades.
Abraço!