Como criar uma notificação Web push? Vídeo

As notificações

Web push permitem chegar aos contatos de uma maneira completamente nova. Eles exibirão sua notificação no navegador de uma pessoa que concordou com as notificações. Essa pessoa não precisa ser um assinante para recebê-las.

As notificações push são um recurso gratuito que pode influenciar suas conversões, mas também informar as pessoas sobre notícias em suas páginas, alertá-las ou lembrá-las sobre seu site. Ele permite que você alcance mais pessoas e exiba notificações que podem ser redirecionadas para um site de sua escolha.

Com a GetResponse, agora você pode criar notificações push ricas, que permitem criar notificações com imagens, adicionar botões de ação e tópicos de suporte. A aparência da notificação pode ser diferente da visualização, dependendo do navegador do destinatário e do sistema operacional do destinatário (e do fato de que diferentes navegadores/SOs suportam diferentes elementos rich push).

Você também pode gerar o título e o texto da notificação usando Inteligência Artificial

Introdução às notificações Web Push

Notificações Web push são notificações que podem ser enviadas a um usuário através de um navegador web desktop e de um navegador web móvel. As notificações Web push são entregues na tela da área de trabalho ou do celular de um usuário a qualquer momento que ele tenha seu navegador aberto – independentemente de o usuário estar ou não no site.

Como funciona o Web Push?

Um serviço push recebe uma solicitação de rede, valida-a e entrega

uma mensagem push para o navegador apropriado. Se o navegador estiver offline, a mensagem é enfileirada até que o navegador seja aberto. Clique aqui para obter mais informações.

  • Você tem que criar um site na GetResponse que conterá suas notificações, bem como a URL e a imagem.
  • Você precisa instalar um script de integração do WebConnect em seu site e um service worker no servidor do site.
  • Suportamos todos os navegadores principais, com exceção do Safari e Internet Explorer 11.
  • Recomendamos vivamente a criação de um Ícone de permissão personalizado antes que o prompt de permissão do navegador nativo seja exibido. Ele informará aos seus visitantes que você pode enviar-lhes notificações se eles concordarem. Ele aumenta sua taxa de conversão e também, alguns navegadores podem bloquear o prompt do navegador nativo caso não houvesse interação prévia com o site. Além disso, o prompt personalizado pode aumentar as assinaturas de suas notificações.

Ícone de permissão personalizado:

Custom prompt.

Ícone de permissão nativo:

Native prompt.

Como criar um site?

Para criar um site:

  1. Vá para Notificações Push.
  2. Clique em Criar site.
  3. Forneça um nome para seu site (até 150 caracteres).
  4. Forneça o URL exato de seu website. Este deve ser o URL exato que aparece no navegador. Seu site deve suportar HTTPS para enviar notificações. Caso contrário, você precisará configurar um certificado SSL para seu site.
  5. (Opcional) clique em Adicionar uma imagem se você quiser adicionar um ícone. Essa seria uma imagem padrão exibida em todas as suas notificações e prompts personalizados. Pode ser o seu logotipo ou um ícone de marca.
  6. Clique em Adicionar site e continue.

Você pode adicionar apenas um domínio

ou subdomínio como seu site, por exemplo:

  • https://exemplo.com
  • https://subdomain.examplo.com

Não é possível usar um diretório como seu site, por exemplo:

  • https://exemplo.com/diretório
  • https://subdomain.examplo.com/diretório

O próximo passo é configurar seu website.

  1. Clique em Obtenha o Web Connect para copiar o Código de rastreamento. Adicione o Código de rastreamento ao site onde você deseja exibir as notificações. O snippet precisa ser colocado na seção <head> de suas páginas.
  2. Clique em Download do arquivo do prestador de serviços para fazer o download do prestador de serviços. Instale-o no diretório raiz do seu site em seu servidor. Peça ajuda a seu desenvolvedor web se você mesmo não estiver à vontade para fazer isso.
  3. Quando as pessoas optarem por participar, o funcionário de serviço será baixado para seu navegador. Se eles se inscreverem, então poderão receber suas notificações. Coisas a ter em mente:
  • Você precisa ter HTTPS para implantar o trabalhador de serviço.
  • Não renomeie o arquivo.
  • O arquivo deve apontar para a mesma origem do site (seu domínio).
  1. Clique em Terminar para concluir a configuração de seu site.

