<img height="1" width="1" style="display:none;" alt="" src="https://dc.ads.linkedin.com/collect/?pid=81693&amp;fmt=gif">

Pop-up o que é e como criá-lo?

menu_book 6 minutos de leitura

Utilizar pop-ups em sites para levar o usuário a realizar uma ação pode ser eficiente se você souber como fazê-lo. O exit pop-up ou pop-up de saída tornou-se uma técnica amplamente utilizada no marketing devido à sua eficácia em aumentar a taxa de conversão. Quer saber pop-up o que é e como criá-lo? Conto tudo a seguir!

O que é um Exit Intent Pop-up e por que você precisa ter no seu blog?

Às vezes, o seu site pode estar bem otimizado e receber muitas visitas, mas sem conversão; e, portanto, você fica sem os desejados e valiosos contatos. Isso é um problema, pois se você não obtém os dados desses usuários, você não pode aplicar estratégias de marketing específicas para eles, correndo o risco de perdê-los.

Uma solução para este problema é usar pop-ups no seu site. É um método minimamente invasivo e altamente eficaz que permite que os usuários sejam lembrados de inserir seus dados em troca de algo.

Neste artigo apresento um tipo específico de pop-up, o Exit Intent Pop-up. O especial sobre este pop-up é que ele é ativado somente quando o usuário sai da página, para que não seja irritante enquanto navega por ela. Assim, se o usuário sair sem deixar seus dados, este pop-up o lembrará, o que aumenta as chances de conseguir a conversão desejada.

Você gosta do que está lendo? Inscreva-se para receber os novos posts e notícias de marketing e vendas no seu e-mail

Como criar um pop-up?

Há um grande número de opções para a criação de pop-ups. A plataforma WordPress oferece uma das maneiras mais fáceis de fazer isso, por meio de plugins. Existem diferentes plugins que oferecem a opção de criar seus próprios pop-ups e personalizá-los, mas poucos oferecem a possibilidade de transformar este pop-up em um Exit Pop-up. Entre os plugins que oferecem esta funcionalidade destaco Popupsmart, Popup Builder, OptinMonster e Elementor, entre outros, que são pagos.

A outra opção que você tem é criar um pop-up por meio desses plugins e adicionar a funcionalidade Exit Intent, via JavaScript. Para isso, você pode utilizar um dos plugins que oferece a maior opção de customização, o Popup Maker.

Nueva llamada a la acción

Como criar um Exit Pop-up com o Popup Maker: passo a passo

Criar um pop-up de saída pode ser complexo à primeira vista; no entanto, é muito mais simples do que parece. Graças ao uso do Popup Maker e um pouco de habilidade, você pode criá-lo e personalizá-lo facilmente em apenas alguns minutos. Aqui mostro o passo a passo de como fazer:

Instalação

A primeira coisa que você deve fazer é instalar o plugin do Popup Maker. Entre no site e clique no botão de download. Ao fazer isso, baixe o arquivo do instalador em formato zip. Assim que baixar, vá ao WordPress, clique na seção de plugins, e em "upload plugin", o que permitirá que você carregue o instalador que baixou anteriormente.

Assim que você tiver o plugin, é hora de criar o seu primeiro pop-up. Para isso entre no Plugin Popup Maker e clique em "Criar Popup". Nesta seção você pode dar um nome ao pop-up, gerar um título e escolher o conteúdo que quer que apareça nele de forma muito simples através de um editor de texto.

Indicar quando e em quais páginas o pop-up vai aparecer

Quando terminar de criar o conteúdo do pop-up, é a hora de configurá-lo. Para que funcione como um pop-up de saída, é muito importante que, nas configurações do pop-up, você deixe o trigger (gatilho) vazio, sem adicionar nada, pois você fará isso depois por meio de um código. O que você tem que configurar é a seção de segmentação, ou seja, onde você quer que o pop-up apareça (somente nos posts do blog, em todas as páginas, somente em páginas específicas, etc).

Edição dos estilos de pop-up

Finalmente, é hora de alterar o design do pop-up e dar-lhe algumas cores de acordo com a sua marca. Para fazer isso, vá na seção de exibição e escolha onde quer que apareça (centralizado, no canto inferior direito da página, etc). Você também pode escolher entre diferentes modelos de pop-ups, então escolha o que mais gosta e personalize com as cores da sua marca.

