Implementação Front-End

Esta página cobrirá como instalar o Javascript do Front End como um mínimo em seu site Front End.
Siga as etapas abaixo para começar a implementar a Biblioteca Front End

Passo 1: Adicionando o Javascript

Este é o Javascript que você precisa adicionar o mais alto possível em sua página, idealmente no cabeçalho.
No script abaixo, há três coisas que você precisa substituir:
  1. Substitua o window.fasttrackbrand pelo nome da marca que foi fornecido pelo seu Gerente de Integração. Este será um valor codificado que será o mesmo para a sua marca tanto para o ambiente de teste quanto para o de produção.
  2. Substitua a variável window.sid dinamicamente pelo sid do usuário logado atualmente. Este sid (id da sessão) será a carga útil no Endpoint de Autenticação da API do Operador.
  3. No final do script abaixo, há uma propriedade chamada fastTrackCrmScript.src. Este tem dois valores diferentes que você deve usar; um para o ambiente de teste e outro para o de 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 & 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 em seu documento HTML, idealmente logo após abrir a tag <body>. Independentemente se você usa apenas Notificações no Site e / ou a Caixa de Entrada Rica; você precisa desta div.

✅ Concluído com Notificações no Site!

Agora você implementou o mínimo para usar as Notificações no Site em 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ê deve 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 AMBAS Notificações no Site E Caixa de Entrada Rica. Ambos estão na mesma biblioteca, mas para habilitar a Caixa de Entrada Rica, você precisa seguir algumas etapas adicionais:
  1. Ative o recurso 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 a capacidade de mostrar a caixa de entrada em si, mas na maioria dos casos, você vai querer algum tipo de indicador em sua página indicando quantas mensagens não lidas o usuário tem em sua caixa de entrada. Provavelmente, você também vai querer um botão que 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 esconderá o elemento span para a contagem de mensagens não lidas se a contagem for zero.
Ao clicar no botão, a função window.FasttrackCrm.toggleInbox() é chamada. Esta função abrirá a Caixa de Entrada Rica se estiver fechada.

✅ Concluído com Caixa de Entrada Rica

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

Passo 3: Aplique seu próprio Design

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

Exemplo

Se quiser, você pode estilizar as notificações de forma diferente com base em se é uma Notificação no Site ou uma Mensagem da Caixa de Entrada Rica. Você também pode estilizar a visualização inteira da mensagem / aviso da caixa de entrada ou estilizar a lista de mensagens da caixa de entrada dependendo se elas sã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 depois realizar um Envio de Teste.