Cómo agregar un agente de IA a tu sitio web (que de verdad responda)

Por qué "agregar un agente de IA" casi nunca trata de la instalación

Paso buena parte de la semana mirando qué escribe la gente en los buscadores antes de comprar software de soporte, y "cómo agregar un agente de IA a un sitio web" es una de esas frases en las que la búsqueda es más pequeña que la pregunta. Quien la escribe rara vez se atasca con la etiqueta de script. Se atasca tres semanas después, cuando el bot le dice a alguien que el plazo de devolución es de 60 días (son 30), o cuando responde "habla con una persona" con un formulario de contacto.

Cuando le hice a ChatGPT esta misma pregunta como lo haría un responsable de soporte, fue directo a tres búsquedas sobre widgets web, fuentes de conocimiento y traspaso, y terminó su respuesta preguntando qué helpdesk uso. Es el instinto correcto. El chatbot de IA que va en tu sitio tiene tres capas, y solo la de arriba es la que se pega.

• El widget. La burbuja, sus colores, el saludo. Todos los proveedores de esta guía lo instalan igual por debajo: una etiqueta de script pegada en tus páginas.
• El conocimiento. Desde qué responde. Tu base de conocimiento, el centro de ayuda, las páginas de producto, los PDF, los tickets anteriores. Esta es la capa que decide si las respuestas son correctas.
• Las salidas. Qué pasa cuando no puede responder, o cuando el cliente necesita que le consulten su pedido. Un widget sin salida es el "formulario de contacto sofisticado" que todos los clientes han aprendido a detestar.

He visto esto pasar en despliegues reales de eesel. En una prueba, un comprador hizo una evaluación metódica de 67 pruebas, calificó como sólidas las respuestas basadas en conocimiento y aun así se fue porque el widget "is quite slow and often gets stuck" (es bastante lento y a menudo se atasca). En otra, el mensaje de un equipo de tecnología médica al agente de eesel fue "I copied the snippet and it doesnt work in netlify" y luego "It worked". Ambos son problemas de la capa de instalación. Ninguno es donde se va la mayor parte del tiempo.

La diferencia entre un chatbot y un agente aquí es práctica, no de marketing. Un bot basado en reglas sigue un guion; un agente de IA lee tu contenido, responde con sus propias palabras y puede realizar acciones acotadas, como crear un ticket. Ese poder extra es la razón por la que el conocimiento y las salidas importan más.

Qué preparar antes de pegar nada

Haz estas cuatro cosas antes de que el widget se acerque a una página en producción. Cada una toma una tarde, y saltarse cualquiera es la forma de terminar con un bot que se retira dos semanas después del lanzamiento.

1. Lista las 20 a 30 preguntas que debe responder bien

Saca el último mes de tickets de chat y correo y anota las preguntas que más se repiten. Serán tu conjunto de pruebas más adelante. Si usas Zendesk, la guía de exportación de tickets explica cómo sacar las conversaciones completas; ese mismo conjunto sirve también como material de entrenamiento.

2. Limpia el conocimiento que va a leer

Todos los proveedores que revisé responden desde más o menos las mismas fuentes: artículos del centro de ayuda, páginas web rastreadas, archivos subidos y, a veces, tickets anteriores. El problema es que un rastreador lee todo, incluido el comunicado de prensa de 2022 con precios viejos. Una reseña en G2 de un agente de IA para sitios web lo describió con claridad:

"With all of the content that Piper crawls in the initial onboarding phase, it makes for a hefty QA experience prior to launch... It would be helpful to have a filter to option to see the content publish date so we can exclude older blogs and press releases that we don't want Piper referencing."

Stephanie C., G2

Haz primero una auditoría de la base de conocimiento. Elimina o excluye lo que esté desactualizado y escribe los tres o cuatro artículos que tus preguntas principales necesitan pero no tienen.

3. Decide adónde van las preguntas difíciles

