Criar um Popup Lightbox

Como Criar um Popup Lightbox no Seu Site (Passo a Passo)

À procura de uma forma 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 de codificar um do zero é uma verdadeira dor de cabeça. Para começar, teria de saber o suficiente de HTML, CSS e Javascript para criar o popup juntamente com regras de ativação para quando o mostrar. Depois, teria de criar uma integração manual com o seu fornecedor de serviços de email. E, finalmente, teria de lidar com quaisquer questões de privacidade e segurança.

Boas notícias: existe uma forma muito mais simples.

Neste artigo, vamos mostrar-lhe como lançar um popup lightbox sem qualquer código em menos de 10 minutos.

Vamos a isso.

O que é um Popup Lightbox?

Um popup lightbox é um formulário de adesão que aparece com um efeito cinematográfico. Quando um lightbox aparece, desfoca o resto do site em segundo plano. Desta forma, todo o seu foco está no popup.

Exemplo de popup lightbox

Originalmente, o conceito de lightboxes vem da publicidade exterior:

Anúncio de popup lightbox

E depois, alguns programadores acharam que este era um efeito muito fixe e criaram uma biblioteca Javascript para recriar o mesmo efeito em ativos web. Mais tarde, surgiu a ideia de usar popups lightbox.

Porque Funcionam os Popups Lightbox

Os popups lightbox capturam mais emails do que um formulário de adesão de email tradicional.

Mas porque é que funcionam?

Vamos dar uma vista de olhos rápida às principais razões pelas quais os popups lightbox funcionam tão bem.

#1. Os Popups Lightbox Apresentam uma Chamada Clara para Ação

A maioria das pessoas acredita que é ótimo dar aos seus clientes muitas opções.

Mas isso não é realmente verdade.

Se procura conversões diretas, quer uma única e clara chamada para ação em que o seu público se possa concentrar. Desta forma, remove todas as distrações da mente do utilizador. E os popups lightbox fazem um ótimo trabalho a destacar a sua oferta principal e a fazer com que as pessoas se concentrem na sua chamada para ação.

Portanto, naturalmente, as taxas de conversão são muito boas.

#2. Os Popups Lightbox São Impossíveis de Ignorar

Os popups lightbox ocupam todo o ecrã e desfocam todo o resto. Por isso, é praticamente impossível ignorá-los.

Isto é especialmente verdade se forem animados:

efeitos de animação de popup

Claro, tem de garantir que os seus popups não são intrusivos. E pode fazê-lo personalizando quando ativar diferentes popups no seu site. Desde que o seu público não se sinta incomodado pela interrupção, pode convencê-los e convertê-los muito facilmente.

#3. Os Popups Lightbox Têm Gatilhos Personalizados

Não deve mostrar a mesma oferta a todos os seus visitantes web. Se estiver a gerir uma loja de comércio eletrónico, precisará de ofertas muito diferentes para clientes novos e recorrentes.

Para um novo cliente, pode ativar uma campanha de boas-vindas:

Popup de cupão

Mas para um cliente recorrente, pode querer enviar-lhe uma oferta diferente:

Popup de Cupão de Envolvimento

Note como os valores de desconto para ambas as ofertas são exatamente os mesmos. Mas a forma como a oferta é apresentada é drasticamente diferente. E isto é super importante porque os popups lightbox são construídos para efeitos teatrais. Por isso, uma abordagem mais personalizada trará resultados muito melhores, com certeza.

Poderia até personalizar a oferta com base nas preferências de conteúdo do seu utilizador. Se estiverem a ler um artigo sobre receitas para o jantar, faz mais sentido mostrar-lhes uma oferta relacionada com receitas para o jantar do que uma oferta de carros.

Popup de Saída Country Living

#4. Pop-ups Lightbox Podem Capturar Visitantes que Abandonam o Site

As Lightboxes são apenas um método de exibição do seu pop-up. Portanto, não há realmente nada que o impeça de personalizar o gatilho em qualquer medida que desejar. Recomendamos a criação de pop-ups lightbox de intenção de saída.

Popup de Intenção de Saída

Os pop-ups de intenção de saída são acionados quando os seus visitantes tentam sair do seu site. Como resultado, retém um grande número de visitantes que, de outra forma, teriam abandonado o seu site. Portanto, se está a sofrer de abandono do site, deve definitivamente criar um pop-up lightbox de intenção de saída.

Como Criar um Pop-up Lightbox

Agora que entende o que é um pop-up lightbox e porque gostaria de criar um, como cria um pop-up lightbox? Recomendamos o uso de OptinMonster para criar os seus pop-ups.

