Transferencia de agentes en vivo

1. Introducción

53003251caaf2be5.png 6717b85f57d859d3.png

Última actualización: 23/08/2021

Transferencia de agente en vivo con Business Messages

La función de transferencia con agente humano de Business Messages permite que los agentes inicien una conversación como bot y la cambien con un agente humano (representante humano). Tu bot puede responder preguntas comunes, como el horario de atención, mientras que tu agente humano puede proporcionar una experiencia personalizada con más acceso al contexto del usuario. Cuando la transición entre estas dos experiencias es fluida, los usuarios reciben respuestas a sus preguntas de forma rápida y precisa, lo que da como resultado una tasa de participación de retorno más alta y una mayor satisfacción del cliente.

En este codelab, aprenderás a aprovechar al máximo la función de transferencia de agentes humanos.

Qué compilarás

En este codelab, compilarás un webhook para tu agente que puede enviar y recibir eventos de transferencia de agentes humanos. Usarás una IU básica proporcionada por el código de partida para probar lo que compilaste.

49aca3df6b196c50.png

Qué aprenderás

  • Cómo almacenar y administrar el estado de las conversaciones
  • Cómo usar Business Messages para enviar eventos de transferencia de agentes humanos.
  • Cómo configurar un webhook y una IU básica para unirse a conversaciones como agente.
  • Prácticas recomendadas para usar la API de Business Messages.

Este codelab se enfoca en el uso de la API de Business Message para implementar la transferencia de agentes humanos. Puedes leer el código de partida para cada etapa, pero solo necesitas implementar el código relacionado con Business Messages.

Requisitos

  • Un agente de Business Messages, incluida la clave de tu cuenta de servicio. Puedes crear un agente si sigues la guía Crea un agente.
  • Una configuración de Cloud Datastore en funcionamiento vinculada al proyecto de GCP de tu agente. Puedes usar la guía de inicio rápido de Cloud Datastore para configurar esto. No necesitas saber usar Cloud Datastore.
  • Una computadora que tenga instalados el SDK de Google Cloud y Node.js (versión 10 o posterior)
  • Un dispositivo Android (versión 5 o posterior) o iOS para probar la experiencia del usuario
  • Tener experiencia en programación de aplicaciones web Escribirás una pequeña cantidad de código JavaScript y es posible que debas depurar lo que escribas.

2. Cómo crear un bot de echo

En este paso, implementarás un representante básico de bots llamado "Echo bot". Este bot recibe mensajes de usuarios, los registra en un subproceso de conversación en Cloud Datastore y, luego, responde con el mismo contenido para responder con el mismo contenido. Una vez que tengas una infraestructura básica de bot y registros, puedes agregarla para crear una implementación completa de transferencia de agente humano en los pasos posteriores.

Obtén el código de inicio

En una terminal, clona el código de partida para la transferencia de agente en vivo en el directorio de trabajo de tu proyecto con el siguiente comando:

git clone https://github.com/google-business-communications/bm-nodejs-live-agent-transfer

Comprende el código de partida

Veamos la estructura del código de partida con la que trabajarás durante todo el codelab.

Navega al directorio step-1 y visualiza su contenido. Contiene los siguientes elementos:

  • bin: Este directorio contiene la secuencia de comandos de inicio www que configura el servidor.
  • libs: Este directorio contiene datastore_util.js, que incluye métodos convenientes para leer y escribir desde Cloud Datastore. No es necesario que entiendas cómo funciona este archivo. Solo debes tener en cuenta los métodos disponibles y lo que hacen.
  • resources: Contiene la clave de tu cuenta de servicio como un archivo llamado credentials.json.
  • routes: El archivo index.js contiene el webhook y todos sus métodos auxiliares. Este es el archivo principal con el que trabajarás y al que agregarás contenido.
  • views: este directorio contiene archivos de plantilla EJS para elementos de IU. Contiene más archivos en pasos posteriores.
  • app.js, app.yaml, package.json: Estos archivos configuran la aplicación y sus dependencias.

Antes de la implementación, descarga la clave de tu cuenta de servicio de GCP y copia el archivo de credenciales JSON en cada directorio de recursos del código de muestra. Haz esto en cada paso del codelab.

cp credentials.json bm-nodejs-live-agent-transfer/step-<step number>/resources/credentials.json

Implementa el código de partida

En una terminal, navega al directorio step-1 de la muestra. Luego, configura la herramienta de gcloud a fin de usar tu proyecto de Google Cloud. Para ello, configura el ID del proyecto que usaste para registrarte en las APIs.

gcloud config set project <PROJECT_ID>

Para implementar la aplicación, ejecuta el siguiente comando:

gcloud app deploy

Observa la URL de la aplicación implementada en el resultado del último comando:

