Chatbot con IA en tu tienda: cómo integrarlo bien, guía fácil

Un chatbot web con IA se integra bien en una tienda online cuando se carga de forma diferida tras la interacción del usuario, no en el primer pintado, se conecta al catálogo, al estado de pedidos y a las políticas reales de la tienda, ofrece paso a una persona en cuanto se atasca y avisa de forma visible de que es un sistema de IA, como exige el artículo 50 del Reglamento Europeo de IA. Si está mal montado, el daño típico no es el chat en sí: es el bloque de JavaScript de terceros que retrasa el Largest Contentful Paint y el pop-up que tapa el botón de añadir al carrito en móvil.

Soy Oscar Álvarez, fundador de SEOscar, agencia de ecommerce en Barcelona. En casi todas las auditorías que hago me encuentro lo mismo: la tienda ha instalado un chatbot web porque "había que tener IA", nadie mide si vende, y el script del proveedor se carga en el head sumando medio segundo a la primera carga en móvil. El resultado es una herramienta que cuesta dinero, molesta al usuario y además penaliza la velocidad.

Este artículo es lo contrario de ese despliegue. Voy a contarte cómo integro un chatbot para web en una tienda Shopify, WooCommerce o Magento sin tocar el Core Web Vitals, con qué datos hay que alimentarlo para que no invente, cuándo debe pasar la conversación a una persona, qué obliga a poner el artículo 50 del Reglamento Europeo de IA y, sobre todo, cómo saber si está vendiendo o solo entreteniendo.

Qué es un chatbot web con IA y en qué se diferencia de un asistente que vende

Un chatbot web con IA es una interfaz de conversación embebida en el sitio que genera respuestas con un modelo de lenguaje. La diferencia útil para un ecommerce no está en el modelo, está en los datos: un chatbot genérico responde con lo que sabe el modelo, y un agente de ventas IA responde anclado al catálogo, a los precios, al stock y a las políticas reales de esa tienda. El primero improvisa; el segundo puede recomendar un producto concreto con su enlace.

Esa conexión entre el modelo y tus datos se suele montar con una arquitectura RAG (Retrieval Augmented Generation, generación aumentada por recuperación): antes de responder, el sistema busca en tus fuentes y le pasa al modelo los fragmentos relevantes. Lo explico con más detalle en qué es RAG. Sin esa capa, un chatbot ecommerce acaba inventando plazos de envío, y eso genera incidencias de atención al cliente, no ventas.

En SEOscar lo llamamos asistente que vende, no chatbot que molesta. La diferencia práctica es que responde con tu catálogo y tus datos, y que sabe cuándo callarse.

Dónde colocar el chatbot (y dónde molesta de verdad)

El chatbot web debe estar disponible en toda la tienda pero abrirse solo en páginas donde una duda bloquea la compra: ficha de producto, categorías con muchas variantes, página de envíos y devoluciones. Donde molesta de verdad es en el carrito y en el checkout, porque cualquier elemento flotante compite con el botón de pago, y en móvil cuando la burbuja se superpone al botón de añadir al carrito.

Reglas de colocación que aplico en tiendas reales

• Burbuja cerrada por defecto en home y en listados. Nada de apertura automática en la primera visita.

• Apertura proactiva solo en ficha de producto y solo tras una señal de fricción: 25 o 30 segundos de permanencia, scroll por encima del 60% o intención de salida en escritorio.

• Desactivado por completo en checkout. Si tu pasarela es Shopify Checkout o un flujo propio en WooCommerce, cualquier capa flotante ahí resta.

• En móvil, margen inferior suficiente para no tapar el botón principal de añadir al carrito fijo. Lo compruebo con grabaciones de Microsoft Clarity, no a ojo.

• Una sola apertura proactiva por sesión. Si el usuario la cierra, se respeta y no vuelve a saltar.

