Looking for a quick and easy guide on how to setup web push notifications on your website?
Nós temos o que você precisa.
In this article, we’ll show you how to set up web push notifications on your website even if:
- You’ve never done it before
- You don’t have a developer to do it for you
- You’ve tried and failed to add push notifications to your site
The best part? We’ll do it without the technical jargon. So, even if you’re not a developer, you can still install push notifications pretty easily.
Para este artigo, usaremos o PushEngage para configurar notificações push em seu site. O PushEngage é o software de notificações push nº 1 do mundo. Portanto, suas campanhas estarão em boas mãos.
Vamos lá.
Como Instalar Notificações Push em Seu Site
Antes de começarmos, aqui está uma rápida olhada no que você pode esperar em seu site ao final deste artigo. Se você seguir as etapas deste tutorial, deverá ser capaz de enviar notificações push de seu site, assim como esta:

It doesn’t matter at all how you developed your site, what kind of business you’re running, or any other technical specifications. You’ll be able to install push notifications on your site either way.
Vamos lá.
Passo nº 1: Configure Sua Conta PushEngage
Acesse a página inicial do PushEngage e clique no botão Começar:

You can select the free plan to try out PushEngage but if you’re serious about growing your business, choose a paid plan. The paid plans include better audience targeting options and campaign automation features.
Depois de se inscrever para uma conta, vá para o painel do PushEngage e acesse Configurações » Configurações do Site » Configurações de Instalação:

You can configure your site’s URL and identity on this screen. Go ahead and set a logo and site URL for your push notification campaigns and broadcasts.
All your push notification subscribers will see the Site Name, Site Image, and Site URL on your notifications. So, you should set these up right now so that you can test your push notifications later on.
Etapa nº 2: Obtenha o Código de Instalação do PushEngage
Next, you’ll need to head over to the PushEngage dashboard and get the installation code. Head over to Settings » Site Settings » Installation Settings:

Inside this tab, you’ll see that you can get a different code for different types of websites. Find the right one for your site and copy it. If you’re running a site on a CMS that isn’t listed in the tab, you can head over to either HTTP or HTTPS tabs based on whether your site has an SSL certificated installed.
This next part is super important. If you don’t do this step, your site won’t be able to collect push notification subscribers.
If you’re using an HTTPS site and you have access to your server’s root folder, you’ll need to download the service-wroker.js file from the same tab. Then, upload it to your root folder.
NOTE: If you can’t upload the service-worker file to the root folder, you can still upload the file to another folder. Go to PushEngage Dashboard » Settings » Site Settings » Advanced Settings.
Just follow the instructions in the Service Worker Settings and you’re golden:

Por fim, você vai querer colocar o código de instalação do PushEngage no <head> HTML do seu site. Se você é um desenvolvedor acostumado a codificar em HTML, já sabe como fazer isso.
Mas se você é novo em HTML e está usando um CMS para gerenciar seu site, não se preocupe. O processo para editar o <head> HTML é diferente para cada plataforma. Por isso, criamos guias detalhados, passo a passo, para as plataformas mais populares para você:
- Instalar notificações push no WordPress
- Instalar notificações push no WordPress (sem plugin)
- Instalar notificações push no WooCommerce
- Instalar notificações push no Wix
- Instalar notificações push no Blogger
- Instalar notificações push no Zoho
- Instalar notificações push no Volusion
- Instalar notificações push no Weebly
- Instalar notificações push no ClickFunnels
- Instalar notificações push no PrestaShop
- Instalar notificações push no OpenCart
- Instalar notificações push no CS-Cart
- Instalar notificações push no Drupal
- Instalar notificações push no Squarespace
- Instalar notificações push no X-Cart
- Instalar notificações push no BigCommerce
- Instalar notificações push no Jimdo
IMPORTANTE: Você pode inserir seu código de instalação diretamente do seu painel em alguns construtores de sites e CMSs. Em outras instâncias, como o PrestaShop, você precisará usar a chave de API do PushEngage. É por isso que recomendamos seguir os tutoriais específicos da plataforma para adicionar o código de notificação push corretamente.
Etapa nº 3: Configurando a Solicitação de Opt-In do PushEngage
Finalmente, no seu painel do PushEngage, vá para Configurações » Configurações de Assinatura » Caixa de Diálogo de Assinatura » Editar:

A partir daqui, você pode personalizar seu opt-in de notificação push. Se precisar de ajuda com isso, você deve conferir este artigo sobre como criar um opt-in de notificação push personalizado.
Se precisar de inspiração, você pode conferir este artigo sobre opt-ins de notificação push de alta conversão.
Etapa BÔNUS: Crie uma Notificação de Boas-Vindas
Assim que terminar de configurar a opção de inscrição, seu site poderá coletar inscritos.
Mas como você sabe se suas notificações push estão funcionando corretamente?
Recomendamos que você crie uma notificação push de boas-vindas para testar se sua configuração ocorreu sem problemas. Uma notificação de boas-vindas é uma notificação push que você envia a um novo assinante para confirmar sua assinatura e dar-lhes as boas-vindas.
Vá para Configurações » Configurações do Site » Configurações de Instalação e configure sua mensagem de boas-vindas:

Finalmente, volte ao seu site e opte por suas próprias notificações push para testar se tudo está funcionando sem problemas.
E é só isso!
Você configurou com sucesso as notificações push da web em seu site. É hora de voltar ao seu painel do PushEngage e começar a criar suas campanhas de notificação push.
Concluindo
Se você é novo em notificações push, deve seguir um processo completo de teste de notificações push antes de ir ao ar. Isso o ajudará a solucionar problemas comuns antes que seus visitantes os vejam e comecem a reclamar de uma experiência do usuário quebrada.
Recomendamos que você entre em contato com nossos Gerentes de Sucesso do Cliente se estiver com dificuldades em algum destes pontos. Teremos o maior prazer em ajudá-lo com qualquer problema. As notificações push são uma ótima maneira de gerar tráfego repetido para o seu site e aumentar as vendas e o engajamento diretos.
Ainda não está convencido? Confira estes recursos incríveis:
- Campanhas de Gotejamento e Autoresponders para Notificações Push da Web
- 5 Benefícios de Usar Campanhas de Notificação Push de Abandono de Carrinho
- Como Converter Assinantes em Compradores Usando Notificações Push da Web
Se você ainda não o fez, experimente o PushEngage. O PushEngage é o serviço de notificação push nº 1 do mundo. Portanto, se você está falando sério sobre o crescimento do seu negócio, o PushEngage é a opção certa para você.