Deployed service [default] to [https://PROJECT_ID.appspot.com]

El código de partida que acabas de implementar contiene una aplicación web con un webhook para recibir mensajes de Business Messages. La aplicación repite los mensajes al usuario y registra los subprocesos de los mensajes en Cloud Datastore.

Configura tu agente

Navega a la página Configuración de la cuenta en la Consola para desarrolladores de Business Communications y establece el webhook a la URL de la aplicación implementada. Por ejemplo, https://PROJECT_ID.appspot.com/callback/.

Luego, en la página de información del agente, configura los tipos de interacción principal y secundario para que sean Bot y Human, respectivamente.

db0cca5b74f999ad.png

Cómo tener una conversación con el bot de eco

Abre tu agente en Play Console. Verás la página Descripción general, que te permite revisar los detalles de tu agente. Copia la URL de prueba del agente que coincida con tu dispositivo móvil de prueba. Usa esta URL en tu dispositivo móvil para iniciar la superficie de conversación de tu agente.

536313929e5c0b3e.png

Envía algunos mensajes para interactuar con el agente. La plataforma conversacional solo copia lo que dices; no es una experiencia del usuario muy útil. ¡Ojalá hubiera alguna manera de hablar con una persona real!

3. Uniéndose a la conversación

Ahora, veamos la conversación desde la perspectiva de tu agente humano. Como agente humano, debes conocer algunos aspectos de la conversación antes de unirte, como el ID. También es útil saber si el usuario ha solicitado hablar con un agente humano. En este paso, usarás una página básica de CRM (Administración de relaciones con clientes) para ver esta información y unirte a la conversación como agente humano.

El código de partida para este paso agrega un CRM básico que enumera todos los subprocesos de conversación en curso para el agente. Revisemos ese CRM para ver qué conversaciones pueden requerir la atención de un agente humano.

Navega al directorio step-2 y vuelve a implementar la app como lo hiciste en el paso anterior.

Cuando implementes la app, verás una URL de destino. Ve a esta URL en un navegador para ver una lista con el hilo de conversación que comenzaste en el paso anterior. Actualmente, el estado de la conversación es "Bot-managed" porque el bot de Echo actúa como representante de nuestro agente en esta conversación.

8f624e9befb8e827.png

Aparece el botón Unirse al chat, pero aún no realiza ninguna acción. Esta interfaz tampoco permite saber si el usuario desea hablar con un agente humano.

Business Messages proporciona un evento solicitado por un agente en vivo que indica cuándo el usuario quiere hablar con un agente humano. Debes realizar un seguimiento de ese estado para incluirlo en la IU.

Observa el método de devolución de llamada en index.js. Un comentario TODO indica dónde debes capturar la solicitud del usuario de un agente humano y actualizar el estado del subproceso.

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.
      }
    }
  });
...
});

Debes usar los métodos de libs/datastore_utils.js para cargar la conversación actual y actualizar su estado a QUEUED_THREAD_STATE.

Si no sabes bien qué hacer, echa un vistazo a las soluciones. El código de partida incluye un directorio solutions debajo de cada paso en el que debes completar parte del código. Esos directorios contienen una copia de toda la app con la implementación completa para el paso en cuestión.

Una vez que completes la implementación y vuelvas a implementar la app, usa el menú ampliado en la conversación de tu dispositivo móvil para solicitar un agente humano.

e58d2b77e9c64492.png

Ahora, si vuelves a la CRM, deberías ver una nota en la conversación con el mensaje "Se solicitó el agente humano". Este usuario necesita la ayuda de un ser humano. Debes implementar el extremo joinConversation para que el botón funcione.

Busca el otro comentario TODO en el método con stub 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',
  });
});

Debes actualizar el estado del subproceso nuevamente, esta vez a LIVE_AGENT_THREAD_STATE. Además, debes usar el método conversations.events.create de la API de Business Messages para publicar un evento REPRESENTATIVE_JOINED.

Para crear la carga útil de la solicitud, debes configurar los campos descritos en la siguiente tabla:

Nombre del campo

Hint

parent

Configura esto como "conversations/{conversationId}".

eventId

Genera tu propio ID aleatorio para el evento.

auth

Usa el método initCredentials proporcionado.

resource

Este es el cuerpo del evento en sí. Debes establecer el eventType y el representativo.

Consulta la página de referencia del método create o la página de referencia de eventos para obtener ayuda.

Cuando hayas terminado con la implementación, vuelve a implementar la app y haz clic en el botón Join chat. Aparecerá el diálogo Unión a la conversación y el estado del chat cambiará a “Chat en vivo”. Si miras la conversación en tu dispositivo móvil, verás una nota en el chat que indicará que se unió tu agente en vivo.

