Usar IA para mejorar la Atención al Cliente

Presentamos un nuevo producto basado en Visión e Inteligencia Artificial diseñado para simplificar la atención al cliente en tiendas online.

Con el lanzamiento de ultramarinosoctavio.com nos planteamos cómo podíamos mejorar la gestión de las posibles incidencias con los pedidos. Para evitar sobrecargas en el departamento de atención al cliente de Octavio y facilitar que los usuarios reporten problemas, hemos implementado una solución que permite a los clientes grabar videos, mensajes de audio o enviar textos explicando el inconveniente con su pedido.

Soporte al cliente asistido por IA

En lugar de enviar las incidencias directamente al departamento correspondiente, nuestro sistema procesa los videos y audios, extrayendo transcripciones y seleccionando las imágenes más relevantes con Visión Artificial. Un modelo de lenguaje (LLM) analiza la causa del problema y genera un informe exhaustivo y normalizado con los puntos clave y posibles soluciones, ayudando al equipo a responder con mucha más rapidez.

En este caso, aprovechamos la multimodalidad de GPT-4o, que es capaz de interpretar tanto el contenido de las imágenes como la información del pedido y las transcripciones de los mensajes del usuario para dar una respuesta fiable.

El resultado final es la generación de una incidencia que se integra en el flujo de pedidos de la herramienta, incluyendo la información proporcionada por el usuario, un análisis generado por inteligencia artificial y un conjunto de acciones recomendadas por el modelo.

La información que llega a soporte se completa y refina de manera progresiva a través de una serie de pasos. Una ventaja de esta solución es que, incluso si los servicios de IA no estuvieran disponibles, la herramienta sigue funcionando correctamente, enviando al departamento de soporte toda la información disponible hasta el momento.

Además, los gestores de la tienda pueden responder de una forma similar, grabando un mensaje de audio que será transcrito y completado automáticamente a través de Inteligencia Artificial para elaborar una respuesta más clara y detallada para el cliente.

¿Por qué la herramienta no contesta directamente al cliente?

Esta solución no responde directamente al usuario porque su función es asistir al equipo de atención al cliente. Además, esto evita posibles errores que pueden afectar la reputación del negocio. Un caso sonado de esto fue el de la empresa de logística DPD; en su caso, el chatbot de soporte llegó a insultar a los clientes e incluso a la propia empresa.

Como explicamos en nuestro curso de ChatGPT e Inteligencia Artificial para empresas, delegar en una IA las respuestas automáticas a clientes sin supervisión humana es, a día de hoy, una operación más que arriesgada.

Con nuestra aproximación, analizamos y damos contexto a las incidencias de los usuarios con información relevante, pre-generando además las posibles soluciones para facilitar el trabajo del equipo de soporte y que pueda responder de forma mucho más ágil. Y si la IA comete algún error, el personal de soporte podrá descartar las propuestas que no encajen.

Roadmap

Hemos desarrollado un MVP totalmente funcional que cubre las necesidades actuales de nuestro cliente. Esta misma herramienta se puede instalar, con cierta intervención por nuestra parte, en cualquier otro comercio o tienda online basada en WooCommerce.

En un futuro, nos gustaría poder convertirla en un plugin de WordPress independiente, de modo que el usuario sólo tenga que descargarlo, activarlo y usarlo de forma autónoma sin necesidad de nuestra intervención.

Si te interesa este producto para tu empresa o quieres integrar soluciones de automatización que utilicen Inteligencia Artificial, no dudes en escribirnos. Cuéntanos tus problemas o necesidades y estaremos encantados de ayudarte.

Solución técnica

Advertencia: esta sección es para los muy cafeteros. Si te apasiona el ámbito técnico, adelante, sigue leyendo y disfruta. Pero, si lo tuyo no es el código y las tripas de la tecnología, no te preocupes: mejor sáltate esta parte, porque podrías acabar más perdido que un informático en un gimnasio 🤓.

En el front, utilizamos nuestro framework JavaScript favorito, Angular (la versión 19 es la caña), junto con TailwindCSS. Esta combinación nos ha permitido desarrollar un Web Component bajo un enfoque de microfrontend.

Un microfrontend es una arquitectura que permite dividir el frontend en módulos independientes y reutilizables, cada uno desarrollado, desplegado y mantenido por separado. Esto facilita la integración en sistemas heterogéneos.

Este componente se integra de manera transparente en las páginas de pedidos de WooCommerce, aportando interactividad sin alterar la estructura ni la presentación original de la plataforma.

Para acceder a la cámara y el micrófono del dispositivo del usuario, utilizamos WebRTC, lo que permite grabar videos y audios directamente desde el navegador sin necesidad de instalar software adicional. Además, nos aislamos del exterior utilizando shadow DOM, garantizando encapsulación total de los estilos y el comportamiento del componente, evitando conflictos con otros elementos de la página.

En el backend, hemos extendido el API REST de WordPress mediante un endpoint personalizado. Este recibe la información de los usuarios (videos, audios o textos), la almacena en el backend y la procesa mediante un flujo de tareas asíncronas utilizando inteligencia artificial. Con esto nos aseguramos de no bloquear el servidor en ningún caso. Internamente nos comunicamos con el API de OpenAI para resolver todas las tareas de transcripción e inferencia con IA.

Para finalizar os dejamos un diagrama de flujo con los distintos pasos que la herramienta tiene que tomar a la hora de confeccionar el informe de la incidencia.