Implementação Front End

Esta página cobrirá como instalar o Javascript do Front End como o mínimo necessário no seu site Front End.
Siga os passos abaixo para começar a implementar a Biblioteca do Front End

Passo 1: Adicionando o Javascript

Este é o Javascript que você precisa adicionar o mais alto possível na sua página, idealmente no cabeçalho.
No script abaixo existem três coisas que você precisa substituir:
  1. Substitua o window.fasttrackbrand pelo nome da marca que você recebeu do seu Gerente de Integração. Este será um valor fixo codificado que será o mesmo para sua marca tanto para staging quanto para produção.
  2. Substitua a variável window.sid dinamicamente com o sid do usuário atualmente logado. Este sid (session id) será o payload no Endpoint de Autenticação da API do Operador.
  3. Na parte inferior do script abaixo existe uma propriedade chamada fastTrackCrmScript.src. Esta tem dois valores diferentes que você deve usar; um para staging e um para produção. Certifique-se de usar o correto dependendo do seu ambiente atual.
A única diferença entre usar Notificações no Site e Notificações no Site + Caixa de Entrada Rica é o objeto de configuração principal.
Notificações no Site e Caixa de Entrada Rica
Notificações no Site sem Caixa de Entrada Rica

Passo 2: Adicionando o HTML

Obrigatório: A div principal que conterá o HTML / Markdown para as Notificações no Site e Caixa de Entrada Rica é este elemento:
Coloque este elemento o mais alto possível no seu documento HTML, idealmente diretamente após abrir a tag <body>. Independentemente de você usar apenas Notificações no Site e/ou a Caixa de Entrada Rica; você precisa desta div.

✅ Pronto com Notificações no Site!

Você implementou agora o mínimo necessário para usar as Notificações no Site no seu front end. Por favor, continue se você quiser implementar suporte para a Caixa de Entrada Rica também ⬇️

Implementando suporte para Caixa de Entrada Rica

Como você pode ter visto, o exemplo de código acima tem duas abas; uma mostrando um exemplo de apenas habilitar as Notificações no Site, e um exemplo habilitando TANTO as Notificações no Site QUANTO a Caixa de Entrada Rica. Ambos estão na mesma biblioteca, mas para habilitar a Caixa de Entrada Rica você precisa dar alguns passos adicionais:
  1. Habilite a funcionalidade Caixa de Entrada Rica no objeto de configuração principal (veja o exemplo de código acima)
  2. Adicione mais dois elementos HTML ao seu código Front End. A div que você adicionou à sua página com id fasttrack-crm tem capacidade de mostrar a própria caixa de entrada, mas na maioria dos casos você vai querer algum tipo de indicador na sua página indicando quantas mensagens não lidas o usuário tem na sua caixa de entrada. Provavelmente você também quer um botão que vai abrir/fechar a caixa de entrada.
Aqui vemos um exemplo de um botão que tem um elemento span filho contendo a contagem de mensagens não lidas. A biblioteca Javascript vai esconder o elemento span para a contagem de não lidas se a contagem de não lidas for zero.
Quando clicar no botão, a função window.FasttrackCrm.toggleInbox() é chamada. Esta função vai abrir a Caixa de Entrada Rica se ela estiver fechada.

✅ Pronto com Caixa de Entrada Rica

Se você chegou até aqui, você implementou tanto as Notificações no Site quanto a Caixa de Entrada Rica.

Passo 3: Aplicar seu próprio Design

Se você quiser sobrescrever os estilos na caixa de entrada, todos os estilos devem estar envolvidos dentro do id CSS #fasttrack-crm. Isso protege o CSS do seu site e permite que você facilmente segmente classes CSS na caixa de entrada. Coloque um bloco de CSS acima da invocação do script de integração.

Exemplo

Se você quiser, pode estilizar as notificações de forma diferente baseado em se é uma Notificação no Site ou uma Mensagem da Caixa de Entrada Rica. Você também pode estilizar toda a mensagem da caixa de entrada / visualização de destaque ou estilizar a lista de mensagens da caixa de entrada dependendo se elas estão lidas ou não lidas. Aqui estão alguns exemplos de CSS:
Por favor, continue sua leitura para a próxima página para verificar a Integração e então mais tarde realizar um Envio de Teste.