Página inicial OptinMonster

OptinMonster é o kit de ferramentas de conversão #1 do mundo e nós usámo-lo. O OptinMonster torna super simples a criação de pop-ups poderosos que convertem. E nunca terá de usar qualquer código.

Escrevemos até uma análise completa do OptinMonster.

Pode consultá-la ou começar já com a sua campanha. Tudo o que tem de fazer é inscrever-se no OptinMonster e seguir o resto deste artigo.

Passo #1: Criar uma Campanha

Vá ao seu painel OptinMonster e clique no botão Criar:

Criar uma nova campanha de popup

Selecione o tipo de campanha Lightbox Popup :

criar um popup lightbox

Em seguida, escolha um modelo de campanha. Pode escolher qualquer modelo que desejar, mas vamos optar pelo tipo de campanha Simple para este tutorial.

Selecionar tema da campanha de popup

Agora, dê um nome à sua campanha. Lembre-se, este nome de campanha é para si e provavelmente criará um monte destes pop-ups com diferentes opções de segmentação. Portanto, dê um nome significativo à campanha ou acabará por ficar muito confuso mais tarde.

Além disso, dependendo do seu plano, também pode usar o OptinMonster em vários sites. Portanto, selecione também o site onde deseja exibir a sua campanha.

Criar identidade da campanha

Pressione Start Building quando terminar.

Passo #2: Editar o Seu Pop-up Lightbox

Com o OptinMonster, terá um construtor de pop-ups visual de arrastar e soltar. Assim que terminar de criar a sua campanha, poderá editar até os mais ínfimos detalhes do seu pop-up. Comece por editar o título do seu pop-up:

Editar o seu título

A parte mais incrível aqui é que basta clicar em qualquer texto que pretenda editar e alterá-lo em linha. Não há necessidade de preencher um formulário ou editar qualquer código HTML no popup.

E depois, ajuste o texto e a aparência do seu botão para criar uma chamada clara para a ação:

Personalizar CTAs

Quando estiver satisfeito com a aparência do seu pop-up, pode passar para configurações mais avançadas.

Passo #3: Definir Regras de Exibição

As regras de exibição destinam-se a definir quando a sua campanha aparece no seu site e quem a vê.

Regras de exibição do popup

A nossa recomendação é que altere a condição do gatilho para intenção de saída:

Popup lightbox de intenção de saída

Clique em Next Step para escolher a Action. Aqui, recomendamos que defina Show the campaign view para Optin View, defina o show with MonsterEffect para qualquer animação de entrada que desejar e play sound effect para qualquer efeito sonoro para o seu pop-up.

Definições de Ação da Campanha

E depois, clique no botão Next Step. Pode ver a extensão total das suas configurações no separador Resumo.

Passo #4: Configurar a Sua Integração de Email

O próximo passo é configurar a sua integração de e-mail. Clique em Adicionar Nova Integração no separador Integrações e selecione o seu fornecedor de serviços de e-mail:

Integrações do OptinMonster

Recomendamos a utilização de Drip para o seu marketing por e-mail, caso ainda não tenha um fornecedor de serviços de e-mail.

Passo #5: Publicar o seu Popup Lightbox

Quando cria uma nova campanha, esta fica Pausada por defeito.

Aceda ao separador Publicar no menu superior para ver as Opções de Publicação. Em seguida, defina o estado para Publicar e selecione a plataforma do website:

Publicar campanha OptinMonster

Se tem um site WordPress, o plugin OptinMonster trata do resto da configuração automaticamente. O mesmo acontece para Shopify e BigCommerce. Para qualquer outro site, clique em Qualquer Site e cole o código de incorporação na secção head do seu website:

Incorporação Global

E está feito!

BÓNUS: Recolher Subscritores de Notificações Push do seu Popup

As notificações push ajudam a aumentar o tráfego do seu website e o envolvimento de forma automática. As notificações push web são uma forma eficaz de trazer de volta utilizadores que possam ter abandonado a sua sessão ou saído do website. Ajuda a re-envolver utilizadores notificando-os de 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 utilizadores a realizar ações específicas, como ler um artigo, concluir uma compra ou participar num evento.

Pode adaptar as notificações push com base nas preferências, comportamento e interesses dos utilizadores, para garantir que as mensagens são relevantes e valiosas para cada utilizador. Os utilizadores têm de concordar em receber notificações push web. Isto garante que as mensagens não são vistas como spam e que são enviadas com a permissão dos utilizadores.

A parte mais interessante é que pode recolher subscritores de notificações push do seu popup de e-mail. Assim, caso os visitantes do seu site não queiram fornecer o seu ID de e-mail, ainda pode fazê-los subscrever utilizando notificações push web.

