Procurando uma maneira de criar um popup lightbox para o seu site?
Um popup lightbox pode ser incrivelmente eficaz para capturar leads. Eles são projetados para convencer e converter.
Mas ter que codificar um do zero é uma verdadeira dor de cabeça. Para começar, você precisaria saber o suficiente de HTML, CSS e Javascript para criar o popup junto com regras de gatilho para quando mostrá-lo. Em seguida, você teria que criar uma integração manual com seu provedor de serviços de e-mail. E, finalmente, você teria que lidar com quaisquer problemas de privacidade e segurança.
Boas notícias: existe uma maneira muito mais simples.
Neste artigo, vamos mostrar como lançar um popup lightbox sem nenhum código em menos de 10 minutos.
Vamos lá.
O que é um Popup Lightbox?
Um popup lightbox é um formulário de opt-in que aparece com um efeito cinematográfico. Quando um lightbox aparece, ele desfoca o resto do site em segundo plano. Dessa forma, todo o seu foco fica no popup.
Originalmente, o conceito de lightboxes vem da publicidade externa:
E então, alguns desenvolvedores pensaram que este era um efeito muito legal e criaram uma biblioteca Javascript para recriar o mesmo efeito em ativos da web. Mais tarde, a ideia de usar popups lightbox entrou em jogo.
Por que os Popups Lightbox Funcionam
Popups lightbox capturam mais e-mails do que um formulário de opt-in de e-mail tradicional.
Mas por que eles funcionam?
Vamos dar uma olhada rápida nas principais razões pelas quais os popups lightbox funcionam tão bem.
#1. Popups Lightbox Apresentam uma Chamada Clara para Ação
A maioria das pessoas acredita que é ótimo dar muitas opções aos seus clientes.
Mas isso não é realmente verdade.
Se você está procurando por conversões diretas, você quer uma única e clara chamada para ação na qual seu público possa se concentrar. Dessa forma, você remove todas as distrações da mente do usuário. E os popups lightbox fazem um ótimo trabalho em destacar sua oferta principal e fazer com que as pessoas se concentrem em sua chamada para ação.
Então, naturalmente, as taxas de conversão são muito boas.
#2. Popups Lightbox São Impossíveis de Ignorar
Popups lightbox ocupam a tela inteira e desfocam todo o resto. Portanto, é praticamente impossível ignorá-los.
Isso é especialmente verdadeiro se eles forem animados:
Claro, você tem que garantir que seus popups não sejam intrusivos. E você pode fazer isso personalizando quando acionar diferentes popups em seu site. Desde que seu público não seja incomodado pela interrupção, você pode convencê-los e convertê-los muito facilmente.
#3. Popups Lightbox Têm Gatilhos Personalizados
Você não deve mostrar a mesma oferta para todos os seus visitantes da web. Se você tem uma loja de comércio eletrônico, precisará de ofertas muito diferentes para clientes novos e recorrentes.
Para um novo cliente, você pode acionar uma campanha de boas-vindas:
Mas para um cliente recorrente, você pode querer enviar uma oferta diferente:
Note como os valores dos descontos para ambas as ofertas são exatamente os mesmos. Mas a maneira como a oferta é apresentada é drasticamente diferente. E isso é super importante porque pop-ups de lightbox são construídos para efeitos teatrais. Portanto, uma abordagem mais personalizada trará resultados muito melhores com certeza.
Você pode até personalizar a oferta com base nas preferências de conteúdo do seu usuário. Se eles estiverem lendo um artigo sobre receitas para o jantar, faz mais sentido mostrar a eles uma oferta relacionada a receitas para o jantar em vez de uma oferta de carros.
#4. Pop-ups de Lightbox Podem Capturar Visitantes que Estão Saindo
Lightboxes são apenas um método de exibição do seu pop-up. Portanto, não há realmente nada impedindo você de personalizar o gatilho em qualquer extensão que desejar. Recomendamos a criação de pop-ups de lightbox com intenção de saída.
Pop-ups de intenção de saída são acionados quando seus visitantes tentam sair do seu site. Como resultado, você retém um grande número de visitantes que, de outra forma, teriam abandonado seu site. Portanto, se você está sofrendo com abandono de site, você deve definitivamente criar um pop-up de lightbox com intenção de saída.
Como Criar um Pop-up de Lightbox
Agora que você entende o que é um pop-up de lightbox e por que você gostaria de criar um, como você cria um pop-up de lightbox? Recomendamos o uso de OptinMonster para criar seus pop-ups.
OptinMonster é o kit de ferramentas de conversão nº 1 do mundo e nós o usamos. O OptinMonster torna super simples a criação de pop-ups poderosos que convertem. E você nunca precisará usar nenhum código.
Nós até escrevemos uma análise completa do OptinMonster.
Você pode conferir isso, ou começar sua campanha agora mesmo. Tudo o que você precisa fazer é se inscrever no OptinMonster e seguir o restante deste artigo.
Etapa nº 1: Crie uma Campanha
Vá para o seu painel do OptinMonster e clique no botão Criar:
Selecione o tipo de campanha Lightbox Popup:
Em seguida, escolha um modelo de campanha. Você pode escolher qualquer modelo que desejar, mas estamos usando o tipo de campanha Simples para este tutorial.
Agora, dê um nome à sua campanha. Lembre-se, este nome de campanha é para você e você provavelmente criará um monte desses pop-ups com diferentes opções de segmentação. Portanto, dê um nome significativo à campanha ou você acabará realmente confuso mais tarde.
Além disso, dependendo do seu plano, você também pode usar o OptinMonster em vários sites. Portanto, selecione o site onde você deseja exibir sua campanha também.
Pressione Começar a Construir quando terminar.
Etapa nº 2: Edite seu Pop-up de Lightbox
Com o OptinMonster, você terá um construtor visual de pop-ups de arrastar e soltar. Depois de criar sua campanha, você poderá editar até os menores detalhes do seu pop-up. Comece editando o título do seu pop-up:
A parte mais incrível aqui é que você simplesmente clica em qualquer texto que deseja editar e o altera diretamente. Não há necessidade de preencher um formulário ou editar qualquer código HTML no pop-up.
E então, ajuste o texto e a aparência do seu botão para criar uma chamada clara para ação:
Quando estiver satisfeito com a aparência do seu pop-up, você pode passar para configurações mais avançadas.
Etapa nº 3: Definir Regras de Exibição
As regras de exibição servem para definir quando sua campanha aparece em seu site e quem a vê.
Nossa recomendação é que você altere a condição de gatilho para intenção de saída:
Clique em Próxima Etapa para escolher a Ação. Aqui, recomendamos que você defina Mostrar a visualização da campanha para Visualização de Optin, defina mostrar com MonsterEffect para qualquer animação de entrada que você goste e reproduzir som para qualquer efeito sonoro para o seu pop-up.
E então, clique no botão Próxima Etapa. Você pode ver a extensão total das suas configurações na guia Resumo.
Etapa nº 4: Configurar Sua Integração de E-mail
A próxima etapa é configurar sua integração de e-mail. Clique em Adicionar Nova Integração na guia Integrações e selecione seu provedor de serviços de e-mail:
Recomendamos o uso de Drip para seu marketing por e-mail, caso você ainda não tenha um provedor de serviços de e-mail.
Etapa nº 5: Publicar Seu Pop-up Lightbox
Ao criar uma nova campanha, ela fica Pausada por padrão.
Vá para a guia Publicar no menu superior para ver as Opções de Publicação. Em seguida, defina o status como Publicar e selecione a plataforma do site:
Se você tem um site WordPress, o plugin OptinMonster cuida do restante da configuração automaticamente. O mesmo vale para Shopify e BigCommerce. Para qualquer outro site, clique em Qualquer Site e cole o código de incorporação no cabeçalho do seu site:
E pronto!
BÔNUS: Colete Assinantes de Notificações Push do Seu Pop-up
As notificações push ajudam você a aumentar o tráfego do seu site e o engajamento automaticamente. As notificações push da web são uma maneira eficaz de trazer de volta usuários que podem ter abandonado sua sessão ou saído do site. Isso ajuda a reengajar usuários notificando-os sobre novo conteúdo, ofertas ou eventos.
As notificações push também incluem mensagens claras e acionáveis e botões de chamada para ação, incentivando os usuários a tomar ações específicas, como ler um artigo, concluir uma compra ou participar de um evento.
Você pode personalizar as notificações push com base nas preferências, comportamento e interesses dos usuários, para garantir que as mensagens sejam relevantes e valiosas para cada usuário. Os usuários precisam concordar em receber notificações push da web. Isso garante que as mensagens não sejam vistas como spam e que sejam enviadas com a permissão dos usuários.
A parte mais legal é que você pode coletar inscritos de notificações push do seu popup de e-mail. Assim, caso os visitantes do seu site não queiram fornecer seu ID de e-mail, você ainda pode fazer com que eles se inscrevam usando notificações push da web.
E é nisso que vamos trabalhar.
Passo nº 1: Selecione um Serviço de Notificação Push
Recomendamos o uso do PushEngage para enviar notificações push da web.
Aqui está uma visão geral rápida do que você obtém com o PushEngage:
- Campanhas automatizadas de alta conversão
- Múltiplas opções de segmentação e agendamento de campanhas
- Rastreamento de metas e análises avançadas
- Inteligente teste A/B
- Um Gerente de Sucesso Dedicado
Você pode começar gratuitamente, mas se você leva a sério o crescimento do seu negócio, deve comprar um plano pago. Além disso, antes de comprar qualquer serviço de notificação push, você deve conferir este guia sobre custos de notificação push.
E se você tem uma loja online, o PushEngage também ajuda a aumentar suas vendas, auxiliando na criação de notificações push automatizadas de e-commerce.
Você verá que o PushEngage é, sem dúvida, a melhor opção se você deseja aumentar o tráfego, o engajamento e as vendas do seu negócio. E se você está com orçamento limitado, pode sempre ser um pouco criativo com suas notificações push.
Etapa nº 2: Adicione um Bloco HTML ao Seu Popup
Primeiro, adicione um bloco HTML ao seu pop-up na barra lateral do OptinMonster.
É aqui que vamos adicionar o código para coletar assinantes de notificações push. Primeiro, cole o seguinte código para criar um botão clicável:
<button onclick="subscribeOnClickButton()" style="border: none; width: 100%; padding-left: 15%; padding-right:15%; text-align: center; display: inline-block; color: white;">Get Updates via Push Notifications Instead</button>Cole o código onde diz que você pode adicionar HTML:
Neste ponto, você deve ver um novo botão no seu popup dizendo "Receber atualizações por notificações push em vez disso" logo abaixo do botão de inscrição por e-mail:
Claro, você pode brincar com os estilos para torná-lo mais atraente. Em seguida, vamos fazer com que o botão colete assinantes de notificações push quando clicado.
Etapa nº 3: Obtenha o Código de Inscrição do PushEngage
Acesse a página inicial do PushEngage e clique no botão Começar :
Em seguida, você vai querer selecionar o plano gratuito para experimentar o PushEngage ou escolher um plano pago se você estiver sério sobre o crescimento do seu negócio. Os planos pagos vêm com mais opções de campanha e a capacidade de construir listas de assinantes ainda maiores.
No seu painel do PushEngage, vá para Configurações do Site » Detalhes do Site e clique no botão Clique Aqui para Instruções de Configuração . Em Qualquer Site, você obterá seu código de instalação:
AVISO: Você precisa copiar o código que obtém do seu painel. O código é exclusivo para cada usuário do PushEngage. Você não poderá copiar o código na imagem e coletar assinantes de notificações push.
Uma vez que você tenha o código em seu painel PushEngage, pegue o segundo script e adicione um código extra a ele. Seu código final deve ser algo assim:
<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
}]);
}
</script>Etapa nº 4: Adicione seu Código de Inscrição ao Bloco HTML no seu Popup
Adicione este código ao bloco HTML no OptinMonster e pronto!
Quando terminar, basta clicar nos botões Salvar e Publicar.
Se você verificar seu site, agora deverá ver o popup lightbox coletando inscritos de e-mail e de notificações push:
E pronto, você está coletando inscritos push do seu popup. As notificações push vêm com seus próprios modais de popup. Mas eles são um pouco difíceis de personalizar. Portanto, você pode criar popups bonitos usando o OptinMonster e usá-los como seus popups de notificação push.
O que fazer depois de criar um popup lightbox
É tudo por hoje, pessoal!
Informe-nos se este artigo ajudou. Criar popups em seu site pode ajudar a converter seu tráfego em inscritos de e-mail e leads de negócios genuínos. E recomendamos fortemente que você comece a criar popups lightbox imediatamente.
E se você estiver procurando uma maneira acessível de aumentar seu tráfego, recomendamos o uso de notificações push. As notificações push podem ajudar a gerar mais tráfego recorrente e engajamento no site. Você também pode criar campanhas automatizadas de notificações push que geram vendas.
Ainda não está convencido? Confira estes recursos:
- 7 Estratégias Inteligentes para Aumentar o Engajamento do Cliente
- Notificações Push são Eficazes? 7 Estatísticas + 3 Dicas de Especialistas
- Como Configurar Notificações Push de Carrinho Abandonado (Tutorial Fácil)
Recomendamos o uso do PushEngage para criar suas campanhas de notificações push. O PushEngage é o software de notificações push nº 1 do mundo. Portanto, se você ainda não o fez, comece com o PushEngage hoje mesmo!