Como transformar o pop-up em um Exit Intent Pop-up?

Bem, agora que você criou o seu pop-up, como pode fazer para que ele apareça antes do usuário sair da página? Se você usar o Popup Maker, você tem duas opções.

Através do próprio plugin (opção premium)

A primeira opção que você tem é usar a versão premium do Popup Maker. Com a assinatura, o plugin dá a opção de adicionar esta funcionalidade simplesmente clicando em um botão. É uma opção muito cómoda e simples, embora, obrigue você a comprar a licença premium da qual não sabe se será aproveitada.

Se você lembrar do que foi dito antes, a opção do Trigger (gatilho) é aquela que controla o momento em que o pop-up "pula" na tela do usuário. Com a assinatura premium você pode escolher a opção “Exit Intent” e configurá-lo de acordo com as suas necessidades. Você consegue mais informações na página oficial do Popup Maker.

Através do código JavaScript (opção gratuita)

A segunda opção é fazê-lo através do código. E essa opção tem a grande vantagem de ser totalmente gratuita. Para ser mais específico, você vai utilizar o JavaScript, aplicando uma versão do código desenvolvido por Ferenc Almasi neste artigo. Não se preocupe, é mais fácil do que parece. A seguir, mostro o passo a passo para você fazê-lo sem erros.

  1. A primeira coisa que você fará no código é implementar um tempo limite ou tempo de espera de dois segundos, que irá aguardar o carregamento do código já gerado pelo plugin Popup Maker, para evitar erros. Dentro desse tempo limite, você vai incluir um tipo condicional If que examina se existe o elemento '.pum-overlay', que inclui o pop-up que você criou através do plugin mencionado acima. Assim você terá o seguinte:

    setTimeout(()=> {

      const pumOverlay =documento.querySelector('.pum-overlay');

      E se(pumOverlay !=nulo  ||pumOverlay !=Indefinido ){

      }
    }, 2000)

  2. Com essa primeira estrutura, você adiciona dentro da condicional If a função que o pop-up exibirá quando o mouse sai da tela. Para isso, você cria uma função que examina onde o mouse está o tempo todo e, caso saia da tela do navegador, aciona o código 'visível' aos elementos 'pum-overlay' e 'pum-container' , para o qual você vai ter o seguinte código (ignore as linhas relacionadas aos cookies, que vou mostrar mais adiante):

    setTimeout(()=> {
    const pumOverlay =documento.querySelector('.pum-overlay');
      E se (pumOverlay !=nulo ||pumOverlay !=Indefinido) {

        E se (!CookieService.obterCookie('exitIntentShown')) {
            setTimeout(()=> {
              documento.addEventListener('mouseout',mouseEvent);
              documento.addEventListener('mouseout',mouseEvent);
               documento.querySelector('.pum-overlay').lista de classes.retirar('visível');
               documento.querySelector('.pum-container').lista de classe.retirar('visível');
              })
            },4000);
      }


          const mouseEvent =e => {
              const shouldShowExitIntent =
                  !e.toElement &&
                  !e.alvo relacionado &&
                  e.clienteY <10;

              E se (shouldShowExitIntent) {
                  documento.removeEventListener('mouseout',mouseEvent);
                  documento.querySelector('.pum-overlay').lista de classe.adicionar('visível');
                  documento.querySelector('.pum-container').lista de classe.adicionar('visível');

                  // Define o cookie quando o pop-up é mostrado ao usuário
                  CookieService.definirCookie('exitIntentShown',verdadeiro,1);
              }
          };
      }

    },2000)

  3. Por último, é importante ressaltar que se este pop-up aparecer toda vez que o usuário mover o mouse para longe da tela do navegador, e toda vez que você mudar de página, pode ser contraproducente e piorar significativamente a experiência do usuário no seu site. Então o próximo passo é o uso de cookies para garantir que, se o pop-up já apareceu para o usuário, não apareça novamente nos próximos 15 dias. Para isso você vai usar uma função chamada de setCookies, que cria cookies com a data atual e, caso o pop-up seja ativado, é a função getCookies que analisa se existem ou não cookies. Se não existir, irá chamar a função criada anteriormente. Portanto, o código final será o seguinte:

    setTimeout(()=> {
      const pumOverlay =documento.querySelector('.pum-overlay');
      E se (pumOverlay !=nulo ||pumOverlay !=Indefinido) {
          const CookieService = {

              definirCookie(nome,valor,dias) {
                  deixar expira ='';
                  E se (dias) {
                      const encontro =novo Encontro();
                      encontro.definir tempo(encontro.consiga tempo() + (15 *60 *1000));
                      expira ='; expira =' +encontro.toUTCString();
                  }
                  documento.bolacha =nome +'=' + (valor ||'') +expira +';';
              },

              obterCookie(nome) {
                  const biscoitos =documento.bolacha.dividir(';');
                  para (const bolacha de biscoitos) {
                      E se (bolacha.índice de(nome +'=') > -1) {
                          Retorna bolacha.dividir('=')[1];
                      }
                  }
                  Retorna nulo;
              }
          }

          E se (!CookieService.obterCookie('exitIntentShown')) {
              setTimeout(()=> {
                  documento.addEventListener('mouseout',mouseEvent);
                  documento.querySelector('.pum-close').addEventListener('clique', ()=> {
                    documento.querySelector('.pum-overlay').lista de classe.retirar('visível');
                    documento.querySelector('.pum-container').lista de classe.retirar('visível');
                  })
              },4000);
          }

          const mouseEvent =e => {
              const shouldShowExitIntent =
                  !e.toElement &&
                  !e.alvo relacionado &&
                  e.clienteY <10;

              E se (shouldShowExitIntent) {
                  documento.removeEventListener('mouseout',mouseEvent);
                  documento.querySelector('.pum-overlay').lista de classe.adicionar('visível');
                  documento.querySelector('.pum-container').lista de classe.adicionar('visível');
                  // Define o cookie quando o pop-up é mostrado ao usuário
                  CookieService.definirCookie('exitIntentShown',verdadeiro,1);
              }
          };
      }
    },2000)
  4. Para finalizar, você precisa adicionar algumas linhas ao arquivo de estilos .css para garantir que o pop-up esteja sempre oculto do início ao fim e só apareça na tela quando a classe 'visível' é adicionada a ela. As linhas para adicionar são as seguintes:

    .pum-overlay,
    .pum-container{
    tela:Nenhum !importante;
    }

    .pum-overlay.visível{
      tela:flex !importante;
      justificar-conteúdo:Centro;
      itens de alinhamento:Centro;
    }

    .pum-container.visível{
      tela:quadra !importante;
      margem esquerda:0px !importante;
      deixei:0 !importante;
      principal:0 !importante;
      posição:relativo;
    }

