Transferencia de agentes en vivo

1. Introducción

Última actualización: 23/08/2021

Transferencia de agentes en vivo con Business Messages

La función de transferencia de agentes en vivo de Business Messages permite que tu agente inicie una conversación como un bot y, en medio de la conversación, cambie a un agente humano (representante humano). Tu bot puede responder preguntas comunes, como el horario de atención, mientras que el 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 responden sus preguntas con rapidez y precisión, lo que genera una tasa de participación más alta y una mayor satisfacción del cliente.

En este codelab, aprenderás a usar 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 pueda enviar y recibir eventos de transferencia de agente en vivo. Usarás una IU básica proporcionada por el código de partida para probar lo que compilaste.

Nota: En este codelab, se supone que ya te registraste como socio y que recibiste la aprobación de nuestro equipo de asistencia al cliente. Si aún no lo hiciste, regístrate en Business Messages y espera la aprobación antes de comenzar.

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 en vivo
• 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 en vivo. Puedes leer el código de partida para cada etapa, pero solo debes implementar código relacionado con Business Messages.

Requisitos

• Un agente de Business Messages, incluida la clave de tu cuenta de servicio Puedes crear un agente siguiendo la guía Crea un agente.
• Una configuración en funcionamiento de Cloud Datastore vinculada al proyecto de GCP de tu agente. Puedes usar la guía de inicio rápido de Cloud Datastore para configurar esta opción. No necesitas saber cómo usar Cloud Datastore.
• Una computadora que tenga instalados el SDK de Google Cloud y Node.js (versión 10 o posterior)
• Un dispositivo Android (con la 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. Crea un echo bot

En este paso, implementarás un representante básico de bots llamado “Echo bot”. Este bot toma mensajes del usuario, los registra en una conversación de Cloud Datastore y, luego, “hace eco” al mensaje del usuario respondiendo con el mismo contenido. Una vez que tengas un bot básico y una infraestructura de registro, puedes agregarlo para crear una implementación completa de transferencia de agente en vivo en los pasos posteriores.

Obtén el código de inicio

En una terminal, clona el código de partida de 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

Observemos 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 contiene métodos útiles para leer y escribir en Cloud Datastore. No necesitas entender cómo funciona este archivo. Solo observa 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 cual agregarás elementos.
• views: Este directorio contiene archivos de plantilla EJS para elementos de la IU. Este contendrá más archivos en los pasos posteriores.
• app.js, app.yaml, package.json: Estos archivos configuran la aplicación y sus dependencias.

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

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

Sugerencia: Si necesitas ayuda para configurar o descargar tu clave de servicio, consulta la guía de Google Cloud para administrar cuentas de servicio.

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 en el registro con 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 reenvía 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 configura tu webhook con la URL de la aplicación implementada. Por ejemplo, https://PROJECT_ID.appspot.com/callback/.

Sugerencia: Si necesitas repasar cómo configurar tu webhook, Consulta la sección Configura tu webhook en la guía de configuración de Business Messages.

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

Cómo mantener una conversación con el echo bot

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 plataforma de conversación de tu agente.

Envía algunos mensajes para interactuar con el agente. La plataforma de conversación solo copia lo que dices, lo que no brinda una experiencia del usuario muy útil. ¡Si existiera alguna forma de hablar con una persona real!

3. Uniéndose a la conversación

Veamos la conversación desde la perspectiva de tu agente humano. Como agente humano, debes conocer algunos aspectos sobre la conversación antes de unirte, como el ID de la 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 un agente humano.

El código de partida para este paso agrega una CRM básica que enumera todos los subprocesos de conversación en curso para el agente. Analicemos ese CRM para ver qué conversaciones podrían 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. Navega a esta URL en un navegador para ver una ficha con el hilo de conversación que comenzaste en el paso anterior. Actualmente, el estado de la conversación es “Administrada por un bot” porque el bot de eco actúa como representante de nuestro agente en esta conversación.

Aparecerá el botón Unirse al chat, pero todavía no realizará ninguna acción. Tampoco se puede ver desde esta interfaz 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 desea hablar con un agente humano. Debes realizar un seguimiento de ese estado para enumerarlo en la IU.

Observa el método de devolución de llamada en index.js. Un comentario TODO indica el lugar en el que debes captar la solicitud del usuario de un agente humano y actualizar el estado de la conversación.

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 subproceso de conversación actual y actualizar su estado a QUEUED_THREAD_STATE.

Si no estás seguro de qué hacer, echa un vistazo a las soluciones. El código de partida incluye un directorio solutions debajo de cada paso en el que necesitas completar parte del código. Estos directorios contienen una copia de toda la app con la implementación completa del paso determinado.

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

Sugerencia: Si no ves la opción "Enviar un mensaje a un agente en vivo". Como opción en tu menú ampliado, asegúrate de que tu agente tenga configurado un tipo de interacción humana en la consola de Business Messages.

Ahora, si regresas a CRM, deberías ver una nota en la conversación que dice "Se solicitó un agente humano 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 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 volver a actualizar el estado del subproceso, pero 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 representante.

Para obtener ayuda, consulta la página de referencia del método de creación o la página de referencia de eventos.

Cuando termines con la implementación, vuelve a implementar la app y haz clic en el botón Unirse al chat. Aparecerá el 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 de que tu agente humano se unió.

¡Felicitaciones! En el siguiente paso, veremos cómo lograr 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 agente humano.

Navega al directorio step-3 y vuelve a implementar la app. En el sistema de 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.

Sin embargo, el envío de un mensaje como agente sigue sin implementar. Debes completar eso 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 del mensaje 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 Mensajes lo llama cuando haces clic en Enviar. Por el momento, 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 echo bot. El método primero almacena los datos del mensaje entrante en el objeto de Cloud Datastore de la conversación. Luego, envía el mensaje de respuesta. Observa con detenimiento el objeto de mensaje que crea, especialmente en el tipo representativo.

Ahora, implementa el extremo /sendMessage por tu cuenta. Puedes usar el método storeAndSendResponse existente aquí 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 CRM. Ahora puedes ver tus mensajes en el historial de chat. También puedes ver que los mensajes de tu agente aparezcan en tu dispositivo móvil de prueba.

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, es posible que quieras abandonar la conversación y permitir 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 a tu 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.

Observa el archivo index.js. Hay un comentario TODO que te indica que crees un nuevo extremo 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 esto, debes reunir todo lo que aprendiste hasta ahora en el codelab. Este extremo debería 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 echo bot. Usa el método storeAndSendResponse. Recuerda que el representante volvió a cambiar a 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 echo bot 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 está manejando las cosas, tu agente humano puede unirse a otra conversación. Juega con el código de muestra y la CRM tanto como quieras. Pon a prueba algunas ideas diferentes que tengas para la experiencia de transferencia de agentes humanos de tu empresa y observa lo que se te ocurra.

6. Conclusión

Felicitaciones por completar el codelab sobre transferencias de agentes humanos.

Creaste un agente que puede controlar las transferencias de 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 de agentes humanos, podrás dejarle las solicitudes comunes al bot, mientras tus agentes humanos 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á las probabilidades de regresar y recomendar tu negocio a amigos.

¿Qué sigue?

Consulta algunos de estos codelabs:

• Compra en línea, retiro en tienda (parte 1)
• Compra en línea, retiro en tienda (parte 2)

Lecturas adicionales

• Revisa los aspectos básicos de la transferencia de agentes en vivo con la guía Transferencia de un bot a un agente humano.
• Actualiza tu echo bot a un bot de preguntas frecuentes con la guía de Dialogflow.

Documentos de referencia

• Método: contacts.events.create
• Método: contacts.messages.create
• Recurso: Event
• Representante