Cuando reviso mapas de clics en Microsoft Clarity, las zonas de rabia (rage clicks, clics repetidos de frustración) alrededor de la burbuja del chat en móvil son una señal clarísima de que el elemento está tapando algo. Si veo ese patrón, muevo el widget antes de tocar nada más.

Carga diferida: cómo evitar que el chatbot hunda tu velocidad

Un chatbot para web no debe cargarse en el primer pintado de la página. La forma correcta es la carga diferida (lazy load): inyectar el script del proveedor solo cuando el usuario interactúa, con el primer scroll, el primer toque o un movimiento de ratón, o después de que la página esté interactiva. Así el widget no compite por el hilo principal con el contenido que de verdad convierte.

Patrón técnico que uso

• Sustituir el widget real por un botón falso ligero (un div con el icono, de pocos kilobytes) que ya está en el HTML.

• Cargar el script completo al primer evento de interacción o pasados unos segundos del evento load, lo que ocurra antes.

• Añadir el atributo defer y cargar siempre desde el final del body, nunca en el head.

• Hacer preconnect al dominio del proveedor para que, cuando toque cargar, la conexión ya esté abierta.

• En Shopify, hacerlo desde el theme (theme.liquid) y no desde un app embed que no permite controlar el momento de carga. En WooCommerce, encolar el script con wp_enqueue_script y estrategia defer.

Después de implementarlo, mido siempre antes y después: Largest Contentful Paint (LCP, tiempo hasta que se pinta el elemento más grande visible) e Interaction to Next Paint (INP, tiempo de respuesta a la primera interacción) en PageSpeed Insights y, sobre todo, en los datos de campo de Search Console, en el informe de métricas web principales, porque son usuarios reales y no un laboratorio. Si el LCP en móvil se mueve más de una décima al añadir el chat, el script está mal integrado. Trabajo sobre tu plataforma actual, sin migraciones, tanto si estás en Shopify como en WooCommerce.

Qué datos debe leer: catálogo, pedidos y políticas

Un chatbot ecommerce solo es rentable si lee tres fuentes vivas: el catálogo (título, variantes, precio, stock, atributos y URL), el estado de pedidos (para responder a "dónde está mi pedido") y las políticas de la tienda (envíos, plazos, devoluciones, garantías, pagos). Sin esas tres fuentes conectadas, el asistente responde con generalidades y el usuario acaba escribiendo igualmente al correo de atención al cliente.

Catálogo

La forma más limpia de alimentar el catálogo es sincronizarlo por API o por el mismo feed de producto que ya usas para Google Shopping, y actualizarlo cada pocas horas. Si el chatbot recomienda un producto agotado, has creado una frustración que antes no existía. En los proyectos que llevo, la sincronización de stock es el punto que más fallos da y el que más conviene automatizar con un flujo en n8n (herramienta de automatización de procesos con la que conecto sistemas sin depender de un desarrollo a medida completo).

Pedidos

Las consultas de estado de pedido son, en la mayoría de tiendas que audito, el volumen más alto de tickets de soporte. Resolverlas requiere identificar al usuario (correo más número de pedido, o sesión iniciada) y consultar la API de pedidos de Shopify o WooCommerce en tiempo real. Aquí el ahorro de tiempo de tu equipo es visible desde la primera semana, aunque no se traduzca directamente en una venta.

Políticas y contenido editorial

Las páginas de envíos, devoluciones, tallas, cuidados y preguntas frecuentes deben estar indexadas en la base de conocimiento del asistente. Conviene además que la respuesta incluya el enlace a la página original: ayuda al usuario y mantiene la trazabilidad de dónde salió el dato. Si una política cambia, hay que reindexarla; si no, el asistente sigue respondiendo con seguridad algo que ya no es cierto.

Escalado a humano: cuándo y cómo pasar la conversación

Todo chatbot web necesita una salida a persona clara y a un clic. El escalado debe dispararse por tres señales: el usuario lo pide, el sistema no encuentra respuesta en sus fuentes (baja confianza en la recuperación de datos) o la conversación detecta un caso sensible, como una reclamación, un cobro duplicado o un producto defectuoso. Nunca hay que dejar que el modelo improvise en esos tres escenarios.