Nombra el destino antes del lanzamiento: una cola del helpdesk, una bandeja compartida o un agente en vivo en horario laboral. Luego nombra los disparadores. Los habituales son un cliente que pide hablar con una persona, una pregunta sin buena fuente y cualquier tema que nunca quieras que la IA maneje sola (reembolsos, asuntos legales, seguridad de la cuenta). La guía de buenas prácticas de traspaso explica más sobre cómo redactar estas reglas.

4. Escribe lo que nunca debe prometer

Este es el paso que la mayoría de los equipos se salta. Cuando SE Ranking configuró su agente de chat en vivo, las instrucciones fueron explícitas: responder al instante, en el idioma del cliente, sin prometer cosas que el equipo no pudiera cumplir, como que un agente en vivo se uniría ahora, un descuento o un reembolso. Poner esa lista por escrito convierte una preocupación difusa sobre la alucinación de la IA en tres o cuatro reglas comprobables.

"As a customer, I just want the information I need. While I don't want to talk to a chatbot, I also don't want to talk to a human - and for the same reason: they usually don't have the info I need."

mrandish, Hacker News

Ese comentario es todo el encargo. A los clientes no les molestan los bots; les molesta no obtener la respuesta.

Elige tu vía de instalación

Hay cinco formas realistas de poner un agente de IA en un sitio web, y la correcta depende mucho más de tu helpdesk que de si tu sitio usa WordPress o Webflow. Elige la situación más parecida a la tuya.

Elige tu configuración para ver la vía de instalación, dónde va el código y la trampa en la que más cae la gente en esa vía.

Vía 1: activa la IA dentro del widget de chat que ya tienes

Si tu equipo ya atiende el chat en un helpdesk, empieza aquí. Diría que es la vía más subestimada, porque es la que ya trae construida la capa de "salidas". La IA responde primero y lo que no puede resolver cae en la misma cola, con las mismas etiquetas y SLA con los que tu equipo trabaja hoy.

Así es como los cuatro grandes helpdesks ponen su propio agente de IA en el widget del sitio web, todo según su propia documentación:

Algunos detalles de esa documentación que cambian cómo configurarías las cosas:

• Zendesk cobra por resolución automatizada, $1.50 comprometido y $2.00 pago por uso en su página de precios, con 5 incluidas por agente al mes en Suite Team y 10 en Suite Professional. Desde el 18 de mayo de 2026, Zendesk clasifica los resultados en niveles de resolución, y solo se cobra una resolución verificada. La guía de agentes de IA de Zendesk cubre la configuración en profundidad.
• Freshworks cuenta como sesión cada interacción dentro de una ventana de 24 horas. Dos cosas sorprenden a la gente: un mensaje de bienvenida de un flujo de inicio de conversación consume una sesión aunque el visitante nunca responda, y probar el agente mientras lo construyes también consume sesiones. Más en el desglose del consumo de sesiones de Freddy.
• Gorgias pone el AI Agent en el chat solo cuando hay una tienda Shopify conectada; su documentación dice que las tiendas de BigCommerce, Magento y WooCommerce no son compatibles. Un ticket que la IA resuelve por completo se factura con la tarifa del ticket y la de automatización, según la documentación de facturación de Gorgias. Consulta el artículo sobre precios de Gorgias AI Agent para ver cifras desarrolladas.
• HubSpot te permite fijar un porcentaje de cobertura de conversaciones, de modo que el agente tome solo algunos chats al principio, y elegir el horario. Es un lanzamiento suave integrado. La guía del Breeze Customer Agent cubre el resto.

El agente integrado no es tu única opción en esta vía. También puedes conectar una IA aparte al mismo widget. Eso fue lo que hizo SE Ranking: eesel atiende el chat en vivo de Zendesk de SE Ranking, Planable y SE Visible, un agente por producto, cada uno alimentado por su propio centro de ayuda. Entre el 8 de agosto y el 8 de septiembre de 2026 atendió unos 2,100 chats en vivo y pasó unos 1,260 al equipo, con cada chat terminando en una respuesta o en un traspaso limpio. El equipo también pidió una etiqueta ai_handled en cada ticket que eesel toca, para que la contención se cuente en Zendesk en lugar de adivinarse. Elegir entre la IA integrada o una capa encima es una disyuntiva real, y la guía de IA integrada frente a capa externa la explica.

