Como Adicionar um Botão de Subscrição de Notificações Push a Pop-ups

Procura uma forma de adicionar um botão de subscrição de notificações push aos seus pop-ups?

Os pop-ups são uma ótima forma de aumentar as suas conversões e expandir uma lista de e-mail. Mas isso não é tudo o que pode fazer com eles. Se usar o construtor de pop-ups certo, pode personalizar tudo sobre os seus pop-ups.

Por defeito, as notificações push também vêm com modais de pop-up. Mas pode obter muito mais opções de personalização com um construtor de pop-ups.

Portanto, vamos usar um construtor de pop-ups para criar o pop-up e adicionar um link de subscrição para recolher subscritores de notificações push.

Pode facilmente adicionar um botão para recolher subscritores de notificações push diretamente dos seus pop-ups. E é super fácil de fazer. Tudo o que precisa é de um construtor de pop-ups e um software de notificações push para configurar pop-ups personalizados para recolher subscritores de notificações push.

Vamos a isso.

Como Criar um Pop-up para Recolher Subscritores de Notificações Push

Vamos começar por criar um pop-up. Recomendamos o uso de OptinMonster para criar todos os seus pop-ups.

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.

O OptinMonster tem praticamente tudo o que precisa para iniciar, expandir e escalar o seu processo de geração de leads.

Aqui está um resumo rápido do que pode fazer usando o kit de ferramentas:

• Recolher subscritores de notificações push usando um pop-up
• Converta visitantes de primeira viagem em leitores regulares
• Reduzir as taxas de abandono de carrinho e abandono de navegação
• Crie ofertas por tempo limitado com contadores regressivos reais
• Aumentar downloads de eBooks e vendas de produtos digitais
• Criar um funil para eventos ao vivo
• Melhore o envolvimento no site usando pop-ups gamificados
• Redirecione o seu tráfego para páginas e publicações que lhe dão dinheiro

Usamos o OptinMonster bastante e até escrevemos 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 de Pop-up para Recolher Subscritores

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

Selecione a opção Modelo para começar a criar um opt-in usando um modelo pré-desenhado:

Para este tutorial, vamos criar um pop-up para a Black Friday. Selecione o tipo de campanha Pop-up e procure um modelo de campanha

Pode escolher qualquer modelo que goste, mas vamos usar o modelo de campanha Black Friday para este tutorial.

Depois de selecionar o seu modelo, 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. Por isso, 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. Por isso, selecione também o site onde pretende exibir a sua campanha. Clique em Começar a Construir quando terminar.

Passo #2: Editar o seu Pop-up para Personalizar o Aspeto

Com o OptinMonster, terá um construtor de pop-ups visual de arrastar e soltar. Assim que terminar de nomear a sua campanha, poderá editar até os mais pequenos detalhes do seu pop-up.

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.

Pode editar tudo o que quiser sobre o seu popup, incluindo imagens. Quando estiver satisfeito com a aparência da opção, pode passar para definições mais avançadas.

A forma como este modelo específico está configurado é que existem três partes para o popup. Tem um ecrã inicial de Sim/Não onde os visitantes optam por um cupão na Black Friday. É o que vê na imagem acima. Por defeito, é um cupão de portes grátis. Mas pode adicionar qualquer oferta ou cupão que desejar.

Quando os seus visitantes clicarem no botão Sim no popup, serão enviados para o ecrã de Opção. É aqui que recolheria os subscritores. Por defeito, o ecrã de opção recolhe emails. Vamos substituí-lo por um botão para recolher subscritores de push.

Finalmente, tem um ecrã de Sucesso que aparece quando o seu visitante se inscreve.

Vamos fazer isto um passo de cada vez.

Passo #3: Remover a Opção de Email do Popup

Pode editar qualquer módulo no popup que desejar. Vá para o ecrã de Opção na barra inferior:

Aqui, pode passar o rato sobre o módulo de opção de email e simplesmente clicar no botão de eliminar para o remover:

Agora que a opção de email desapareceu, vamos adicionar um botão para recolher subscritores de notificações push.

Passo #4: Adicionar um Botão Clicar para Subscrever ao Seu Popup

Primeiro, adicione um bloco HTML ao seu popup a partir da barra lateral 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 class = "btn" onclick="subscribeOnClickButton()">Get Updates via Push Notifications Instead</button>

Cole o código onde diz que pode adicionar HTML. Neste ponto, deverá ver um novo botão no seu popup:

Em seguida, role para baixo e cole o seguinte CSS no contentor CSS:

html div#om-{{id}} .btn
{
    font-family: Arial, sans-serif;
    font-weight: 0;
    font-size: 14px;
    color: #fff;
    background-color: #cf1f31;
    padding: 10px 30px;
    width: 100%;
    margin: auto;
    border: solid #cf1f31 2px;
    box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
    border-radius: 50px;
    transition : 1000ms;
    transform: translateY(0);
    display: grid;
    align-text: center;
    cursor: pointer;
}