Exemplo de Popup Exit Intent

Desta forma simples e em cerca de 5 minutos, você pode gerar um exit intent pop-up gratuito como o que mostro no exemplo a seguir:

Popup

Como você pode ver, há diferentes maneiras de criar um exit intent pop-up e os mais fáceis são aqueles que são pagos. Porém, investindo cerca de 5 minutos baixando o plugin Popup Maker e copiando este código, você pode criar um totalmente gratuito e com maior controle dos recursos que você precisa.

Graças à implementação de um pop-up de saída, tenho certeza que a sua taxa de conversão e contatos de usuários vão aumentar. Isso vai ajudar você a conseguir novos leads para incorporá-los à sua estratégia de marketing e tentar convertê-los em clientes. Se você tiver alguma dúvida, deixe um comentário para que eu possa ajudá-lo.

Nueva llamada a la acción

Publicado em 15 de fevereiro de 2023.

Revisado e validado por Jalusa Lopes, Country Manager da InboundCycle Brasil.

FAQ sobre Pop-up

  • O que é pop-up e para que serve?

    O exit pop-up ou pop-up de saída tornou-se uma técnica amplamente utilizada no marketing devido à sua eficácia em aumentar a taxa de conversão. É um método minimamente invasivo e altamente eficaz que permite que os usuários sejam lembrados de inserir seus dados em troca de algo. Assim, se o usuário for sair sem deixar seus dados, este pop-up o lembrará, o que aumenta as chances de conseguir a conversão desejada.
  • Como criar uma pop-up?

    Há um grande número de opções para a criação de pop-ups. A plataforma WordPress oferece uma das maneiras mais fáceis de fazer isso, e é por meio de plugins

Outros artigos que podem te interessar...

Dor do cliente: o que é e como solucioná-la
Network marketing: o que é e como funciona
Os 10 erros de marketing digital para MEIs que devem ser evitados

O que você acha? Deixe um comentário!