Você sempre terá acesso ao código do Web Connect e ao service worker acessando as notificações Web push e clicando em Obter código e service worker.

Na terceira etapa, você pode escolher o método de opt-in. O opt-in de dois cliques (com prompts personalizados) resultará em melhores conversões. Isso pode ser alterado posteriormente nos caminhos do prompt.

  • Com Opt-in com um clique, somente o prompt nativo do navegador será exibido.
  • Opt-in com dois cliques lhe dá a opção de criar um prompt de marca personalizado que é exibido antes do prompt nativo do navegador.

Como posso gerenciar meu site?

Para gerenciar seu site:

  1. Vá para Notificações Web Push.
  2. Passe o cursor sobre o menu de ações (elipse vertical).
    Lá você pode:
  • Editar o seu site.
  • Obter código e service worker.
  • Criar ícone de permissão
  • Criar notificação.
  • Remover (só é possível se não houver notificações ativas).

Nessa tela, você também verá quantas pessoas são assinantes das notificações naquele website.

Como criar um Ícone de permissão?

Ao criar um Ícone de permissão, você está sempre criando um ícone de permissão personalizado.

O ícone de permissão nativo é criado automaticamente e não pode ser editado, pois é uma solicitação diretamente do navegador para enviar notificações.

Tenha em atenção que:

  • Não é possível editar ou remover o prompt nativo do navegador.
  • Você pode prever como o ícone de permissão aparecerá. A aparência do prompt pode ser diferente entre navegadores e sistemas operacionais.
  • Você o encontrará em Permitir Ícone de permissão , juntamente com quaisquer prompts personalizados que você tenha criado.

Você pode criar um prompt personalizado para que seu website aumente os assinantes e as conversões.

Nota: você pode criar mais ícones de permissão, mas somente um pode estar ativo de cada vez.

Para criar uma Ícone de permissão personalizada:

  1. Vá para Notificações Web Push.
  2. Passe o cursor sobre o menu de ações (elipse vertical) e selecione Criar Ícone de permissão.
  3. Digite um nome interno (até 150 caracteres).
  4. Digite sua mensagem de solicitação (até 128 caracteres). Crie uma mensagem personalizada para incentivar as pessoas a se inscreverem. A ícone de permissão personalizada aparece antes do prompt nativo.
  5. Forneça o texto para o botão de confirmação e escolha sua cor.
  6. Forneça o texto para o link de cancelamento e escolha sua cor. Uma prévia da sua ícone de permissão será exibida no lado direito.
  7. Clique em Salvar para finalizar a configuração.
  8. (Opcional) clique em Pré-visualizar para ver como será o ícone de permissão nativo.
  9. Clique em Salvar e ativar para ativar o ícone de permissão criado (enquanto desativa o ícone de permissão atualmente ativo) ou Salvar progresso para salvar seu progresso sem ativar o ícone de permissão.

Você poderá ver quantas pessoas viram seus avisos e quantas interagiram com eles. Para o ícone de permissão nativo, você poderá ver quantas pessoas se inscreveram. Para o ícone de permissão personalizado, você poderá ver quantas pessoas visualizaram o ícone de permissão nativo, o que significa quantas pessoas aceitaram o ícone de permissão personalizado. Isto permitirá que você compare a eficácia dos diferentes ícones de permissão. Você também será capaz de verificar quantos visitantes se inscreveram através de um ícone de permissão personalizado.

Como posso gerenciar ícones de permissão

Para gerenciar os seus ícone de permissão:

  1. Vá para Notificações Web Push.
  2. Clique sobre o nome do seu site.
  3. No guia ícones de permissão, você pode desativar o ícone de permissão.
  4. Para gerenciar o ícone de permissão, passe o mouse sobre o menu de ação (elipse vertical) ao lado de seu ícone de permissão personalizado. Aí você poderá:
  • Editar o seu ícone de permissão.
  • Remove-lo (só é possível se não tiver sido exibido o prompt).

Controle onde seus ícones de permissão serão exibidos

Você pode controlar onde os ícones de permissão serão exibidos usando Caminhos da solicitação.

Os caminhos da solicitação são projetados para exibir o ícone de permissão em todo o site ou escolher páginas específicas adicionando um caminho da solicitação. O caminho refere-se à parte do URL