Vías 2 y 3: agrega un widget de chat con IA independiente con una etiqueta de script

Si hoy no tienes chat, o el chat de tu helpdesk no está en tu sitio, agregarás un widget independiente. Todos funcionan igual por debajo: un script corto carga el código del proveedor, que dibuja la burbuja y se comunica con sus servidores.

Este es el de eesel, de la documentación del chat bubble:

<script>
(function(){
  var script = document.createElement('script');
  script.src = 'https://cdn.eesel.ai/loader.js';
  script.async = true;
  script.onload = function() {
    if (window.EeselWidgetWithTrigger) {
      window.EeselWidgetWithTrigger({ triggerId: 'YOUR_TRIGGER_ID' });
    } else {
      window.__EESEL_WIDGET_V2_CONFIG__ = { EESEL_TRIGGER_ID: 'YOUR_TRIGGER_ID' };
    }
  };
  document.head.appendChild(script);
})();
</script>

El loader es asíncrono, así que no retrasa la página, y los ajustes que guardas llegan a la burbuja en vivo en unos 30 segundos, de modo que solo lo pegas una vez. Tidio funciona con la misma idea: una línea de JavaScript, un plugin de WordPress o una app de Shopify, y su documentación indica usar un solo método de instalación, no ambos. Voiceflow te pide publicar primero una versión de tu agente y luego copiar el fragmento desde la pestaña Widget.

Dónde lo pegas, y si tu plan te lo permite, varía según la plataforma. Aquí está dónde va en cada una, tomado de la documentación de cada plataforma:

El de Shopify merece una segunda mirada. La propia documentación para desarrolladores de Shopify dice que los bloques de app embed se desactivan después de instalar una app hasta que el comerciante los activa en el editor de temas. Ese único valor por defecto es la razón más común por la que alguien le dice a un proveedor "lo instalé y no aparece nada". El resumen de apps de chatbot para Shopify cubre cuáles se encargan de esto por ti.

Cuando el script carga pero el chat no funciona

Si tu sitio envía un encabezado Content Security Policy, un widget pegado puede fallar de una forma que parece un producto roto. MDN lo divide en tres reglas de CSP: script-src decide si el script carga, connect-src decide si puede llegar a los servidores del proveedor y frame-src decide si puede abrirse una ventana de chat en un iframe. Si falta solo connect-src, obtienes una burbuja que se abre y nunca responde. Para eesel, la documentación indica permitir https://cdn.eesel.ai para scripts y conexiones.

Vías 4 y 5: cuando no tienes helpdesk o no puedes tocar el código

Dos situaciones paralizan a muchos equipos: no hay un helpdesk al que traspasar, o el sitio web es de otra persona y los cambios tardan un mes.

Para lo primero, elige un widget cuya salida no necesite un helpdesk. La burbuja de eesel puede traspasar por correo, o creando un ticket en un helpdesk si tienes uno, y la regla se define en lenguaje natural ("escala siempre a una persona si alguien menciona un reembolso"). Cuando traspasa, pide el nombre y el correo del visitante, crea el ticket con un resumen del chat como primer mensaje y lo etiqueta.

Para lo segundo, al principio olvídate del sitio. Un enlace de chat público es una página de chat alojada por el proveedor que enlazas desde tu navegación, pie de página o centro de ayuda. El de eesel no tiene inicio de sesión, así que cualquiera con el enlace puede chatear; eso está bien para contenido de soporte público y mal para cualquier cosa específica de una cuenta. Un inline embed es el punto medio: un iframe (de 420 por 600 píxeles por defecto) pegado en una sola página, como tu página de contacto. La documentación de eesel señala que algunos editores de páginas eliminan los iframes al guardar, así que pégalo en la plantilla de la página.

Vía 6: la ruta para desarrolladores, CLI y API

