clique aqui e assine

Notificações Push: Aprenda a Instalar em Apenas 3 Passos

Vamos aprender a instalar as notificações push no site ou no blog? É justamente isso que veremos no post de hoje!

Imagem com e-mail e notificações push.
Imagem de mohamed Hassan do Pixabay.

O que são notificações push?

Notificações push são aqueles avisos que aparecem sempre que você entra em algum site, geralmente na parte superior esquerda da tela. Veja um exemplo aqui do blog, na foto abaixo:

Exemplo de uma notificação push.
Exemplo de uma notificação push.

Como funcionam?

As notificações push funcionam como um tipo de lista de assinantes do seu site. E quando falo de site estou me referindo aos blogs também, é claro.

Basicamente, quem tem uma loja virtual (e-commerce) ou trabalha com marketing digital sabe da importância de uma lista de contatos. Geralmente essa lista é gerada através da captura de e-mails com entrega de isca digital.

Eu não sei se você reparou, mas aqui na página inicial do meu blog (www.leonardoamoyr.com) tem um campo específico pra você deixar seu e-mail e baixar o meu e-book. Quando você coloca seu e-mail lá, você passa a fazer parte da minha base de assinantes.

Em outras palavras, agora sempre que eu quiser falar com você eu posso fazer isso te enviando um e-mail, utilizando uma ferramenta de e-mail marketing.


Eu gravei dois vídeos tutoriais pro meu canal do YouTube sobre ferramentas gratuitas de e-mail marketing recentemente. Você pode conferir clicando aqui!


As notificações push funcionam mais ou menos como a captura de e-mails, só que em vez de você deixar o seu e-mail e clicar no botão para baixar sua recompensa digital, basta que você aceite receber notificações clicando no botão “Permitir” que aparece na tela do seu navegador.

Faça o teste! Acesse o meu site e veja a notificação aparecendo, como na imagem abaixo:

Exemplo de notificações push.
Outro exemplo de notificações push.

Quando você aceita receber notificações push, agora sempre que eu quiser enviar pra você uma notificação de um novo artigo que eu publiquei, basta eu enviar uma campanha para todos da minha lista de inscritos.

Você receberá um alerta na tela do seu computador ou na tela do seu celular.

Isso é possível graças à utilização de um cookie, que se instala no navegador de internet do usuário e identifica que ele deseja receber comunicações de determinado site.

Agora, vamos para a parte prática desse artigo onde eu vou te ensinar a instalar e configurar as notificações push.

Como instalar as notificações push?

O serviço que irei utilizar aqui é amplamente divulgado nas comunidades digitais e possui muita qualidade. Trata-se da SendPulse, uma ferramenta de automação de marketing com recursos avançados e de fácil utilização.

Ferramenta avançada de automação de marketing.
Ferramenta avançada de automação de marketing.

Crie uma conta na SendPulse

A primeira coisa que você tem que fazer é criar uma conta na SendPulse. É rápido e gratuito para o nosso plano básico de utilização.


Clique aqui para criar sua conta na SendPulse!


Embora a gente vá utilizar o plano grátis da SendPulse, criando sua conta com o link acima garante a você R$100,00 de desconto (R$20,00 de desconto/mês, durante 5 meses) caso queira fazer o upgrade para qualquer plano pago da ferramenta posteriormente.

Painel da SendPulse.
Painel da SendPulse.

Repare que ao acessar o seu painel administrativo pela primeira vez, após ter feito o seu cadastro na ferramenta, você observa que automaticamente está inserido no plano gratuito.

Além do serviço de notificações push, a SendPulse também funciona com automação de e-mail marketing e chatbot para Facebook.

Mas, o que vamos utilizar aqui nesse tutorial é a opção “Push”, no menu superior de opções.

Configure os seus sites

Painel SendPulse.
Painel SendPulse.

Repare que eu marquei alguns detalhes importantes na foto acima. Depois de clicar em “Push”, clique em “Adicionar novo site”.

