Configurar Web Push

Configuração de Web Push na Inngage
Written by Inngage
Updated 1 week ago

Introdução

O Web Push permite o envio de notificações para usuários que acessam um site, mesmo quando não estão ativos na página. Essa configuração é feita diretamente na plataforma Inngage e exige algumas etapas para que esteja funcional.

Passo a Passo para Configurar o Web Push

1. Acesso às Configurações

  1. Faça login na plataforma da Inngage.
  2. No menu lateral, clique em "Configurações do App".
  3. Selecione a opção "Web Push".

2. Adicionar a URL do Site

  1. No campo de configuração para Chrome/Firefox, clique em "Adicionar URL".
  2. Insira a URL do site no qual deseja configurar o Web Push.
  3. Confirme a adição da URL.

3. Instalação do SW.js

  1. Faça o download do script de serviço SW.js.
  2. Adicione esse script ao diretório raiz do seu site, garantindo que ele esteja acessível através da URL: https://www.SEUSITE.com.br/sw.js.
  3. No painel da Inngage, insira o caminho e o nome do arquivo corretamente.

4. Inserção do Código de Integração

  1. Acesse as Instruções de Configuração Web Push.
  2. Copie o código de integração exibido.
  3. Cole esse código dentro da tag <body> do seu site.
  4. Certifique-se de incluir o CDN da Inngage para o serviço funcionar corretamente.

5. Configuração de Pré-Permissão

Ative a opção "Pré-permissão" para otimizar a taxa de opt-in dos usuários.

Recomendação: Ativar essa opção aumenta a taxa de opt-in, pois permite que o usuário receba uma introdução amigável antes do prompt do navegador.

1. Ativar Pré-Permissão

  • Função: Habilita ou desabilita a exibição do pop-up de pré-permissão antes do navegador solicitar o consentimento oficial para notificações.

2. Tempo de Espera

  • Função: Define o tempo (em segundos) que o pop-up de pré-permissão levará para aparecer após o usuário carregar a página.
  • Exemplo: Se configurado para 20 segundos, o pop-up aparecerá 20 segundos após a página carregar.
  • Recomendação: Ajustar um tempo adequado para que o usuário tenha tempo de interagir com o site antes de ser solicitado a permitir notificações.

3. Mensagem Personalizada

  • Função: Define o texto que será exibido no pop-up de pré-permissão.
  • Exemplo: “Ative as notificações para receber nossas novidades.”
  • Recomendação: Utilize uma mensagem clara e objetiva para incentivar o usuário a aceitar.

4. Personalização do Botão de Aceite

  • Texto do Botão de Aceite: Define o texto do botão que o usuário deve clicar para permitir as notificações.

    Exemplo: “Quero receber”

  • Cor do Botão: Escolha a cor de fundo do botão de aceite.

    Exemplo: #0091FF (Azul)

  • Cor do Botão em Hover: Escolha a cor do botão quando o usuário passa o mouse sobre ele.

    Exemplo: #58B7FF (Azul mais claro)

  • Cor do Texto do Botão: Define a cor do texto dentro do botão de aceite.

    Exemplo: #FFFFFF (Branco)

5. Personalização do Botão de Cancelamento

  • Texto do Botão de Cancelar: Define o texto do botão que permite ao usuário recusar as notificações.

    Exemplo: “Não obrigado”

  • Cor do Texto do Botão: Define a cor do texto dentro do botão de cancelamento.

    Exemplo: #000000 (Preto)

Resumo das Personalizações

Parâmetro Descrição Exemplo
Ativar Pré-Permissão Exibe um pop-up antes do pedido oficial do navegador Sim/Não
Tempo de Espera Tempo antes do pop-up aparecer 20s
Mensagem Personalizada Texto exibido no pop-up "Ative as notificações para receber novidades"
Texto do Botão de Aceite Texto do botão de aceite "Quero receber"
Cor do Botão de Aceite Cor do botão principal #0091FF
Cor do Botão em Hover Cor do botão ao passar o mouse #58B7FF
Cor do Texto do Botão de Aceite Cor do texto dentro do botão #FFFFFF
Texto do Botão de Cancelar Texto do botão de recusa "Não obrigado"
Cor do Texto do Botão de Cancelar Cor do texto do botão de recusa #000000

Próximos Passos:

Após realizar essas configurações na Inngage, é necessário integrar o Web Push ao seu site. Para isso, siga as instruções técnicas detalhadas nos links abaixo:

Caso tenha dúvidas, consulte nossa central de ajuda ou entre em contato com o suporte da Inngage.

Did this answer your question?