Como Adicionar um Botão de Assinatura de Notificação Push a Popups

Procurando uma maneira de adicionar um botão de assinatura de notificações push aos seus popups?

Popups são uma ótima maneira de aumentar suas conversões e expandir uma lista de e-mails. Mas isso não é tudo o que você pode fazer com eles. Se você usar o construtor de popups certo, poderá personalizar tudo sobre seus popups.

Por padrão, as notificações push também vêm com modais de popup. Mas você pode obter muito mais opções de personalização com um construtor de popups.

Portanto, vamos usar um construtor de popups para criar o popup e adicionar um link de assinatura para coletar assinantes push.

Você pode facilmente adicionar um botão para coletar assinantes de notificações push diretamente de seus popups. E é super fácil de fazer. Tudo o que você precisa é de um construtor de popups e um software de notificações push para configurar popups personalizados para coletar assinantes push.

Vamos lá.

Como Criar um Popup para Coletar Assinantes Push

Vamos começar criando um popup. Recomendamos usar o OptinMonster para criar todos os seus popups.

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.

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

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

• Colete assinantes de notificações push usando um popup
• 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
• Crie um funil para eventos ao vivo
• Melhore o engajamento do site usando pop-ups gamificados
• Redirecione seu tráfego para páginas e posts que geram dinheiro para você

Usamos o OptinMonster bastante e até escrevemos uma análise completa do OptinMonster. Você pode conferir, ou começar sua campanha agora mesmo. Tudo o que você precisa fazer é se inscrever no OptinMonster e acompanhar o restante deste artigo.

Etapa nº 1: Crie uma Campanha de Popup para Coletar Assinantes

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

Selecione a opção Template para começar a criar um optin usando um template pré-desenhado:

Para este tutorial, vamos criar um popup para a Black Friday. Selecione o tipo de campanha Popup e pesquise por um template de campanha

Você pode escolher qualquer template que quiser, mas vamos usar o template de campanha Black Friday para este tutorial.

Depois de selecionar seu template, dê um nome à sua campanha. Lembre-se, este nome de campanha é para você e você provavelmente criará um monte desses popups 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. Clique em Start Building quando terminar.

Etapa nº 2: Edite seu Popup para Personalizar a Aparência

Com o OptinMonster, você terá um construtor de popups visual de arrastar e soltar. Depois de nomear sua campanha, você poderá editar até os menores detalhes do seu popup.

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.

Você pode editar tudo o que quiser sobre seu popup, incluindo imagens. Quando estiver satisfeito com a aparência da optin, você pode passar para configurações mais avançadas.

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

Quando seus visitantes clicam no botão Sim no popup, eles são enviados para a tela de Optin. É aqui que você coletaria os assinantes. Por padrão, a tela de optin coleta e-mails. Vamos substituir isso por um botão para coletar assinantes de push.

Finalmente, você tem uma tela de Sucesso que aparece quando seu visitante se inscreve.

Vamos fazer isso um passo de cada vez.

Passo nº 3: Remover a Optin de E-mail do Popup

Você pode editar qualquer módulo no popup que desejar. Vá para a tela de Optin na barra inferior:

Aqui, você pode passar o mouse sobre o módulo de optin de e-mail e simplesmente clicar no botão de excluir para removê-lo:

Agora que a optin de e-mail sumiu, vamos adicionar um botão a ela que coleta assinantes de notificações push.

Passo nº 4: Adicionar um Botão Clicar para Assinar ao Seu Popup

Primeiro, adicione um bloco de HTML ao seu popup a partir da barra lateral no 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 class = "btn" onclick="subscribeOnClickButton()">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:

Em seguida, role para baixo e cole o seguinte CSS no contêiner de 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, você deve ver um botão com uma aparência bonita no seu popup:

Passo nº 5: Obter o Código de Assinatura do PushEngage

Notificações push ajudam você a aumentar o tráfego e o engajamento do seu site automaticamente. 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. Ajuda a reengajar usuários notificando-os de novo conteúdo, ofertas ou eventos.

Notificações push também incluem mensagens claras e acionáveis e botões de call to action, 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 assinantes de notificações push do seu popup de e-mail. Então, caso os visitantes do seu site não queiram fornecer seu ID de e-mail, você ainda pode fazê-los assinar 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 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
• Testes A/B inteligentes
• 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.

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>

Passo nº 6: Adicionar seu Código de Assinatura 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.

Etapa nº 7: Adicionar Rastreamento de Cliques e Fechamento de Campanha

A última coisa que precisamos fazer é adicionar o código de rastreamento de cliques para considerar cada assinante como uma conversão no OptinMonster. Além disso, quando o visitante se inscrever, você vai querer que ele vá para a tela de Sucesso ou saia da campanha.

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

Para habilitar o rastreamento de conversão, adicione este código:

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

Para mover seu assinante para a tela de Sucesso, adicione este código:

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

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

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

Você também pode adicionar vários snippets de código. Recomendamos que você mova os assinantes para a tela de Sucesso e rastreie a conversão. Portanto, 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, você 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 seçã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 Salvar. Se você verificar seu site, agora deverá ver o popup coletando assinantes de e-mail e de notificações push:

E pronto, você está coletando assinantes 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, em seguida, usá-los como seus popups de notificação push.

Etapa nº 8: Publicar seu Popup de Intenção de Saída no WordPress

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!

Etapa Bônus: Desativar Instalação Rápida no PushEngage

Instalação Rápida é um método de adicionar assinantes de notificação push a um site sem um certificado SSL. Hoje em dia, quase todos os sites têm um certificado SSL, mas caso você não tenha um instalado, recomendamos fortemente que instale um imediatamente. Confira este artigo sobre como instalar um certificado SSL no WordPress.

Portanto, antes de começar a coletar assinantes em seu site, recomendamos desativar a Instalação Rápida também. Vá para o painel do PushEngage e vá para Design » Modais de Popup. Em seguida, desative a Instalação Rápida:

E agora, você está pronto para promover seu site e coletar mais assinantes para a Black Friday!

O que fazer depois de começar a coletar assinantes push

É tudo por hoje, pessoal!

Informe-nos se este artigo ajudou. Criar popups em seu site pode ajudá-lo a converter seu tráfego em assinantes push e leads de negócios genuínos. E recomendamos fortemente que você comece a criar popups de intenção de saída 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 gerar mais tráfego recorrente e engajamento no site. Você também pode criar campanhas de notificação push automatizada 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)
• Como Adicionar um Plugin de Notificações Web WordPress ao Seu Site

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!