Si tu sitio es una app propia, o prefieres que tu configuración viva en código, carga el script una sola vez en el layout raíz de la app en lugar de en cada página. La documentación de eesel lo muestra para Next.js con next/script en app/layout.tsx, y para WordPress autoalojado la función de WordPress wp_enqueue_script con in_footer y defer evita que el widget bloquee la página.

El cambio más interesante es que la configuración ya no necesita un panel. La CLI de eesel (@eesel/cli, Node 18.17 o superior) es el mismo agente que configurarías en el panel, manejado desde una terminal. Una persona puede ejecutarla, un script puede automatizarla y un agente de programación como Claude Code, Cursor o Codex puede ejecutar toda la configuración porque cada comando imprime JSON:

npx @eesel/cli init chat-bubble --site https://your-site.com   # no account needed
eesel login                                                     # keep the workspace
eesel files upload ./refund-policy.pdf
eesel chat "what's our refund policy?"
eesel chat "run a simulation on our last 100 tickets and tell me what you would have got wrong"

init chat-bubble elige o crea un agente, agrega el canal de chat bubble e imprime el fragmento para incrustar más un enlace de prueba alojado; un workspace anónimo recibe $5 de uso durante 7 días. Los comandos se pueden volver a ejecutar sin riesgo, las escrituras admiten --dry-run y los comandos de configuración son gratuitos (solo se cobra el chat). Dos límites honestos: el estilo de la burbuja y la redacción de sus reglas de traspaso aún no tienen comando, así que eso se hace en el chat del panel. El workspace también es un servidor MCP, por lo que eesel mcp token imprime una línea claude mcp add lista para usar. Si quieres la IA sin ningún widget, la guía de soporte headless cubre ese patrón, y el artículo sobre CLI de agentes de IA compara las CLI de distintos proveedores.

Paso a paso: agrega un agente de IA a tu sitio web

Sea cual sea la vía que elegiste, la secuencia es la misma. Este es el orden que seguiría, con la instalación deliberadamente cerca del final.

Paso 1: conecta el conocimiento

Apunta el agente a tu centro de ayuda, a las páginas públicas que responden preguntas de clientes y a cualquier PDF o documento con políticas. Los límites varían: Freshworks permite 10 URL por agente y hasta 3,000 páginas por sitio, HubSpot puede rastrear hasta 5,000 URL de un dominio, y el escaneo de páginas prioritarias de Tidio se detiene en 100 páginas. HubSpot también advierte que las fuentes privadas no se citarán, pero su contenido aún podría aparecer en las respuestas, así que piénsalo antes de subir documentos internos. La guía sobre cómo entrenar a un agente de soporte con IA profundiza más.

Paso 2: conecta los sistemas que debe consultar

El conocimiento explica tu política de devoluciones. Solo una integración puede decirle a un cliente dónde está su pedido. Si vendes en línea, conecta tu tienda para que el agente pueda leer pedidos, existencias y precios en vivo; si eres SaaS, piensa en el estado de la cuenta. Empieza solo con lectura. La propia documentación de eesel aconseja dejar al principio los reembolsos, las cancelaciones y todo lo que cuesta dinero detrás de una aprobación. La automatización de WISMO es el primer caso de uso clásico.

Paso 3: escribe las reglas y el traspaso

Escribe como instrucciones la lista de "nunca prometer" de antes y luego define las salidas: quién recibe el traspaso, por qué canal y qué dice el agente mientras ocurre.

Todos los proveedores de aquí traspasan ante una petición directa de una persona. Las diferencias están en los valores por defecto. Gorgias tiene señales de traspaso integradas que no se pueden desactivar, como el enojo y las amenazas legales. Tidio no descuenta de tu cuota de Lyro si Lyro traspasa de inmediato. Freshworks detiene al agente y pasa los chats a agentes en vivo cuando se agotan las sesiones. Lo que debes revisar en el tuyo es la línea que ve el visitante mientras espera, porque "Alguien te responderá" sin recoger un correo es un callejón sin salida.

