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
- Faça login na plataforma da Inngage.
- No menu lateral, clique em "Configurações do App".
- Selecione a opção "Web Push".
2. Adicionar a URL do Site
- No campo de configuração para Chrome/Firefox, clique em "Adicionar URL".
- Insira a URL do site no qual deseja configurar o Web Push.
- Confirme a adição da URL.
3. Instalação do SW.js
- Faça o download do script de serviço SW.js.
- 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.
- No painel da Inngage, insira o caminho e o nome do arquivo corretamente.
4. Inserção do Código de Integração
- Acesse as Instruções de Configuração Web Push.
- Copie o código de integração exibido.
- Cole esse código dentro da tag <body> do seu site.
- 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.