• Botón visible de "hablar con una persona" desde el primer mensaje, no escondido en un menú.

• Traspaso con contexto: la persona que recoge la conversación ve todo el historial, el producto consultado y el número de pedido si lo hay.

• Fuera de horario, recogida de correo y creación automática de un ticket en tu herramienta (Zendesk, Freshdesk, Gorgias o el correo de siempre) con la conversación adjunta.

• Límite de intentos: si el asistente falla dos veces seguidas en la misma duda, ofrece humano sin que el usuario lo pida.

Aviso de IA obligatorio: qué dice el artículo 50 del Reglamento Europeo de IA

El artículo 50 del Reglamento (UE) 2024/1689, conocido como Reglamento Europeo de Inteligencia Artificial o AI Act, establece obligaciones de transparencia: los sistemas de IA destinados a interactuar directamente con personas físicas deben diseñarse para que el usuario sepa que está interactuando con una IA, salvo que resulte evidente para una persona razonablemente informada. Esas obligaciones de transparencia son aplicables desde el 2 de agosto de 2026, según el calendario de aplicación del propio Reglamento.

En la práctica, para una tienda online eso se traduce en cosas muy sencillas que yo ya implemento por defecto, sin esperar a la fecha límite: un aviso visible al abrir el chat del tipo "Estás hablando con un asistente de IA de [nombre de la tienda]", un enlace a la política de privacidad donde se explique qué se hace con la conversación, y la opción de hablar con una persona. No es solo cumplimiento normativo: declarar que es IA baja las expectativas del usuario y reduce las quejas.

Ojo también con el RGPD (Reglamento General de Protección de Datos): si el chat recoge correo, número de pedido o cualquier dato personal, necesitas base legal, informar del tratamiento y revisar qué hace tu proveedor con esos datos y dónde los aloja. No soy abogado y esto no es asesoramiento legal; si tu volumen de conversaciones es alto, consúltalo con el tuyo.

Cómo medir si el chatbot vende (y no solo si conversa)

Un chatbot web se mide comparando la tasa de conversión y el valor medio de pedido de las sesiones que interactuaron con el chat frente a las que no, y atribuyendo los pedidos que ocurren en los 30 minutos siguientes a una conversación. Las métricas de vanidad, número de conversaciones o mensajes enviados, no dicen nada sobre si la herramienta aporta dinero.

El set mínimo de métricas

• Tasa de interacción: sesiones que abren el chat dividido entre sesiones totales, segmentado por móvil y escritorio.

• Tasa de resolución: conversaciones cerradas sin escalado ni abandono. Si baja, tus fuentes de datos están incompletas.

• Conversión asistida: conversión de las sesiones con chat frente a sesiones sin chat, con el mismo tipo de tráfico. Comparar tráfico de marca con tráfico frío distorsiona el dato.

• Ingresos atribuidos: pedidos con una conversación previa dentro de la ventana que definas. En GA4 lo monto con un evento personalizado (chat_open, chat_message, chat_handoff) y una audiencia.

• Impacto en velocidad: LCP e INP en móvil antes y después, en datos de campo.

• Tickets evitados: consultas de estado de pedido resueltas por el asistente frente al volumen histórico del buzón de soporte.

Mi recomendación práctica: deja el chatbot activo solo en una parte del tráfico durante tres o cuatro semanas, por ejemplo solo en una categoría, y compara. Es la única manera honesta de saber si suma. Si no puedes partir el tráfico, al menos compara periodos equivalentes y controla la estacionalidad. Sin esa disciplina, cualquier conclusión es una corazonada.

Qué haría yo desde SEOscar en tu tienda

Antes de instalar nada, miro los datos que ya tienes: qué buscan los usuarios en el buscador interno, qué preguntas llegan al correo de atención al cliente y en qué páginas se atasca la gente según Clarity. Ese material es el guion real del asistente, y casi siempre revela que la mitad de las dudas se resuelven arreglando una ficha de producto o la página de envíos, sin IA de por medio.