após o domínio. Por exemplo, em “https://www.example.com/store/sale”, o caminho é “/store/sale”.

  1. Vá para as notificações Web push.
  2. Clique no nome do seu site.
  3. Clique na guia Caminhos da solicitação.
  4. Clique em Editar caminhos para editar todos os caminhos.
  5. Passe o mouse sobre os três pontos ao lado do seu caminho para excluí-lo ou para adicionar um caminho acima ou abaixo dele.
  6. Ao adicionar o caminho, você precisa:
    • Selecione o ícone de permissão
    • Insira o caminho do Você pode especificar a ordem nos caminhos do ícone de permissão para determinar qual regra deve ter prioridade, pois as regras podem se sobrepor e bloquear umas às outras., você tem três tipos para escolher::
      • Caminho começa com – digite a primeira parte do URL exibido após o URL do seu site – portanto, se for: https://www.example.com/store/, digite /store e o prompt será exibido em todos os sites que começam com https://www.example.com/store/
      • Caminho exclui – digite a parte do caminho do URL que você gostaria de excluir da exibição de um ícone de permissão
      • Todo o site – selecione essa opção se quiser mostrar o ícone de permissão selecionado em todo o site – essa opção ocultará todos os ícones de permissão com prioridade mais baixa selecionados com Caminho começa com.
  7. Decida sobre a sequência de ordem de seus caminhos de ícones de permissão movendo-os para cima e para baixo usando o ícone de barra tripla no lado esquerdo.
  8. Salve suas alterações clicando em Salvar caminhos.

Você pode especificar a ordem nos caminhos do ícone de permissão para determinar qual regra deve ter prioridade, pois as regras podem se sobrepor e bloquear umas às outras.

Exemplo: Você tem dois caminhos

Ícone de permissão nº 1: o caminho começa com >> /store
Ícone de permissão nº 2 >> O caminho começa com >> /store/product

Nesse caso, o ícone de permissão nº 2 nunca aparecerá, porque o ícone de permissão nº 1 sempre aparecerá no caminho /store, mas se você alterar a ordem deles, o ícone de permissão nº 2 aparecerá na página /store/product/jacket e o ícone de permissão nº 1 aparecerá na página /store/category/winter

Como criar uma notificação?

Notificação é uma janela que é exibida diretamente nos desktops e telas móveis de seus assinantes. Eles podem alertar as pessoas que optaram por suas notificações sobre o que está acontecendo em seu site. Você pode anunciar o lançamento de um produto, uma venda,

ou informá-los sobre novos conteúdos.

Nota: diferentes navegadores e dispositivos podem ter diferentes limites de caráter. Se você quiser que a notificação seja boa para todos os assinantes, é melhor não criar notificações muito longas, pois elas podem não ser exibidas por completo.