"If the only "customer support" a company offers is to talk to a chatbot, I think of that as the exact same thing as not having customer support at all, even if the chatbot can be talked into letting me talk to a human."

JohnFen, Hacker News

Paso 4: pruébalo con preguntas reales antes de que alguien lo vea

Ejecuta tus 20 a 30 preguntas de antes, más las incómodas: el mensaje enojado, las dos preguntas en una, la pregunta sobre un producto que descontinuaste. El Evaluate agent de Freshworks ejecuta hasta 50 consultas por lote y puede importar conversaciones resueltas del pasado. La simulación de eesel ejecuta el agente contra tickets reales del pasado, puntúa cada respuesta y sugiere cambios en las instrucciones. En cualquier caso, lee tú mismo las respuestas incorrectas. La guía sobre cómo probar un agente de IA tiene un plan de pruebas más completo.

El fallo que buscas es el error con aplomo:

"The problem with 'hallucination' is quite apparant and the bot WILL generate a totally wrong answer with that greatest of eloquence and confidence, which might (rightfully so) throw some people off."

Rik H., Capterra

Paso 5: instala el widget

Ahora pega el fragmento, usando la vía del widget interactivo de arriba. Compruébalo en móvil, comprueba que no quede encima de tu banner de cookies o de una barra fija de añadir al carrito (la burbuja de eesel tiene un desplazamiento inferior justo para esto) y compruébalo con una conexión lenta. Un widget lento te cuesta tanta confianza como una respuesta incorrecta, como mostró aquella prueba de 67 pruebas.

Paso 6: amplíalo poco a poco

No lo actives en todo el sitio el primer día. Amplíalo por etapas y avanza un escalón solo cuando las respuestas del actual se sostengan.

Las herramientas lo permiten de formas distintas. El porcentaje de cobertura y el horario de HubSpot, la opción de Tidio de responder solo cuando los agentes están desconectados y el fragmento por página de eesel (pégalo solo en las páginas que quieras) te dejan empezar en pequeño. Un piloto de soporte de unas semanas es una primera etapa razonable.

Paso 7: mide lo correcto

Sigue tres números: con qué frecuencia la IA respondió sin traspaso, con qué frecuencia un traspaso era realmente necesario y ocurrió, y cómo calificaron los clientes los chats. Ten cuidado con el primero. Un cliente que cierra el chat frustrado no es una resolución, por eso Zendesk ahora solo cobra las resoluciones verificadas y por eso SE Ranking etiqueta cada chat como útil o no útil. Las guías del cuadro de mando del piloto y de las métricas de soporte con IA explican cómo definirlos en tu helpdesk.

Errores comunes al agregar un agente de IA a un sitio web

Casi todos los he visto más de una vez, y ninguno tiene que ver con el modelo de IA.

• Lanzar un bot que solo recoge correos. Si lo primero que hace el widget es pedir datos de contacto y prometer una respuesta, es un formulario de contacto con cara. Responde primero y pide los datos solo en el traspaso.
• Dejar que lea todo. Entradas de blog viejas, productos descontinuados y comunicados de prensa acaban en las respuestas. Exclúyelos antes del lanzamiento.
• Sin salida. El hilo de Hacker News de arriba no es un caso aislado; un operador minorista con millones de clientes escribió que "had people canceling accounts literally because support agents weren't humans" y arrancó el chatbot de su sitio. Una opción visible y funcional de "hablar con una persona" es lo que evita que un agente de IA se convierta en esa historia.
• Dos burbujas en una página. Añadir un widget de IA junto al chat de tu helpdesk existente confunde a todos. O pones la IA en el widget existente (Vía 1) o lo reemplazas.
• Darle poderes antes de que se los gane. Un comentarista de Hacker News expresó bien el temor: "what if it hallucinated and gives the customer free service for life?" La respuesta son acciones acotadas con aprobaciones, no cero acciones.
• Olvidar los detalles de instalación. App embeds de Shopify dejados desactivados, un sitio de Webflow sin volver a publicar, un cambio de dominio en Wix que borró el fragmento, una regla CSP que bloquea al proveedor. Ninguno muestra un error al cliente; la burbuja simplemente no está.

