Transferencia de agentes en vivo

1. Introducción

Última actualización: 23/08/2021

Transferencia a un agente humano con Mensajes de Negocio

La función de transferencia a un agente en vivo de Business Messages permite que tu agente inicie una conversación como un bot y cambie a un agente en vivo (representante humano) en medio de la conversación. Tu bot puede manejar preguntas comunes, como los horarios de atención, mientras que tu agente en vivo 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 con rapidez y precisión, lo que genera una mayor tasa de participación de los usuarios recurrentes y una mayor satisfacción del cliente.

En este codelab, aprenderás a aprovechar al máximo la función de transferencia de agentes 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 que proporciona 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 la conversación
• 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 unirte a conversaciones como agente
• Prácticas recomendadas para usar la API de Business Messages

En este codelab, se enfoca en usar la API de Business Messages para implementar la transferencia de agentes en vivo. Puedes leer el código de partida de cada etapa, pero solo debes implementar el código relacionado con los mensajes de la empresa.

Requisitos

• Un agente de Business Messages, incluida la clave de tu cuenta de servicio Para crear un agente, sigue las instrucciones de la guía para crear 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 configurarlo. No necesitas saber 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
• 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 Echo

En este paso, implementarás un representante de bot básico llamado "bot de Echo". Este bot toma los mensajes de los usuarios, los registra en un subproceso de conversación en Cloud Datastore y, luego, responde con el mismo contenido para “repetir” el mensaje del usuario. Una vez que tengas un bot básico y una infraestructura de registro, podrás agregarlo para crear una implementación completa de transferencia de agentes en vivo en los pasos posteriores.

Obtén el código de inicio

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

Veamos 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 contiene métodos convenientes para leer y escribir en Cloud Datastore. No es necesario que comprendas cómo funciona este archivo. Solo toma nota de 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 realizar 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 para 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 gcloud para usar 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 repite los mensajes al usuario y registra las conversaciones 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 tu aplicación implementada. Por ejemplo, https://PROJECT_ID.appspot.com/callback/.

Sugerencia: Si necesitas un repaso sobre 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 como Bot y Humano, respectivamente.

Tener una conversación con el bot de Echo

Abre tu agente en Play Console. 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 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 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 de tu agente en vivo. Como agente en vivo, debes conocer algunos aspectos de 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 en vivo. 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 partida de este paso agrega un CRM básico que enumera todas las conversaciones 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 ficha con el subproceso de conversación que iniciaste en el paso anterior. Actualmente, el estado de la conversación es "Administrado por un bot" porque el bot de Echo actúa como representante de nuestro agente en esta conversación.

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 en vivo.

Los mensajes empresariales proporcionan un evento solicitado por un agente humano que indica cuándo el usuario quiere hablar con un agente humano. Debes hacer un seguimiento de ese estado para incluirlo en la IU.

Consulta el método de devolución de llamada en index.js. Un comentario TODO indica dónde debes detectar la solicitud del usuario de un agente en vivo 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 de 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, consulta las soluciones. El código inicial incluye un directorio solutions en cada paso en el que debes completar un 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 en 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" en el menú ampliado, asegúrate de que tu agente tenga configurado un tipo de interacción humana en la consola de Mensajes para empresas.

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

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

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 que se describen en la siguiente tabla:

Nombre del campo	Hint
parent	Establece 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. Debes configurar eventType y representative.

Para obtener ayuda, consulta la página de referencia del método create 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á 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ó tu agente en vivo.

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

4. Cómo enviar mensajes como agente en vivo

Ahora que te uniste a la conversación, es hora de enviar algunos mensajes como el agente en vivo.

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.

Sin embargo, aún no se implementó el envío de mensajes como agente. 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 mensajes más recientes.
• /sendMessage: Envía un mensaje del representante del agente en vivo al usuario. La página de mensajes llama a esta función 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 bot de Echo. Primero, el método 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 atención el objeto de mensaje que crea, en particular el tipo de representante.

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 establecer el representante correcto.

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

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 salir de la conversación

Después de ayudar al usuario con sus preguntas, te recomendamos que abandones la conversación y 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 subproceso de conversación. Ahora, hay un vínculo Cerrar y salir de la conversación en la parte inferior de la conversación. Este vínculo aún no funciona porque no se implementó el extremo leaveConversation.

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 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 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 sabe que está hablando con el bot de Echo de nuevo. Cuando 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 de las ideas que tienes para la experiencia de transferencia de agentes en vivo de tu empresa y observa qué puedes lograr.

6. Conclusión

¡Felicitaciones por completar el codelab de transferencia de agentes en vivo!

Creaste un agente que puede controlar las transferencias de agentes en vivo 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á las probabilidades de que regresen y recomienden tu empresa a sus amigos.

¿Qué sigue?

Consulta algunos de estos codelabs:

• Compra en línea y retiro en la tienda, parte 1
• Compra en línea, retiro en la tienda, parte 2

Lecturas adicionales

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

Documentos de referencia

• Método: conversations.events.create
• Método: conversations.messages.create
• Recurso: Evento
• Representante