¡Felicitaciones! En el siguiente paso, veremos cómo hacer que tu agente humano hable con el usuario.

4. Envía mensajes como agente humano

Ahora que te uniste a la conversación, es momento de enviar algunos mensajes como el agente humano.

Navega al directorio step-3 y vuelve a implementar la app. En el CRM, haz clic en la conversación del paso anterior. Ahora deberías ver una interfaz de chat básica. Desde aquí, puedes ver los mensajes del usuario en tiempo real.

46dd083f08f43961.png

Sin embargo, el envío de un mensaje como agente aún no está implementado. Debes completarlo en este paso.

Abre el archivo routes/index.js y observa los tres extremos agregados recientemente:

  • /messages: Obtiene el archivo de vista messages.ejs y lo renderiza en el navegador. Cuando haces clic en una conversación del índice, navegas a una de estas páginas.
  • /retrieveMessages: Obtiene el contenido de los mensajes de una conversación y muestra una lista con formato de todos los mensajes de la conversación. La página de mensajes llama periódicamente a este extremo para mostrar los últimos mensajes.
  • /sendMessage: Envía un mensaje del representante del agente humano al usuario. La página de mensajes lo llama cuando haces clic en Enviar. Actualmente, no está implementado.

Ahora, observa el método storeAndSendResponse existente:

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) {
...
}

El webhook ya usa este método para enviar respuestas desde el bot de echo. El método primero almacena los datos del mensaje entrante en el objeto de Cloud Datastore para la conversación. Luego, envía el mensaje de respuesta. Observa de cerca el objeto de mensaje que crea, especialmente el tipo representativo.

Ahora, implementa el extremo /sendMessage por tu cuenta. Puedes usar el método storeAndSendResponse existente aquí para hacer la mayor parte del trabajo. Lo importante es recordar elegir al representante correcto.

Una vez que esto funcione, vuelve a implementar la app y regresa a tu conversación en el CRM. Ahora puedes ver que tus mensajes aparecen en el historial de chat. También puedes ver que los mensajes de tu agente aparecen en tu dispositivo móvil de prueba.

49aca3df6b196c50.png

Antes de continuar, asegúrate de comprender cómo funcionan los extremos nuevos. En el siguiente paso, agregarás tu propio extremo para abandonar la conversación.

5. Abandonando la conversación

Después de ayudar al usuario con sus preguntas, puedes abandonar la conversación y permitir que el usuario vuelva a hablar con el bot. En Business Messages, este cambio se indica mediante un evento REPRESENTATIVE_LEFT.

Navega al directorio step-4, vuelve a implementar la app y regresa a la conversación. Ahora aparece el vínculo Cerrar y abandonar la conversación en la parte inferior de la conversación. Este vínculo aún no funciona porque el extremo leaveConversation no está implementado.

ef4ad8107c3fff2.png

Observa el archivo index.js. Hay un comentario “TODO” que te indica que crees un extremo leaveConversation nuevo.

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 esto, debes reunir todo lo que aprendiste en el codelab hasta ahora. Este extremo debe hacer lo siguiente:

  • Actualiza el subproceso a BOT_THREAD_STATE.
  • Envía un evento REPRESENTATIVE_LEFT.
  • Envía un mensaje en la conversación para decirle al usuario que está hablando con el bot de echo. Usa el método storeAndSendResponse. Recuerda que el representante volvió a cambiar a BOT.

En el último paso, se aclara el estado de la conversación para el usuario. El usuario ve un evento cuando un representante abandona el chat, pero no necesariamente sabrá que está hablando con el bot de eco otra vez. Si envías un mensaje directamente desde el bot, reduces la confusión de los usuarios y mejoras la experiencia.

Ahora que el bot se está encargando de las cosas, tu agente humano puede unirse a otra conversación. Intenta usar el código de muestra y la CRM tanto como quieras. Pon a prueba algunas ideas diferentes que tengas sobre la experiencia de transferencia de agentes humanos de tu empresa y comprueba qué se les ocurre.

6. Conclusión

Felicitaciones por completar el codelab de transferencia de agentes humanos.

Creaste un agente que puede controlar de principio a fin las transferencias de agentes humanos. También aprendiste una forma de hacer un seguimiento del estado de una conversación con Cloud Datastore.

Con la transferencia de agentes humanos, podrás dejar las solicitudes comunes a tu bot, mientras que los agentes humanos se encargarán de las consultas más complejas. Tus usuarios estarán más satisfechos con la nueva experiencia personalizada y útil, lo que aumentará las probabilidades de que regresen y recomienden tu empresa a amigos.

¿Qué sigue?

Consulta algunos de estos codelabs:

Lecturas adicionales

Documentos de referencia