Mas, antes de seguir, repare também que eu marquei com um “*” uma caixa vermelha que revela mais um detalhe: no plano gratuito da SendPulse, você pode ter até 10 mil assinantes das suas notificações push.

Um bom número de assinantes para o plano gratuito, hein?

Painel SendPulse.
Painel SendPulse.

Note que eu marquei mais alguns detalhes para os quais você deve se atentar. Recomendo que utilize o favicon (ícone) do seu site ali na imagem do site.

Cuide para que a sua imagem não ultrapasse as dimensões propostas pela ferramenta, de 128px por 128px, com limite de tamanho de até 200 KB.

Outro ponto legal que eu customizei para todas as minhas páginas configuradas é o tempo de atraso, que deixei com 3 segundos (é o tempo até a caixinha do pedido de inscrição aparecer na tela do usuário, a partir do momento que a página é carregada pelo navegador).

Painel SendPulse.
Painel SendPulse.

Estou utilizando aqui o meu site cobaia do Curso de Barbeiro.

Agora, tudo o que você deve fazer é:

  1. Inserir o script fornecido pela SendPulse no cabeçalho do seu site, antes de fechar a marca </head>;
  2. Baixar e descompactar em seu computador os arquivos de verificação da SendPulse. Mais tarde iremos fazer o upload desses arquivos para a raiz do seu site.

Como inserir o script da SendPulse no site?

Se você utiliza um tema premium para WordPress como esse que eu estou usando agora (conheça aqui o meu tema de WordPress, o Wolf WP) ou o WP Avenger, por exemplo, isso pode ser facilmente inserido nas configurações do tema. Veja:

Códigos personalizados no Wolf WP.
Códigos personalizados no Wolf WP.
Códigos personalizados no WP Avenger.
Códigos personalizados no WP Avenger.

Mas, caso você não utilize nenhum desses dois temas, você ainda tem a opção de utilizar o plugin chamado Header Footer Code Manager, como mostra a imagem abaixo:

Plugin Header Footer Code Manager, para WordPress.
Plugin Header Footer Code Manager, para WordPress.

Após ter instalado o plugin, chegou a hora de ativa-lo e adicionar um novo snippet de código dentro do plugin.

Plugin Header Footer Code Manager, para WordPress.
Plugin Header Footer Code Manager, para WordPress.
Plugin Header Footer Code Manager, para WordPress.
Plugin Header Footer Code Manager, para WordPress.

Depois que finalizar, é só clicar no botão “Salvar” e pronto, está feito.

Como inserir os arquivos da SendPulse na raiz do site?

Para fazer isso, você deve acessar dentro do seu painel de hospedagem a opção de gerenciador de arquivos, como foi feito nas imagens abaixo:

Painel cPanel da hospedagem Gubax.
Painel cPanel da hospedagem Gubax.
Painel cPanel da hospedagem Gubax.
Painel cPanel da hospedagem Gubax.
Painel cPanel da hospedagem Gubax.
Painel cPanel da hospedagem Gubax.

É nessa etapa que você vai carregar os 2 arquivos descompactados da SendPulse clicando na opção “Carregar”, dentro do gerenciador de arquivos da sua hospedagem.


Conheça a Gubax, hospedagem barata e 100% brasileira! Use o cupom leonardoamoyr e ganhe 10% de desconto no primeiro mês de sua hospedagem, em qualquer plano.


Feito isso, é só clicar no botão “Verificar” logo no final da página e pronto! O seu site agora está configurado com notificações push corretamente!

Se você seguiu todos os passos e deu certo, meus parabéns! Agora é só compartilhar esse conteúdo para mais pessoas (tem uns botões logo abaixo onde você pode fazer isso).

Se não conseguiu, escreva um comentário logo abaixo pra mim que eu te ajudo.

Abraço e sucesso pra você!

Sobre o Autor

Leonardo Amoyr
Leonardo Amoyr

Empreendedor Digital especializado na criação de negócios digitais de alta rentabilidade. Saiba como ganhar dinheiro com Marketing Digital, trabalhando em casa!