Editor de notificações web push

O editor de notificações web push permite criar, de forma visual, o conteúdo das notificações web push que serão enviadas aos seus clientes a partir da sua conta, por meio de workflows criados para este propósito.

 

Como acessar?

Você pode acessar o editor de notificações web push através de duas rotas:

1. A partir de “Conteúdo > Notificações web push”. Clique em  Criar nova notificação web push para gerar uma nova push, ou em Mais    e selecione Editar para modificar uma notificação existente.

Editor de notificações web push 2025 - 1-min.png

2. A partir do nó "Mostrar notificação web push" de um workflow, clicando em   (Editar configuração do nó). Clique em  Criar novo conteúdo ou em   Editar para modificar uma notificação existente.

Editor de notificações web push 2025 - 2-min.png

 

Interface

O editor de notificações web push é composto por 3 blocos:

1. Pré-visualização, salvar e tradução: para salvar ou descartar as alterações realizadas, utilizar a tradução automática para traduzir o conteúdo, excluí-lo ou pré-visualizar o resultado final do conteúdo que será exibido pelo navegador.

2. Painel de design: para construir visualmente a notificação push utilizando o editor visual.

3. Ferramentas: para configurar todas as propriedades da notificação e adicionar o conteúdo. Este painel pode ser expandido ou contraído clicando em  (Abrir ferramentas) ou  (Fechar ferramentas).

Editor de notificações web push 2025 - 3-min.png

 

Funcionamento

O editor de notificações web push é baseado em um construtor visual que permite criar notificações de forma rápida e fácil, exibindo as alterações em tempo real.

 

1. Adicionar conteúdo e editar as opções gerais

No painel de Ferramentas (3), clique na aba Geral para editar o conteúdo e as opções gerais do aspecto da push, que irá mostrar as alterações em tempo real no painel de design.

Os elementos e parâmetros a serem definidos são:

  • Título da notificação: texto que aparecerá na parte superior da mensagem:

Editor de notificações web push 2025 - 4-min.png

  • Mensagem da notificação: corpo principal do texto da notificação.

Editor de notificações web push 2025 - 5-min.png

  • Adicionar uma URL para redirecionamento: link para a página indicada. Deve ser um link absoluto.
  

Se você selecionar a caixa "Fechar ao clicar", a notificação será fechada quando o contato clicar nela.

Editor de notificações web push 2025 - 6-min.png

  • URLs de imagens
    • URL do ícone: é a imagem que aparece no canto superior esquerdo, como um ícone.
    • URL da imagem: é a imagem em destaque. Aparece no modelo ocupando a metade inferior da notificação. 
    • URL do ícone da bandeja de notificações: é a imagem que aparecerá na bandeja de notificações do dispositivo onde você receber a push.

Editor de notificações web push 2025 - 7-min.png

  • Propriedades avançadas:
    • Adicionar um padrão de vibração: ritmo de vibração específico que você pode adicionar a esta notificação.
    • Requer interação do contato: seletor para configurar se o contato deve interagir com o dispositivo para interromper a vibração.

    • É uma notificação silenciosa: seletor para configurar que a notificação não emita nenhum som.

Editor de notificações web push 2025 - 8-min.png

 

2. Adicionar uma versão compacta

No painel de Ferramentas (3), clique na aba Versão Compacta para adicionar uma versão reduzida ao conteúdo da sua notificação.

  

A versão compacta é um tipo de notificação web push reduzida, em que a imagem em destaque não é exibida. 

Os elementos que a compõem são:

  • Mensagem compacta: corpo principal do texto da notificação que aparecerá na janela pop-up.
  • URL do ícone compacto: imagem que aparecerá no canto superior esquerdo, como um ícone.

Editor de notificações web push 2025 - 9-min.png

 

3. Adicionar variáveis à notificação push

As duas versões da notificação push oferecem a possibilidade de adicionar variáveis em qualquer um dos elementos da push para personalizá-las.

Para isso, clique em {} (Definir uma variável dinâmica) no local onde deseja incluir a variável.

Editor de notificações web push 2025 - 10-min.png

Atribua um nome à variável para identificá-la e um valor padrão para definir o valor que deseja que assuma quando não houver nenhum dado armazenado no campo correspondente. 

Editor de notificações web push 2025 - 11-min.png

 

4. Adicionar ações extras

Adicione até dois links com ações alternativas à principal da sua notificação push. Para isso, no painel de Ferramentas (3), vá para a aba Ações e clique em   Adicionar ação.

Editor de notificações web push 2025 - 12-min.png

Você poderá adicionar à sua ação um título, uma URL e um ícone, além de ativar a opção de fechar a push quando o contato clicar na ação.

Editor de notificações web push 2025 - 13-min.png

 

5. Traduzir o conteúdo

No painel de visualização, tradução e salvamento (1), você pode traduzir a notificação para qualquer idioma desejado. Para isso, clique no botão (Traduzir).

Editor de notificações web push 2025 - 14-min.png

Na janela pop-up, clique na lista suspensa e selecione o idioma para o qual deseja traduzir a web push. 

Clique em Confirmar para que o Connectif traduza automaticamente o conteúdo.

Editor de notificações web push 2025 - 15-min.png

 

6. Visualizar resultado final e salvar

No painel de visualização, tradução e salvamento (1), você poderá ver o resultado final da sua notificação push. Para isso, clique em   (Visualizar) e escolha se deseja visualizar a versão completa ou a versão compacta.

Editor de notificações web push 2025 - 16-min.png

Uma vez que o resultado do design esteja adequado, clique em   Salvar para salvar as alterações da notificação.

Editor de notificações web push 2025 - 17-min.png

 

 

Parabéns!
Você chegou ao final da lição.

  

Ficou com dúvidas?
Lembre-se que você tem à disposição nossos especialistas no Connectif. Para entrar em contato com eles, basta abrir um ticket de Suporte clicando no botão azul de "Ajuda" no seu dashboard.

 


Continue aprendendo!

Para aproveitar ao máximo sua conta no Connectif, recomendamos continuar com os seguintes artigos: