Transferencia de agentes en vivo

1. Introducción

53003251caaf2be5.png 6717b85f57d859d3.png

Última actualización: 23/08/2021

Transferencia a un agente humano con Business Messages

La función de transferencia a un agente humano de Business Messages permite que tu agente inicie una conversación como un bot y cambie a un agente humano (representante humano) a mitad de la conversación. Tu bot puede responder preguntas comunes, como el horario de atención, mientras que tu agente en vivo puede brindar una experiencia personalizada con más acceso al contexto del usuario. Cuando la transición entre estas dos experiencias es fluida, los usuarios obtienen respuestas a sus preguntas de forma rápida y precisa, lo que genera una mayor tasa de participación de usuarios recurrentes y una mayor satisfacción del cliente.

En este codelab, aprenderás a aprovechar al máximo la función de transferencia a un agente en vivo.

Qué compilarás

En este codelab, compilarás un webhook para tu agente que pueda enviar y recibir eventos de transferencia de agentes en vivo. 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 la conversación
  • Cómo usar Mensajes de Negocios para enviar eventos de transferencia a un agente en vivo
  • Cómo configurar un webhook y una IU básica para unirse a conversaciones como agente
  • Son las prácticas recomendadas para usar la API de Business Messages.

Este codelab se enfoca en el uso de la API de Business Messages para implementar la transferencia a un agente en vivo. Puedes leer el código inicial de cada etapa, pero solo debes implementar el código relacionado con Mensajes de Negocios.

Requisitos

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

2. Crea un bot de eco

En este paso, implementarás un representante de bot básico llamado "Echo bot". Este bot toma los mensajes del usuario, los registra en un hilo de conversación en Cloud Datastore y, luego, "repite" el mensaje del usuario respondiendo con el mismo contenido. Una vez que tengas un bot básico y una infraestructura de registro, podrás agregar más elementos para crear una implementación completa de transferencia a un agente en vivo en los pasos posteriores.

Obtén el código de partida

En una terminal, clona el código de inicio de la transferencia de agentes 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

Echemos un vistazo a la estructura del código inicial con la que trabajarás a lo largo del codelab.

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

  • bin: Este directorio contiene la secuencia de comandos de inicio de www que configura el servidor.
  • libs: Este directorio contiene datastore_util.js, que incluye métodos convenientes para leer y escribir en Cloud Datastore. No es necesario que comprendas cómo funciona este archivo. Solo ten 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 plantillas EJS para elementos de la IU. Contendrá 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 para que use tu proyecto de Google Cloud. Para ello, establece 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 devuelve los mensajes al usuario y registra los subprocesos de 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 configura tu webhook en la URL de la aplicación implementada. Por ejemplo, https://PROJECT_ID.appspot.com/callback/.

Luego, en la página Información del agente, configura tus tipos de interacción principal y secundaria como Bot y Humano, respectivamente.

db0cca5b74f999ad.png

Tener una conversación con el bot de eco

Abre tu agente en la consola para desarrolladores. Verás la página Resumen, 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 interfaz conversacional de tu agente.

536313929e5c0b3e.png

Interactúa con el agente enviándole algunos mensajes. La superficie conversacional solo copia lo que dices, lo que no es una experiencia del usuario muy útil. Si tan solo hubiera alguna manera de hablar con una persona real.

3. Cómo unirse a la conversación

Ahora, veamos la conversación desde la perspectiva del agente en vivo. Como agente en vivo, debes saber algunas cosas sobre la conversación antes de unirte, como el ID de conversación. También es útil saber si el usuario solicitó 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 en vivo.

El código de inicio de este paso agrega un CRM básico que enumera todos los hilos de conversación en curso del agente. Veamos ese CRM para ver qué conversaciones podrían requerir la atención de un agente en vivo.

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. Navega 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 "Administrada por el bot" porque el bot de eco 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. Tampoco puedes saber desde esta interfaz si el usuario quiere hablar con un agente humano.

Mensajes de la Empresa proporciona un evento de solicitud de agente humano que indica cuándo el usuario quiere hablar con un agente humano. Debes hacer un seguimiento de ese estado para mostrarlo en la IU.

Consulta el método de devolución de llamada en index.js. Un comentario TODO indica dónde debes captar la solicitud del usuario para un agente en vivo y actualizar el estado del hilo.

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 en libs/datastore_utils.js para cargar el hilo de conversación actual y actualizar su estado a QUEUED_THREAD_STATE.

Si no sabes qué hacer, consulta las soluciones. El código de partida incluye un directorio solutions en cada paso en el que debes completar algo de código. Estos directorios contienen una copia de toda la app con la implementación completa para el paso determinado.

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

e58d2b77e9c64492.png

Ahora, si vuelves al CRM, deberías ver una nota en el hilo de conversación que diga "Se solicitó un agente en vivo". Este usuario necesita ayuda de una persona. Debes implementar el extremo joinConversation para que el botón funcione.

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

Deberás volver a actualizar el estado del subproceso, 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 que se describen en la siguiente tabla:

Nombre del campo

Hint

parent

Establece este parámetro en “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. Debes establecer los campos eventType y representative.

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

Cuando termines con la implementación, vuelve a implementar la app y haz clic en el botón Unirse al chat. Aparecerá un diálogo Te uniste 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 indica que se unió el 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 hora de enviar algunos mensajes como agente humano.

Navega al directorio step-3 y vuelve a implementar la app. En el CRM, haz clic en el hilo de 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, aún no se implementó el envío de mensajes como el agente. Debes completar ese paso.

Abre el archivo routes/index.js y observa los tres extremos recién agregados:

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

Ahora, consulta 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 eco. Primero, el método almacena los datos del mensaje entrante en el objeto de Cloud Datastore para la conversación. Luego, envía el mensaje de respuesta. Observa con atención el objeto de mensaje que crea, en especial el tipo representativo.

Ahora, implementa el extremo /sendMessage por tu cuenta. Aquí puedes usar el método storeAndSendResponse existente para realizar la mayor parte del trabajo. Lo importante es recordar establecer el representante correcto.

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

49aca3df6b196c50.png

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

5. Cómo abandonar la conversación

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

Navega al directorio step-4, vuelve a implementar la app y regresa al hilo de conversación. Ahora hay un vínculo Cerrar y abandonar la conversación en la parte inferior del hilo. 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 indicarle al usuario que está hablando con el bot de eco. Usa el método storeAndSendResponse. Recuerda que el representante volvió a ser BOT.

El último paso 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 nuevamente. Si envías un mensaje directamente desde el bot, reduces la confusión del usuario y mejoras la experiencia.

Ahora que el bot se encarga de todo, tu agente en vivo puede unirse a otra conversación. Prueba el código de muestra y el CRM tanto como quieras. Prueba algunas ideas diferentes que tengas para la experiencia de transferencia de agentes en vivo de tu empresa y observa qué se te ocurre.

6. Conclusión

¡Felicitaciones por completar el codelab de transferencia a un agente en vivo!

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

Con la transferencia a un agente en vivo, podrás dejar las solicitudes comunes a tu bot, mientras que tus agentes en vivo se encargan de las consultas más complejas. Tus usuarios estarán más satisfechos con la nueva experiencia personalizada y útil, lo que aumentará la probabilidad de que regresen y recomienden tu empresa a sus amigos.

¿Qué sigue?

Consulta algunos de estos codelabs:

Lecturas adicionales

Documentos de referencia