1. Introdução
Última atualização:23/08/2021
Transferência para um agente em tempo real com o Business Messages
Com o recurso de transferência para um atendente humano do Business Messages, seu agente pode iniciar uma conversa como um bot e mudar para um atendente humano no meio da conversa. O bot pode responder a perguntas comuns, como horário de funcionamento, enquanto o atendente humano oferece uma experiência personalizada com mais acesso ao contexto do usuário. Quando a transição entre essas duas experiências é perfeita, os usuários recebem respostas rápidas e precisas, o que resulta em uma taxa de engajamento de retorno mais alta e maior satisfação do cliente.
Este codelab ensina como aproveitar ao máximo o recurso de transferência para um atendente humano.
O que você vai criar
Neste codelab, você vai criar um webhook para seu agente que pode enviar e receber eventos de transferência de agente ativo. Você vai usar uma interface básica fornecida pelo código inicial para testar o que foi criado.
O que você vai aprender
- Como armazenar e gerenciar o estado da conversa.
- Como usar o Business Messages para enviar eventos de transferência de agente ativo.
- Como configurar um webhook e uma interface básica para participar de conversas como um agente.
- Práticas recomendadas para usar a API Business Messages.
Este codelab se concentra no uso da API Business Messages para implementar a transferência de um agente ativo. Você pode ler o código inicial de cada etapa, mas só precisa implementar o código relacionado ao Business Messages.
O que é necessário
- Um agente do Business Messages, incluindo a chave da sua conta de serviço. Siga o guia para criar um agente.
- Uma configuração funcional do Cloud Datastore vinculada ao projeto do GCP do seu agente. Use o guia de início rápido do Cloud Datastore para configurar isso. Não é necessário saber como usar o Cloud Datastore.
- Um computador com o SDK do Google Cloud e o Node.js (versão 10 ou mais recente) instalados.
- Um dispositivo Android (com a versão 5 ou mais recente) ou iOS para testar a experiência do usuário.
- Experiência com programação de aplicativos da Web. Você vai escrever uma pequena quantidade de código JavaScript e talvez precise depurar o que escrever.
2. Criar um bot de eco
Nesta etapa, você vai implantar um representante de bot básico chamado "Echo bot". Esse bot recebe mensagens do usuário, registra-as em uma conversa no Cloud Datastore e "ecoa" a mensagem do usuário respondendo com o mesmo conteúdo. Depois de ter um bot básico e uma infraestrutura de geração de registros, você pode adicionar a eles para criar uma implementação completa de transferência para um atendente humano nas etapas posteriores.
Acessar o código inicial
Em um terminal, clone o código inicial do Live Agent Transfer no diretório de trabalho do seu projeto com o seguinte comando:
git clone https://github.com/google-business-communications/bm-nodejs-live-agent-transfer
Entender o código inicial
Vamos conferir a estrutura do código inicial que você vai usar ao longo do codelab.
Acesse o diretório step-1 e confira o conteúdo dele. Ela contém os seguintes elementos:
- bin: este diretório contém o script de inicialização www, que configura o servidor.
- libs: esse diretório contém
datastore_util.js, que tem métodos convenientes para leitura e gravação no Cloud Datastore. Não é necessário entender como esse arquivo funciona. Basta observar os métodos disponíveis e o que eles fazem. - resources: contém a chave da conta de serviço como um arquivo chamado
credentials.json. - routes: o arquivo
index.jscontém o webhook e todos os métodos auxiliares dele. Este é o arquivo principal com que você vai trabalhar e adicionar conteúdo. - views: esse diretório contém arquivos de modelo EJS para elementos da interface. Ele vai conter mais arquivos nas etapas posteriores.
- app.js, app.yaml, package.json: esses arquivos configuram o aplicativo e as dependências dele.
Antes da implantação, faça o download da chave da conta de serviço do GCP e copie o arquivo de credenciais JSON em cada diretório de recursos no exemplo de código. Faça isso em todas as etapas do codelab.
cp credentials.json bm-nodejs-live-agent-transfer/step-<step number>/resources/credentials.json
Como implantar o código inicial
Em um terminal, acesse o diretório step-1 do exemplo. Em seguida, defina a ferramenta gcloud para usar seu projeto na nuvem do Google Cloud, definindo o ID do projeto que você usou para se registrar nas APIs.
gcloud config set project <PROJECT_ID>
Para implantar o aplicativo, execute o seguinte comando:
gcloud app deploy
Observe o URL do aplicativo implantado na saída do último comando:
Deployed service [default] to [https://PROJECT_ID.appspot.com]
O código inicial que você acabou de implantar contém um aplicativo da Web com um webhook para receber mensagens do Business Messages. O aplicativo ecoa mensagens de volta para o usuário e registra conversas no Cloud Datastore.
Configure seu agente
Acesse a página "Configurações da conta" no Console para desenvolvedores de comunicações comerciais e defina o webhook como o URL do aplicativo implantado. Por exemplo, https://PROJECT_ID.appspot.com/callback/.
Em seguida, na página de informações do agente, configure os tipos de interação principal e secundária como "Bot" e "Humano", respectivamente.
Conversar com o bot de eco
Abra seu agente no Play Console. A página Visão geral vai aparecer para que você possa revisar os detalhes do seu agente. Copie o URL de teste do agente que corresponde ao seu dispositivo de teste móvel. Use esse URL no seu dispositivo móvel para iniciar a plataforma de conversa do agente.
Envie algumas mensagens para interagir com o agente. A superfície de conversa apenas copia o que você diz, o que não é uma experiência muito útil para o usuário. Se ao menos houvesse uma maneira de falar com uma pessoa de verdade!
3. Participar da conversa
Agora vamos analisar a conversa do ponto de vista do atendente. Como um agente humano, você precisa saber algumas coisas sobre a conversa antes de participar, como o ID dela. Também é útil saber se o usuário pediu para falar com um atendente. Nesta etapa, você vai usar uma página básica de CRM (gestão de relacionamento com o cliente) para ver essas informações e participar da conversa como um agente em tempo real.
O código inicial desta etapa adiciona um CRM básico que lista todas as conversas em andamento do agente. Vamos dar uma olhada nesse CRM para ver quais conversas podem precisar da atenção de um atendente humano.
Navegue até o diretório step-2 e implante o app novamente, como fez na etapa anterior.
Ao implantar o app, um URL de destino é exibido. Navegue até esse URL em um navegador para ver uma lista com a conversa que você iniciou na etapa anterior. O estado da conversa é "Gerenciada pelo bot" porque o bot de eco está atuando como representante do nosso agente nessa conversa.
O botão Participar do chat aparece, mas ainda não faz nada. Também não é possível saber se o usuário quer falar com um agente humano.
O Business Messages oferece um evento de solicitação de agente humano que indica quando o usuário quer falar com um agente humano. Você precisa acompanhar esse estado para listá-lo na interface.
Confira o método de callback em index.js. Um comentário TODO indica onde você precisa capturar a solicitação do usuário para um atendente humano e atualizar o estado da conversa.
step-2/routes/index.js
/**
* The webhook callback method.
*/
router.post('/callback', async function(req, res, next) {
...
} else if (requestBody.userStatus !== undefined) {
if (requestBody.userStatus.requestedLiveAgent !== undefined) {
...
// TODO: Update the thread state to QUEUED_THREAD_STATE.
}
}
});
...
});
Você precisa usar os métodos em libs/datastore_utils.js para carregar a conversa atual e atualizar o estado dela para QUEUED_THREAD_STATE.
Se você não tiver certeza do que fazer, confira as soluções. O código inicial inclui um diretório solutions em cada etapa em que você precisa concluir algum código. Esses diretórios contêm uma cópia de todo o app com a implementação completa da etapa em questão.
Depois de concluir a implementação e reimplantar o app, use o menu flutuante na conversa do dispositivo móvel para pedir um atendente.
Agora, se você voltar ao CRM, vai encontrar uma nota na conversa que diz "Agente humano solicitado". Este usuário precisa de ajuda de uma pessoa. Você precisa implementar o endpoint joinConversation para que o botão funcione.
Encontre o outro comentário TODO no método stubbed para /joinConversation.
step-2/routes/index.js
/**
* Updates the thread state and sends a representative join signal to the user.
*/
router.post('/joinConversation', async function(req, res, next) {
let conversationId = req.body.conversationId;
// TODO: Update the thread state to LIVE_AGENT_THREAD_STATE and post a REPRESENTATIVE_JOINED event.
res.json({
'result': 'ok',
});
});
É necessário atualizar o estado da linha de execução novamente, desta vez para LIVE_AGENT_THREAD_STATE. Além disso, você precisa usar o método conversations.events.create da API Business Messages para postar um evento REPRESENTATIVE_JOINED.
Para criar o payload da solicitação, defina os campos descritos na tabela a seguir:
Nome do campo | Dica |
| Defina como 'conversations/{conversationId}'. |
| Gere seu próprio ID aleatório para o evento. |
| Use o método |
| Este é o corpo do evento. Defina o eventType e o representative. |
Consulte a página de referência do método "create" ou a página de referência de eventos para receber ajuda.
Quando terminar a implementação, reimplante o app e clique no botão Participar do chat. Uma caixa de diálogo Entrou na conversa aparece, e o status do chat muda para "Chat ao vivo". Se você olhar a conversa no seu dispositivo móvel, vai ver uma observação no chat informando que o atendente entrou.
Parabéns! Na próxima etapa, vamos mostrar como fazer com que o atendente humano converse com o usuário.
4. Mensagens como um atendente
Agora que você entrou na conversa, é hora de enviar algumas mensagens como atendente.
Navegue até o diretório step-3 e reimplante o app. No CRM, clique na conversa da etapa anterior. Agora você vai ver uma interface de chat básica. Aqui, você pode ver as mensagens do usuário em tempo real.
No entanto, o envio de uma mensagem como o agente ainda não foi implementado. Você precisa fazer isso nesta etapa.
Abra o arquivo routes/index.js e confira os três endpoints recém-adicionados:
/messages: recebe o arquivo de visualizaçãomessages.ejse o renderiza no navegador. Ao clicar em uma conversa no índice, você navega até uma dessas páginas./retrieveMessages: recebe o conteúdo de uma conversa e retorna uma lista formatada de todas as mensagens. A página de mensagens chama esse endpoint periodicamente para mostrar as mensagens mais recentes./sendMessage: envia uma mensagem do representante do atendimento ao cliente para o usuário. A página de mensagens chama isso quando você clica em "Enviar". No momento, ele não está implementado.
Agora, confira o método storeAndSendResponse atual:
step-3/routes/index.js
/**
* Updates the thread, adds a new message and sends a response to the user.
*
* @param {string} message The message content that was received.
* @param {string} conversationId The unique id for this user and agent.
* @param {string} threadState Represents who is managing the conversation for the CRM.
* @param {string} representativeType The representative sending the message, BOT or HUMAN.
*/
async function storeAndSendResponse(message, conversationId, threadState, representativeType) {
...
}
O webhook já usa esse método para enviar respostas do bot de eco. O método primeiro armazena os dados da mensagem recebida no objeto do Cloud Datastore para a conversa. Em seguida, ele envia a mensagem de resposta. Analise o objeto de mensagem criado, principalmente o tipo representativo.
Agora, implemente o endpoint /sendMessage por conta própria. Você pode usar o método storeAndSendResponse atual aqui para fazer a maior parte do trabalho. O importante é lembrar de definir o representante correto.
Depois que isso estiver funcionando, reimplante o app e volte para a conversa no CRM. Agora suas mensagens vão aparecer no histórico de chat. Você também pode ver as mensagens do seu agente aparecerem no dispositivo móvel de teste.
Antes de continuar, entenda como os novos endpoints funcionam. Na próxima etapa, você vai adicionar seu próprio endpoint para sair da conversa.
5. Sair da conversa
Depois de ajudar o usuário com as dúvidas dele, talvez você queira sair da conversa e deixar que ele fale com o bot novamente. No Business Messages, essa mudança é sinalizada por um evento REPRESENTATIVE_LEFT.
Navegue até o diretório step-4, reimplante o app e volte para a conversa. Agora há um link Fechar e sair da conversa na parte de baixo da conversa. Esse link ainda não funciona porque o endpoint leaveConversation não foi implementado.
Confira o arquivo index.js. Há um comentário TODO instruindo você a criar um novo endpoint leaveConversation.
step-4/routes/index.js
/*
* TODO: Create a '/leaveConversation' endpoint that does the following:
* - Updates the thread to BOT_THREAD_STATE.
* - Sends a REPRESENTATIVE_LEFT event.
* - Sends a message to the thread informing the user that they are speaking to the echo bot again.
*
* Hint: You can use the same methods that '/joinConversation' uses.
*/
Para implementar isso, você precisa juntar tudo o que aprendeu no codelab até agora. Esse endpoint precisa fazer o seguinte:
- Atualize a linha de execução para
BOT_THREAD_STATE. - Envie um evento
REPRESENTATIVE_LEFT. - Envie uma mensagem na conversa para informar ao usuário que ele está falando com o bot de eco. Use o método
storeAndSendResponse. Lembre-se de que o representante voltou a serBOT.
A última etapa esclarece o estado da conversa para o usuário. O usuário vê um evento quando um representante sai do chat, mas não necessariamente sabe que está falando com o bot de eco de novo. Ao enviar uma mensagem diretamente do bot, você reduz a confusão do usuário e melhora a experiência.
Agora que o bot está cuidando de tudo, o atendente pode participar de outra conversa. Teste o exemplo de código e o CRM o quanto quiser. Teste algumas ideias diferentes para a experiência de transferência de agente ao vivo da sua empresa e veja o que você consegue criar.
6. Conclusão
Parabéns por concluir o codelab de transferência para um agente humano.
Você criou um agente que pode lidar com transferências para atendentes humanos do início ao fim. Você também aprendeu uma maneira de rastrear o estado da conversa com o Cloud Datastore.
Com a transferência para um atendente em tempo real, você deixa os pedidos comuns para o bot, enquanto os atendentes em tempo real cuidam de consultas mais complexas. Seus usuários vão ficar mais satisfeitos com a nova experiência personalizada e útil, o que aumenta a probabilidade de eles voltarem e recomendarem sua empresa para amigos.
Qual é a próxima etapa?
Confira alguns destes codelabs:
Leia mais
- Revise os princípios básicos da transferência para um agente em tempo real com o guia de transferência de um bot para um agente em tempo real.
- Faça upgrade do seu bot de eco para um bot de perguntas frequentes com o guia do Dialogflow.