E é nisso que vamos trabalhar.

Passo #1: Selecionar um Serviço de Notificações Push

Recomendamos a utilização de PushEngage para enviar notificações push web.

Serviços de notificações push PushEngage

Aqui está uma visão geral rápida do que obtém com PushEngage:

Pode começar gratuitamente, mas se estiver a levar 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ções push, deve consultar este guia sobre custos de notificações push.

E se estiver a gerir uma loja online, o PushEngage também o ajuda a aumentar as suas vendas, ajudando-o a criar notificações push automatizadas de comércio eletrónico.

Verá que o PushEngage é, sem dúvida, a melhor opção se quiser gerar tráfego, envolvimento e vendas para o seu negócio. E se tiver um orçamento limitado, pode sempre ser um pouco criativo com as suas notificações push.

Passo #2: Adicionar um Bloco HTML ao seu Popup

Primeiro, adicione um bloco HTML ao seu popup a partir da barra lateral no OptinMonster.

Adicionar bloco HTML no OptinMonster

É aqui que vamos adicionar o código para recolher subscritores 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 pode adicionar HTML:

Adicionar Código HTML ao Popup

Neste ponto, deverá ver um novo botão no seu popup que diz, “Receber Atualizações por Notificações Push em Vez Disso” logo abaixo do botão de subscrição de e-mail:

Adicionar botão de subscrição Push ao Popup

Claro, pode brincar com os estilos para torná-lo mais apelativo. Em seguida, vamos fazer com que o botão recolha subscritores de notificações push quando clicado.

Passo #3: Obter Código de Subscrição do PushEngage

Aceda à página inicial do PushEngage e clique no botão Começar:

PushEngage

Em seguida, selecione o plano gratuito para experimentar o PushEngage ou escolha um plano pago se leva a sério o crescimento do seu negócio. Os planos pagos vêm com mais opções de campanha e a capacidade de construir listas de subscritores ainda maiores.

No seu painel do PushEngage, vá a Configurações do Site » Detalhes do Site e clique no botão Clique Aqui para Instruções de Configuração. Em Qualquer Site, obterá o seu código de instalação:

Código de Instalação PushEngage Qualquer Site

AVISO: Precisa de copiar o código que obtém do seu painel. O código é único para cada utilizador do PushEngage. Não poderá copiar o código na imagem e recolher subscritores de notificações push.

Assim que tiver o código no seu painel do PushEngage, pegue no segundo script e adicione-lhe código extra. O seu código final deverá ser algo como isto:

<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>

Passo #4: Adicionar o seu Código de Subscrição ao Bloco HTML no seu Popup

Adicione este código ao bloco HTML no OptinMonster e estará pronto!

Adicionar Código de Subscrição ao Botão

Quando terminar, basta clicar nos botões Guardar e Publicar.

Se verificar o seu website, deverá agora ver o popup lightbox a recolher subscritores de e-mail e de notificações push:

Recolher subscritores Push do Popup

E assim, está a recolher subscritores push do seu popup. As notificações push vêm com os seus próprios modais de popup. Mas são um pouco difíceis de personalizar. Assim, pode criar popups bonitos usando o OptinMonster e depois usá-los como os seus popups de notificação push.

O que fazer depois de criar um Popup Lightbox

É tudo por esta vez, pessoal!

Informe-nos se este artigo ajudou. Criar popups no seu site pode ajudá-lo a converter o seu tráfego em subscritores de e-mail e leads de negócio genuínos. E recomendamos vivamente que comece a criar popups lightbox imediatamente.

E se procura uma forma acessível de aumentar o seu tráfego, recomendamos o uso de notificações push. As notificações push podem ajudá-lo a gerar mais tráfego recorrente e envolvimento no site. Também pode criar campanhas de notificações push automatizadas que geram vendas.

Não está convencido? Consulte estes recursos:

Recomendamos a utilização do PushEngage para criar as suas campanhas de notificações push. O PushEngage é o software de notificações push nº 1 do mundo. Portanto, se ainda não o fez, comece hoje mesmo com o PushEngage!

Adicionar um Comentário

Temos todo o gosto que tenha escolhido deixar um comentário. Por favor, tenha em mente que todos os comentários são moderados de acordo com a nossa política de privacidade, e todos os links são nofollow. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.

Interaja e Mantenha Visitantes Depois de Saírem do Seu Website

Aumente o valor de cada visita web com Notificações Push que são difíceis de ignorar.

  • Plano Gratuito para Sempre
  • Configuração Fácil
  • Suporte 5 Estrelas