A partir de ahí monto el asistente sobre tu plataforma actual, conectado al catálogo y a los pedidos, con carga diferida, aviso de IA y escalado a persona, y dejo el código y los flujos en tu propiedad. Es parte de lo que hacemos en el agente de ventas IA y encaja con el método de cuatro etapas que aplico en todos los proyectos: diagnóstico, estrategia, implementación y seguimiento mes a mes.

Si quieres saber si un chatbot web tiene sentido en tu caso o si tu dinero rinde más en otra palanca, reserva un diagnóstico con datos reales. Te digo lo que veo, y el plan es tuyo sigas o no conmigo.

Preguntas frecuentes

¿Un chatbot web ralentiza mi tienda online?

Solo si se carga mal. Si el script del proveedor se inyecta en el head o se ejecuta en el primer pintado, añade peso al hilo principal y empeora el Largest Contentful Paint y el Interaction to Next Paint en móvil. Con carga diferida tras la primera interacción del usuario, más preconnect al dominio del proveedor, el impacto en datos de campo es prácticamente nulo. Mide siempre antes y después en Search Console.

¿Dónde no debo poner el chatbot en un ecommerce?

Desactívalo en el checkout y en el carrito, donde cualquier elemento flotante compite con el botón de pago. En móvil, vigila que la burbuja no tape el botón de añadir al carrito fijo. Y no lo abras automáticamente en la home ni en la primera visita: la apertura proactiva tiene sentido en ficha de producto y tras una señal de fricción, como 30 segundos de permanencia o intención de salida.

¿Es obligatorio avisar de que el chat es una inteligencia artificial?

Sí. El artículo 50 del Reglamento (UE) 2024/1689, conocido como Reglamento Europeo de Inteligencia Artificial, obliga a que los sistemas de IA que interactúan directamente con personas estén diseñados para que el usuario sepa que habla con una IA, salvo que sea evidente. Esas obligaciones de transparencia son aplicables desde el 2 de agosto de 2026. En la práctica basta con un aviso visible al abrir el chat y un enlace a la política de privacidad.

¿Qué datos necesita leer un chatbot para web de una tienda?

Tres fuentes vivas: el catálogo con precio, stock, variantes y URL de cada producto; el estado de los pedidos mediante la API de Shopify o WooCommerce; y las políticas de envíos, devoluciones y garantías. Sin esas fuentes conectadas, el modelo improvisa plazos y condiciones, y eso genera incidencias de soporte en vez de ventas. La sincronización de stock conviene automatizarla cada pocas horas.

¿Cómo sé si el chatbot está generando ventas?

Compara la tasa de conversión y el valor medio de pedido de las sesiones que abrieron el chat frente a las que no, con el mismo tipo de tráfico, y atribuye los pedidos ocurridos dentro de los 30 minutos siguientes a una conversación. En GA4 se monta con eventos personalizados tipo chat_open, chat_message y chat_handoff. El número de conversaciones por sí solo no mide nada.

¿Un chatbot con IA puede sustituir a mi equipo de atención al cliente?

No, y plantearlo así suele salir caro. Lo que sí hace bien es absorber el volumen repetitivo, sobre todo consultas de estado de pedido, plazos y devoluciones, y pasar a una persona en cuanto hay una reclamación, un cobro duplicado o un caso sensible. El escalado a humano debe estar a un clic desde el primer mensaje y traspasar todo el contexto de la conversación.

¿Se puede integrar un agente de ventas IA sin cambiar de plataforma?

Sí. SEOscar, agencia de ecommerce en Barcelona, construye sobre la plataforma que ya tienes, sea Shopify, WooCommerce o Magento, sin obligar a migrar. El asistente se conecta por API al catálogo y a los pedidos, se carga de forma diferida desde el theme o encolado con defer, y el código y los flujos quedan en propiedad del cliente.