Para una lista más larga, consulta los artículos sobre problemas de los chatbots de IA y alucinaciones de la IA.

Cuánto cuesta operar un agente de IA en tu sitio web

La instalación es gratuita casi en todas partes. Lo que pagas es el trabajo de la IA, y cada proveedor cuenta ese trabajo de forma distinta. La unidad importa más que el precio principal, porque un proveedor que cobra por sesión cobra por chats que no llegaron a nada, y uno que cobra por resolución no.

Recuerda el costo de licencias que hay debajo. Los agentes de IA de Zendesk van sobre planes Suite desde $55 por agente al mes facturados anualmente, el Customer Agent de HubSpot requiere Service Hub Professional (desde $90 por licencia al mes más $1,500 de incorporación) y el agente de IA de chat de Freshworks requiere un plan Freshdesk Omni. Para una comparación más profunda, la guía de costo de un chatbot y los artículos sobre precios de Lyro y precios de Voiceflow desglosan cada uno.

Cómo se instala eesel en tu sitio web

eesel es un compañero de IA que contratas para soporte, y en un sitio web aparece como un chat bubble, un chat integrado en una sola página o un enlace de chat alojado, todos con el mismo agente y el mismo conocimiento. Responde desde tu centro de ayuda, tu sitio web, Google Drive, Notion, Confluence, Shopify y tickets anteriores, y funciona con cualquier helpdesk o con ninguno.

Así se ve en sitios reales:

• SamCart usa un agente en los tickets de correo de Freshdesk y otro aparte en el chat bubble de su sitio web, cada uno con su propio saludo y tono, ambos respondiendo desde unos 280 artículos del centro de ayuda. El chat pide nombre y correo antes de responder, para que el equipo pueda dar seguimiento.
• BEAUTEK usa un KI-Chat en alemán en beautek.de que responde preguntas sobre productos y pedidos, dice con claridad que es una respuesta de IA y da el número de teléfono del equipo para cualquier asunto importante. En un mes atendió 77 chats del sitio web y creó 20 tickets de Zendesk, la mayoría oportunidades de venta.
• ClutchLoop llamó a su agente Loopy. Responde sobre estado de pedidos, devoluciones y productos en clutchloop.com, consulta precios y existencias en vivo en Shopify y crea un ticket de Gorgias cuando un chat necesita a una persona.

En cuanto al precio, eesel tiene un precio mensual fijo: un chat es un crédito sin importar cuántos mensajes se intercambien, los planes empiezan en $299 por 500 créditos y no hay tarifa por licencia ni de plataforma. La prueba gratuita es de 100 créditos durante 7 días sin tarjeta.

Dónde no es la mejor opción: si estás contento con la IA propia de Zendesk o Freshdesk y solo necesitas lo básico, el agente integrado mantiene todo en una sola factura. Un traspaso desde la burbuja de eesel a un segundo widget de chat en vivo solo funciona con Zendesk Messenger o Freshchat. Su auditoría SOC 2 Type II está en curso, con el periodo de observación iniciado el 1 de octubre de 2026; usa procesadores con certificación SOC 2 Type II y no entrena modelos con tus datos.

Agrega un agente de IA a tu sitio web con eesel

Si quieres un agente en tu sitio que responda desde lo que ya escribiste y pase todo lo demás a tu equipo con un resumen del chat, el chat bubble de eesel es una etiqueta de script, y puedes probarlo desde un enlace de vista previa antes de que un solo cliente lo vea. Conecta tu centro de ayuda, repite las preguntas del mes pasado en la simulación y solo entonces pega el fragmento. Si tu equipo ya vive en Zendesk o Freshdesk, puede quedar dentro de ese chat, como lo usa SE Ranking.

Prueba eesel gratis durante 7 días, o reserva una demostración para ver la configuración funcionando en tu propio sitio.