html div#om-{{id}} .btn:hover
{
    transition : 1000ms;
    padding: 10px 35px;
    transform : translateY(-0px);
    background-color: #ffffff;
    color: #cf1f31;
    border: solid 2px #ffffff;
}

Neste ponto, deverá ver um botão com um aspeto bonito no seu popup:

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

As notificações push ajudam a aumentar o tráfego e o envolvimento do seu website em modo automático. 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 os 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 tomar 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 assim pode fazê-los subscrever usando notificações push da web.

Recomendamos o uso do PushEngage para enviar notificações push da web.

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

• Campanhas automatizadas de alta conversão
• Opções de segmentação múltipla e agendamento de campanhas
•  Rastreamento de objetivos e análises avançadas
• Testes A/B inteligentes
• Um Gestor de Sucesso Dedicado

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.

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

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:

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 #6: Adicione o Seu Código de Subscrição ao Bloco HTML no Seu Popup

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

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

Passo #7: Adicionar Rastreamento de Cliques e Fecho de Campanha

A última coisa que precisamos de fazer é adicionar o código de rastreamento de cliques para considerar cada subscritor como uma conversão no OptinMonster. Além disso, quando o visitante subscrever, irá querer que ele vá para o ecrã Sucesso ou que saia da campanha.

Dentro do snippet Javascript, adicione as seguintes linhas de código:

Para ativar o rastreamento de conversões, adicione este código:

om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster

Para mover o seu subscritor para o ecrã de Sucesso, adicione este código:

om{{id}}.changeView('success'); // Show Success view on submission

Para fechar a campanha na subscrição, adicione este código:

om{{id}}.startClose();// Close campaign on submission

Pode adicionar múltiplos snippets de código também. Recomendamos que mova os subscritores para o ecrã de Sucesso e rastreie a conversão. Assim, o snippet de código final que recomendamos usar (incluindo o botão e todo o Javascript) é:

<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);
om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster
om{{id}}.startClose();// Close campaign on submission
}]);
}
</script>
<div>
	<button class="btn" onclick="subscribeOnClickButton()">Get Updates via Push Notifications</button>
</div>

Ou, pode usar este código em vez disso para fechar a campanha diretamente:

<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);
om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster
om{{id}}.changeView('success'); // Show Success view on submission
}]);
}
</script>
<div>
	<button onclick="subscribeOnClickButton()">Get Updates via Push Notifications</button>
</div>

Basta copiar e colar o código no bloco HMTL do seu popup OptinMonster.

E para qualquer um dos snippets de código, lembre-se de adicionar o seguinte CSS na secção CSS do seu bloco HTML:

html div#om-{{id}} .btn
{
    font-family: Arial, sans-serif;
    font-weight: 0;
    font-size: 14px;
    color: #fff;
    background-color: #cf1f31;
    padding: 10px 30px;
    width: 100%;
    margin: auto;
    border: solid #cf1f31 2px;
    box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
    border-radius: 50px;
    transition : 1000ms;
    transform: translateY(0);
    display: grid;
    align-text: center;
    cursor: pointer;
}

html div#om-{{id}} .btn:hover
{
    transition : 1000ms;
    padding: 10px 35px;
    transform : translateY(-0px);
    background-color: #ffffff;
    color: #cf1f31;
    border: solid 2px #ffffff;
}

Quando terminar, clique em Guardar. Se verificar o seu site, deverá agora ver o popup a recolher subscritores de e-mail e de notificações push:

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 OptinMonster e depois usá-los como os seus popups de notificação push.

Passo #8: Publicar o Seu Popup de Intenção de Saída no WordPress

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:

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:

E está feito!

Passo Bónus: Desativar Instalação Rápida no PushEngage

A Instalação Rápida é um método de adicionar subscritores de notificações push a um website sem um certificado SSL. Atualmente, quase todos os sites têm um certificado SSL, mas caso não tenha um instalado, recomendamos vivamente que instale um imediatamente. Consulte este artigo sobre como instalar um certificado SSL no WordPress.

Portanto, antes de começar a recolher subscritores no seu site, recomendamos que desative também a Instalação Rápida. Aceda ao painel do PushEngage e vá a Design » Modais de Popup. Em seguida, desative a Instalação Rápida:

E agora, está pronto para promover o seu website e recolher mais subscritores para a Black Friday!

O que fazer depois de começar a recolher subscritores push

É tudo por esta vez, pessoal!

Informe-nos se este artigo foi útil. Criar popups no seu site pode ajudá-lo a converter o seu tráfego em subscritores push e leads de negócio genuínos. E recomendamos vivamente que comece a criar popups de intenção de saída imediatamente.

E se procura uma forma acessível de aumentar o seu tráfego, recomendamos a utilização 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:

• 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)
• Como Adicionar um Plugin WordPress de Notificações Web ao Seu Site

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!