Como criar um pop-up lightbox em seu site (passo a passo)

Procurando uma maneira de criar um pop-up lightbox para o seu site?

Um pop-up 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. Por um lado, você precisa saber HTML, CSS e Javascript o suficiente para criar o pop-up junto com as 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: há uma maneira muito mais simples.

Neste artigo, mostraremos como iniciar um pop-up lightbox com zero de codificação em menos de 10 minutos.

Vamos mergulhar.

O que é um pop-up de caixa de luz?

Um pop-up lightbox é um formulário opt-in que aparece com um efeito cinematográfico. Quando uma caixa de luz aparece, ela desfoca o resto do site em segundo plano. Dessa forma, todo o seu foco está no pop-up.

Originalmente, o conceito de lightboxes vem da publicidade ao ar livre:

E então, alguns desenvolvedores acharam esse efeito muito legal e criaram uma biblioteca Javascript para recriar o mesmo efeito em ativos da web. Mais tarde, surgiu a ideia de usar pop-ups de lightbox.

Por que os pop-ups lightbox funcionam

Os pop-ups da caixa de luz capturam mais e-mails do que um formulário de optin de e-mail tradicional.

Mas por que eles funcionam?

Vamos dar uma olhada rápida nas principais razões pelas quais os pop-ups de lightbox funcionam tão bem.

#1. Os pop-ups de lightbox apresentam uma chamada à ação clara

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

Mas isso não é verdade.

Se você está procurando por conversões diretas, você quer uma frase de chamariz única e clara na qual seu público possa se concentrar. Dessa forma, você remove todas as distrações da mente do usuário. E os pop-ups lightbox fazem um ótimo trabalho ao 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. Pop-ups lightbox são impossíveis de ignorar

Os pop-ups da caixa de luz ocupam a tela inteira e desfocam todo o resto. Então, é praticamente impossível ignorá-los.

Isso é especialmente verdadeiro se eles forem animados:

Claro, você precisa garantir que seus pop-ups não sejam intrusivos. E você pode fazer isso personalizando quando acionar diferentes pop-ups em seu site. Contanto que seu público não fique incomodado com a interrupção, você pode convencê-los e convertê-los facilmente.

#3. Os pop-ups da caixa de luz têm acionadores personalizados

Você não deve mostrar a mesma oferta para todos os visitantes da web. Se você estiver administrando 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 enviar uma oferta diferente:

Observe como os valores de desconto para ambas as ofertas são exatamente os mesmos. Mas a forma como a oferta é enquadrada é drasticamente diferente. E isso é super importante porque os pop-ups da lightbox são criados para efeitos teatrais. Assim, uma abordagem mais personalizada vai te trazer 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 de jantar, faz mais sentido mostrar a eles uma oferta relacionada a receitas de jantar em vez de mostrar uma oferta de carros.

#4. Pop-ups de lightbox podem capturar visitantes que abandonam

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

Os 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 o abandono do site, definitivamente deve criar um pop-up de lightbox de intenção de saída.

Como criar um pop-up Lightbox

Agora que você entende o que é um pop-up de lightbox e por que deseja criar um, como criar um pop-up de lightbox? Recomendamos usar o OptinMonster para criar seus pop-ups.

O OptinMonster é o kit de ferramentas de conversão nº 1 do mundo e nós o usamos. O OptinMonster torna super simples criar pop-ups poderosos que convertem. E você nunca terá que usar qualquer codificação.

Nós até escrevemos uma revisão completa do OptinMonster.

Você pode verificar 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 1: criar uma campanha

Vá até o painel do OptinMonster e clique no botão Criar :

Selecione o tipo de campanha pop-up lightbox :

Em seguida, escolha um modelo de campanha. Você pode escolher o modelo que quiser, mas vamos usar o tipo de campanha Simples para este tutorial.

Agora, dê um nome à sua campanha. Lembre-se de que esse nome de campanha é para você e você provavelmente criará vários desses pop-ups com diferentes opções de segmentação. Portanto, dê um nome significativo à campanha ou você ficará realmente confuso mais tarde.

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

Pressione Iniciar construção quando terminar.

Etapa 2: edite seu pop-up

Com o OptinMonster, você terá um construtor visual de pop-up de arrastar e soltar. Quando terminar de criar sua campanha, você poderá editar até os menores detalhes sobre seu pop-up. Comece editando o título do pop-up:

A parte mais incrível aqui é que você apenas clica no texto que deseja editar e o altera inline. Não há necessidade de preencher um formulário ou editar qualquer código HTML no pop-up.

Em seguida, ajuste o texto e a aparência do botão para criar uma frase de chamariz clara:

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

Etapa 3: definir regras de exibição

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

Nossa recomendação é que você altere a condição do gatilho para exit-intent:

Clique em Próxima etapa para escolher a ação . Aqui, recomendamos que você defina Mostrar a visualização da campanha para Optin View, defina o show com MonsterEffect para qualquer animação de entrada que desejar e reproduza o efeito sonoro para qualquer efeito sonoro para seu pop-up.

E, em seguida, clique no botão Próxima etapa . Você pode ver toda a extensão de suas configurações na guia Resumo.

Etapa 4: Configure sua integração de e-mail

O próximo passo é 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 usar o Drip para seu marketing por e-mail se você ainda não tiver um provedor de serviços de e-mail.

Etapa 5: publique seu pop-up de lightbox

Quando você cria uma nova campanha, ela é 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 para Publicar e selecione a plataforma do site:

Se você estiver executando um site WordPress, o plug-in OptinMonster lida com o restante da configuração automaticamente. É o mesmo para Shopify e BigCommerce. Para qualquer outro site, clique em Qualquer Site e cole o código de incorporação na cabeça do seu site:

E pronto!

Empacotando

Isso é tudo para este, pessoal!

Deixe-nos saber se este artigo ajudou. Criar pop-ups em seu site pode ajudá-lo a converter seu tráfego em assinantes de e-mail e leads de negócios genuínos. E é altamente recomendável que você comece a criar pop-ups de 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 ajudá-lo a trazer mais tráfego repetido e engajamento no site. Você também pode criar campanhas automatizadas de notificação por push que geram vendas.

Não convencido? Confira estes recursos:

• 7 estratégias inteligentes para aumentar o envolvimento do cliente
• As 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 usar o PushEngage para criar suas campanhas de notificação por push. PushEngage é o software de notificação push nº 1 do mundo. Portanto, se você ainda não o fez, comece a usar o PushEngage hoje mesmo!