Para criar uma notificação:

  1. Vá para Notificações Web push.
  2. Passe o mouse sobre o menu Ações (reticências verticais) e clique em Criar notificação.



  3. Forneça um nome interno para sua notificação (até 150 caracteres). Nesta etapa, você pode decidir se deseja usar a IA (tabela abaixo) ou criar uma manualmente (pule para o ponto 4.). A Inteligência Artificial funciona apenas com planos pagos.
  1. Clique em Usar Gerador Web Push IA.



  2. Digite sobre o que é sua notificação. Você pode escrever palavras-chave específicas ou uma frase.



  3. Mova o controle deslizante se quiser Incluir Emoji.



  4. Clique em Gerar. Pode levar alguns minutos para gerar o conteúdo.
  5. Selecione um dos três títulos e um dos três textos de notificação sugeridos pela Inteligência Artificial.



  6. Clique em Usar. Agora você pode editar o texto gerado.
  1. Na secção Audiência, pode configurar os seus prompts para serem exibidos a grupos específicos de utilizadores. Esta secção está dividida em três partes:
    • Visitantes – escolha o grupo a quem o prompt será exibido:
      • Todos os visitantes
      • Novos visitantes
      • Visitantes recorrentes (com a opção de especificar o número de visitas)
    • Dispositivo – selecione o(s) dispositivo(s) onde o prompt será exibido:
      • Telemóvel
      • Tablet
      • Computador
    • País – direcione os visitantes com base no seu país.

  2. (Opcional) Adicione gatilhos para definir quando o prompt deve aparecer:
    • Após um número específico de segundos
    • Após o utilizador percorrer uma certa percentagem da página
    • Com intenção de saída (quando o utilizador tenta sair da página)
    • Após um período de inatividade
    • Ao clicar num elemento específico

      Deve escolher se pretende que o prompt seja exibido apenas quando Todos os gatilhos selecionados ocorrem ou se é suficiente que Qualquer um deles ocorra.

  3. Intervalo de exibição do prompt (cooldown). Para evitar sobrecarregar os utilizadores, pode definir um intervalo de tempo entre exibições do prompt. Isto determina quantos dias devem passar antes que o prompt seja mostrado novamente ao mesmo utilizador, caso este o tenha ignorado anteriormente.

  4. Digite o título da notificação (até 250 caracteres). Use uma frase atraente ou o nome de sua marca.
  5. (Opcional) Adicione o texto da notificação (até 250 caracteres). Use-o para compartilhar mais detalhes sobre o que você está promovendo, informar seus assinantes de notificação sobre alterações ou notificá-los sobre vendas em andamento ou novos produtos.
  6. (Opcional) Forneça o URL de destino para o qual as pessoas serão redirecionadas depois de clicarem em sua notificação.



  7. (Opcional) Faça upload de uma imagem para a notificação. Você pode usar: JPEG, .JPG, PNG, GIF, WEBP, ICO, CUR, BMP com tamanho não superior a 10 MB. Recomendamos o uso de uma imagem com uma proporção de largura e altura de 2:1.
  8. (Opcional) Faça upload de um ícone para a notificação. Você pode usar: .JPEG, .JPG, .PNG, .GIF, .WEBP, .ICO, .CUR, .BMP de até 10 MB. Para obter melhores resultados, use uma imagem quadrada com pelo menos 196 x 196 px.





  9. (Opcional) Clique em Adicionar botão para criar botões de ação para que os visitantes realizem ações específicas a partir de suas notificações. Em seguida, insira o texto que será exibido no botão, cole a URL que será aberta ao clicar no botão e o ícone do botão que aparecerá ao lado do texto do botão.

  10. À direita, você poderá ver a visualização de sua notificação e testá-la no navegador. A pré-visualização será aplicada ao navegador Google Chrome no MacOS, Windows, e Android. Para outros navegadores e sistemas operacionais, pode haver diferenças visuais. A pré-visualização é puramente informativa, pois pode haver diferenças em determinados dispositivos. Para testar como a notificação funcionará em seu sistema, clique em Pré-visualizar no navegador. Você será solicitado a concordar em receber notificações.
  11. Você poderá visualizar seu público (quantas pessoas assinaram sua notificação).
  12. Você pode decidir se deseja enviar a notificação imediatamente ou programá-la para mais tarde. Ao agendar a notificação, você pode alterar o fuso horário para outro que não seja o padrão em sua conta. Nota: a notificação agendada também pode ser usada no fluxo de trabalho de automação
  13. Você pode clicar em Cancelar, Salvar rascunho para usar a notificação mais tarde, Enviar notificação ou Agendar notificação. Nota: para enviar a notificação imediatamente, você precisa de pelo menos uma permissão para enviar notificações (um assinante de notificação), mas não precisa de uma nesse momento para agendar a notificação para mais tarde.
  14. (Opcional) Você pode definir o tópico da notificação. Isso funciona quando você tem várias notificações com o mesmo tópico. Uma notificação antiga que não tenha sido clicada será substituída por uma nova notificação com o mesmo tópico; no entanto, se um visitante estiver off-line e tiver várias mensagens na fila para entrega com o mesmo tópico, ele receberá apenas a última.

Você será redirecionado para a página de Notificação. Lá você poderá ver o status da notificação, quando a notificação foi criada e enviada, quantas notificações foram enviadas, entregues e clicadas.

Como posso gerenciar minhas notificações?

Para gerenciar os seus pedidos:

  1. Ir para Notificações Web Push.
  2. Clique sobre o nome do seu site.
  3. Na aba Notificações, passe o mouse sobre o menu de ações (elipse vertical) onde você pode:
  • Ver sua notificação.
  • Duplicar
  • Cancelar (se agendada)

Para uma notificação que não foi enviada ou é um rascunho, você tem a opção de:

  • Editar
  • Remover

Artigos relacionados

Recursos populares