Acesse a aba de "Configurações'' em seu dashboard e selecione "Serviços".
Em seguida, selecione a funcionalidade "Browser Push":
Passo 1: Configure a integração com o Firebase
Nessa etapa iremos configurar o SDK e a chave do Firebase.
Para isso, será necessário realizar essas configurações no ambiente do Firebase: Configurando o Firebase:
Ao clicar em Alterar configuração você irá inserir a apiKey, authDomain, projectId, storageBucket, messagingSenderId, appId, measurementId que constam no Firebase.
Essas informações seguem um padrão chamado JSON, que é como se fosse uma lista organizada de itens. Cada item tem um "nome" (como apiKey) seguido por dois pontos e, depois, o valor associado a esse nome (que fica entre aspas, como "AIzaSyA...").
As informações são organizadas entre chaves {} e separadas por vírgulas.
Você só precisa copiar e colar essas informações exatamente como estão entre as chaves {}, sem mudar nada. Isso permitirá que seu sistema se conecte corretamente ao Firebase.
Depois, em Chave Firebase clique em Enviar o arquivo JSON, você será direcionado para o ambiente do app.dito para inserir o JSON gerado no Firebase.
Tela onde irá inserir o JSON no app.dito:
Passo 3: Após inserir o arquivo no app.dito, retorne ao CRM e siga para o restante da configuração
No passo seguinte, você deve selecionar HTTPS e seguir as recomendações indicadas:
Passo 4: Insira o domínio do site e o caminho onde o arquivo será adicionado, exemplo: https://www.minhaloja.com.br/root/files/service-worker.js
Clicando no botão “Fazer download” um arquivo com o nome service-worker.js será gerado.
Esse arquivo precisa ser adicionado em uma URL que permita acessar o conteúdo do arquivo baixado. Algo seguindo o padrão: https://www.minhaloja.com.br/service-worker.js ou https://www.minhaloja.com.br/files/service-worker.js, o caminho depende de plataforma para plataforma.
Observação: No caso de sites próprios é necessário solicitar ao time técnico responsável a inclusão do arquivo direto no código.
No exemplo abaixo, estamos utilizando a integração com a plataforma VTEX:
Passo 5: Acesse a plataforma de e-commerce Vtex e siga os passos abaixo:
Acesse o portal da marca na Vtex.
Siga para Configurações da Loja > Checkout.
3. Selecione o “Site” que corresponda ao seu e-commerce.
4. Certifique-se de que esteja acessando o site correto para a inserção do código da Dito.
OBS: Você pode verificar isso no caminho do print abaixo ou pela própria URL que apontará para o site selecionado Sites > Nome do Site > Editar Checkout Pedidos PáginaNa URL, o seu site irá aparecer no fim /admin/portal/#/sites/<nome do site>/code
5. Clique em “Código” > Novo
6. Selecione a opção “Upload de arquivo”
7. No campo “Nome do arquivo” digite: service-worker.js
8. No campo Arquivo: escolher o arquivo que possui a nossa sdk (aquele nomeado como: service-worker e que foi baixado na configuração do Browser Push no Dashboard).
9. Pronto, clique em Criar.
10. Para conferir se inseriu corretamente, faça uma busca em seu navegador com o seguinte:
https://www.xxxxxx.com.br/files/service-worker.js
O retorno esperado é a chave do dashboard, conforme exemplo abaixo:
Passo 6: O próximo passo será configurar a mensagem que aparecerá para o cliente aceitar receber as notificações:
Passo 7: Esse passo não é obrigatório. Nele, você pode inserir as páginas de seu site que não quer que a notificação apareça:
Passo 8: Por fim, você deve ligar o botão de Coletar Assinaturas, quando tiver certeza que todos os passos anteriores foram concluídos com sucesso.
Pronto, agora seu Browser Push está configurado para receber Tokens dos clientes e enviar notificações.
Limitações Técnicas:
Atualmente, há uma limitação em todos os navegadores no iOS, incluindo Chrome, Firefox e outros, que impede a utilização do método requestPermission() diretamente nos navegadores, já que todos utilizam o motor WebKit, o mesmo do Safari.
Isso afeta a coleta de tokens e o disparo de notificações do tipo browser push. Como resultado, a funcionalidade de notificações por push está restrita aos sites que foram salvos na tela inicial dos dispositivos.
De acordo com as regras de compatibilidade descritas pela Mozilla, o suporte ao método requestPermission() é parcial em dispositivos iOS, sendo necessário que o site seja instalado como um aplicativo da web para solicitar permissões de notificação.
Para mais informações, acesse: https://developer.mozilla.org/en-US/docs/Web/API/Notification/requestPermission_static
Qualquer dúvida, é só nos acionar pelo nosso chat ao vivo! 😁