Investigar problemas comuns ao adicionar uma interface de usuário de chat ao seu site

Este tópico é para desenvolvedores que precisam investigar problemas que podem ocorrer ao configurar um widget de comunicação no site Amazon Connect administrativo.

“Algo deu errado”

Se você vir a seguinte mensagem de erro Algo deu errado ao carregar seu widget de comunicação, abra as ferramentas do navegador para ver os registros de erros.

A seguir, estão os problemas comuns que podem causar esse erro.

400 Solicitação inválida

Se os registros mencionarem uma solicitação inválida 400, há algumas causas possíveis:

• Seu widget de comunicação não está sendo servido em um domínio permitido. Você deve indicar especificamente os domínios em que hospedará seu widget.

• A solicitação para o endpoint não está formatada corretamente. Isso geralmente ocorre somente se o conteúdo do trecho de incorporação tiver sido modificado.

401 Não autorizado

Se os registros mencionarem um 401 não autorizado, isso é um problema com a autenticação JSON Web Token (JWT).

Depois de ter o JWT, você precisa implementá-lo na função de retorno de chamada authenticate. O exemplo a seguir mostra como implementá-lo se você estiver tentando buscar seu token e depois usá-lo:

amazon_connect('authenticate', function(callback) {
  window.fetch('/token').then(res => {
    res.json().then(data => {
      callback(data.data);
    });
  });
});   

Aqui está uma versão mais básica do que precisa ser implementado:

amazon_connect('authenticate', function(callback) {
   callback(token);
});  

Para obter instruções sobre como implementar o JWT, consulte Etapa 3: confirmar e copiar o código e as chaves de segurança do widget de comunicação.

Se você já implementou o retorno de chamada, os seguintes cenários ainda podem causar um 401:

• Resposta inválida

• Token expirado

404 Não encontrado

Um código de status 404 indica que widgetId não pode ser encontrado. Verifique se seu snippet está exatamente como foi copiado do site do Amazon Connect e se nenhum dos identificadores foi alterado.

Se os identificadores não tiverem sido alterados e você estiver vendo um erro 404, entre em contato com o AWS Support.

500 Erro interno do servidor

Isso pode ser causado pelo fato de sua função vinculada ao serviço não ter as permissões necessárias para iniciar o chat. Isso acontece se sua instância do Amazon Connect foi criada antes de outubro de 2018 porque você não tem funções vinculadas a serviços configuradas.

Solução: adicione a política de connect:* sobre a função associada à sua instância do Amazon Connect. Para ter mais informações, consulte Usar perfis vinculados ao serviço para o Amazon Connect.

Se sua função vinculada a serviços tiver as permissões corretas, entre em contato com o AWS Support.

Clientes que não estão recebendo mensagens do agente: em rede ou WebSocket desconectados

Durante uma sessão de bate-papo, um cliente que está usando um aplicativo de bate-papo perde sua rede/conexãoWebSocket . Eles recuperam rapidamente a conexão, mas as mensagens enviadas pelo agente durante esse período não são renderizadas na interface de bate-papo do cliente.

A imagem a seguir mostra um exemplo da interface de bate-papo do cliente e do Painel de Controle de Contato do agente side-by-side. A mensagem enviada pelo agente não é renderizada na sessão de bate-papo do cliente. No entanto, parece ao agente que o cliente o recebeu.

Se o aplicativo de bate-papo do cliente perder sua WebSocket rede/conexão, a interface do usuário do chat deverá fazer o seguinte para recuperar mensagens futuras, bem como mensagens que foram enviadas a ela enquanto estava desconectada:

• Restabeleça a WebSocket conexão para receber mensagens futuras novamente.

• Faça uma solicitação ChatSession.getTranscript (API GetTranscripts) para recuperar todas as mensagens perdidas que foram enviadas enquanto o cliente estava desconectado.

Se o agente enviar uma mensagem enquanto a interface de usuário do chat do cliente estiver desconectada, a mensagem será armazenada com sucesso no back-end do Amazon Connect: a CCP está funcionando conforme o esperado e as mensagens são todas gravadas na transcrição, mas o dispositivo do cliente não consegue receber mensagens. Quando o cliente se reconecta ao WebSocket, há uma lacuna nas mensagens. As futuras mensagens recebidas aparecerão novamente a partir do WebSocket, mas as mensagens de lacuna ainda estarão ausentes, a menos que o código faça uma chamada explícita para a GetTranscriptAPI.

Solução

Use o manipulador de ConnectionEstablished eventos ChatSession.on para chamar a API. GetTranscript O manipulador de chatSession.onConnectionEstablished eventos é acionado quando se WebSocket reconecta. O ChatJS tem uma lógica integrada de pulsação e repetição para a conexão. WebSocket No entanto, como o ChatJS não está armazenando a transcrição, você deve adicionar um código personalizado à interface do usuário do bate-papo para buscar manualmente a transcrição novamente.

O exemplo de código a seguir mostra como implementar onConnectionEstablished a chamadaGetTranscript.

import "amazon-connect-chatjs";

const chatSession = connect.ChatSession.create({
  chatDetails: {
    ContactId: "the ID of the contact",
    ParticipantId: "the ID of the chat participant",
    ParticipantToken: "the participant token",
  },
  type: "CUSTOMER",
  options: { region: "us-west-2" },
});

// Triggered when the websocket reconnects
chatSession.onConnectionEstablished(() => {
  chatSession.getTranscript({
    scanDirection: "BACKWARD",
    sortOrder: "ASCENDING",
    maxResults: 15,
    // nextToken?: nextToken - OPTIONAL, for pagination
  })
    .then((response) => {
      const { initialContactId, nextToken, transcript } = response.data;
      // ...
    })
    .catch(() => {})
});

function loadLatestTranscript(args) {
    // Documentation: https://github.com/amazon-connect/amazon-connect-chatjs?tab=readme-ov-file#chatsessiongettranscript
    return chatSession.getTranscript({
        scanDirection: "BACKWARD",
        sortOrder: "ASCENDING",
        maxResults: 15,
        // nextToken?: nextToken - OPTIONAL, for pagination
      })
      .then((response) => {
        const { initialContactId, nextToken, transcript } = response.data;
        
        const exampleMessageObj = transcript[0];
        const {
          DisplayName,
          ParticipantId,
          ParticipantRole, // CUSTOMER, AGENT, SUPERVISOR, SYSTEM
          Content,
          ContentType,
          Id,
          Type,
          AbsoluteTime, // sentTime = new Date(item.AbsoluteTime).getTime() / 1000
          MessageMetadata, // { Receipts: [{ RecipientParticipantId: "asdf" }] }
          Attachments,
          RelatedContactid,
        } = exampleMessageObj;

        return transcript // TODO - store the new transcript somewhere
      })
      .catch((err) => {
        console.log("CustomerUI", "ChatSession", "transcript fetch error: ", err);
      });
}      

Para ver outro exemplo, veja essa implementação de código aberto em GitHub.