Cómo añadir una función de chat a tu sitio web

Riellvriany Indriawan
Escrito por

Riellvriany Indriawan

Katelin Teen
Revisado por

Katelin Teen

Última edición July 5, 2026

Verificado por expertos
Ilustración de un widget de chat con IA respondiendo una pregunta en un sitio web

Qué es en realidad una función de chat

Una "función de chat" es esa pequeña burbuja de mensajes que se sitúa en la esquina de un sitio web y permite a un visitante iniciar una conversación sin descolgar el teléfono ni abrir su correo. Esa es toda la idea. Pero por debajo, "chat" cubre varias cosas muy distintas, y la palabra se usa de forma tan laxa que la gente termina comprando la equivocada.

La burbuja en sí es trivial. Cualquier herramienta del mercado te entrega un pequeño fragmento de JavaScript, lo pegas en tu sitio y aparece el widget. Lo que separa una función de chat que cumple su papel en silencio de una que molesta a todo el mundo es lo que ocurre después de que el visitante escribe una pregunta, y eso depende de cuál de los tres tipos siguientes hayas elegido.

Tres tipos de chat para sitios web: chat en vivo, un bot basado en reglas y un agente de chat con IA
Tres tipos de chat para sitios web: chat en vivo, un bot basado en reglas y un agente de chat con IA

Los tres tipos de chat para sitios web

Chat en vivo

El chat en vivo es la versión original: un visitante escribe y una persona real de tu equipo responde en tiempo real. Es cercano, flexible, y para conversaciones complejas o de alto riesgo todavía no hay nada mejor que un humano capaz de leer la situación.

El problema es que solo funciona cuando alguien está pendiente del widget. Fuera del horario laboral cae en un formulario de contacto, y en un tramo con mucho movimiento tus agentes están gestionando cinco conversaciones a la vez mientras se acumulan otras nuevas. Herramientas como Crisp o las que aparecen en la mayoría de comparativas de chat en vivo para ecommerce hacen bien este trabajo, pero el chat en vivo por sí solo no escala más allá de cierto volumen sin que contrates a más gente.

Chatbot basado en reglas

Un bot basado en reglas es el "pulse 1 para facturación" de la web. Construyes un árbol de decisiones y el visitante va haciendo clic en tus botones predefinidos hasta que encuentra una respuesta o se rinde. Nunca duerme y es barato, por eso tantas herramientas de chatbot sin código venden esto.

También es rígido. En cuanto un visitante pregunta algo que tu árbol no anticipó (que es la mayoría de las veces), llega a un callejón sin salida. Funcionan bien para una tarea estrecha y predecible como el seguimiento de pedidos o la captación básica de leads, y resultan frustrantes para cualquier otra cosa.

Agente de chat con IA

Un agente de chat con IA lee una pregunta en lenguaje natural, extrae la respuesta de tu centro de ayuda y de conversaciones anteriores, y redacta una respuesta con sus propias palabras. Sin árbol de decisiones, sin cola de espera. Esta es la categoría que más ha cambiado, y es donde recae la mayoría de las decisiones de compra de chatbots con IA en 2026.

Bien hecho, gestiona al instante la mayor parte de tus preguntas repetitivas y deriva las difíciles a una persona. Mal hecho, se inventa cosas con total confianza, que es el fallo al que todos temen con razón. El resto de esta guía trata sobre todo de aterrizar en el lado del "bien hecho".

Cómo añadir una función de chat a tu sitio web

Aquí está la configuración real, de principio a fin. La parte mecánica toma minutos; he señalado dónde se esconde el trabajo de verdad.

  1. Elige el tipo que se ajuste a tu volumen. ¿Poco volumen y el trato personal importa más que la velocidad? Empieza con chat en vivo. ¿Preguntas predecibles y acotadas? Un bot basado en reglas es suficiente. ¿Ahogado en tickets repetitivos y quieres respuestas 24/7? Necesitas chat con IA. La mayoría de los equipos en crecimiento terminan queriendo IA en primera línea y personas detrás.

  2. Instala el widget. Cada herramienta te da un fragmento de JavaScript. En un sitio personalizado, pégalo justo antes de la etiqueta de cierre </body> en cada página. En Shopify, WordPress, Webflow, Squarespace o Magento, instala la app o el plugin en su lugar y sáltate el código por completo. Esta es la parte de "minutos".

  3. Conecta tu conocimiento. Este es el paso que la gente se salta, y es el que lo decide todo. Una función de chat es tan buena como lo que puede leer. Apúntala a tu centro de ayuda, tus páginas de preguntas frecuentes, tu documentación de producto y (en el caso del chat con IA) tu historial de tickets resueltos. Un agente de IA que aprende de tickets anteriores responde con el estilo real de tu casa; uno apuntado a un centro de ayuda pobre repite como un loro el texto de marketing.

  4. Define las reglas y la derivación. Decide qué responde el chat por su cuenta, qué redacta como borrador para revisión y qué va directo a una persona. Un buen chat con IA usa aquí el enrutamiento basado en confianza: si no está seguro, deriva en lugar de adivinar. Configura dónde aterrizan las escalaciones, ya sea tu bandeja de entrada, Slack o tu helpdesk.

  5. Prueba antes de activarlo. No apuntes un chat con IA recién estrenado a clientes reales y esperes lo mejor. Ejecútalo primero contra preguntas reales y lee lo que responde. Esta es, con diferencia, la mayor palanca de calidad, y casi nadie la usa.

Cómo responde el chat de IA de un sitio web, desde la pregunta del visitante hasta una respuesta segura o la derivación a una persona
Cómo responde el chat de IA de un sitio web, desde la pregunta del visitante hasta una respuesta segura o la derivación a una persona

Chat con IA frente a chat en vivo: ¿qué necesitas de verdad?

Esta es la pregunta que más me hacen, y la respuesta honesta suele ser "ambos, pero en el orden correcto". Aquí está la disyuntiva desglosada:

DimensiónChat en vivoAgente de chat con IA
Quién respondeUna persona de tu equipoLa IA, a partir de tus documentos y tickets anteriores
DisponibilidadHorario laboral (formulario después)24/7
Velocidad con volumenSe ralentiza cuando se acumulan los ticketsInstantánea, sin cola
Gestiona casos complejos o emocionalesExcelenteDeriva a una persona
Modelo de costePor puesto de agentePor conversación
Esfuerzo de configuraciónBajoBajo para instalar, trabajo real para entrenar
Mejor paraAlto contacto, poco volumenNivel 1 repetitivo a gran escala

El patrón que funciona: deja que el chat con IA dé el primer golpe a todo, resuelva por su cuenta las preguntas repetitivas de primer nivel y pase con calma a una persona todo aquello de lo que no esté seguro, con el contexto completo adjunto. Tu equipo deja de responder "¿dónde está mi pedido?" por milésima vez y dedica sus horas a las conversaciones que de verdad necesitan a una persona. Esto no es hipotético: Gridwise vio a eesel resolver el 73% de las solicitudes de nivel 1 en el primer mes.

Sea cual sea la dirección que tomes, el agente de IA no debería sustituir la opción humana; debería ser la opción rápida por defecto delante de ella.

Qué hace que un chat para sitios web funcione de verdad

He visto suficientes lanzamientos como para saber que el widget nunca es el problema. Aquí está dónde salen mal las cosas, y qué separa a las funciones de chat que perduran de las que se retiran silenciosamente un mes después.

Un chat que no puede responder es un pasivo. Lo peor que puedes hacer es instalar una burbuja que saluda a la gente y luego no puede ayudarla. He visto pruebas en las que el bot "no pudo dar ni una sola respuesta útil", y la primera pregunta del cliente fue si aquello estaba roto. Un equipo, una responsable de soporte de ecommerce alemana que gestionaba varias tiendas en Zendesk, pagó durante cuatro meses y canceló precisamente porque su chat no podía responder nada por sí solo. Un widget vacío erosiona la confianza más rápido que la ausencia de widget.

El conocimiento pobre es la causa raíz. Si tu chat se equivoca, nueve de cada diez veces es porque lee documentación pobre u obsoleta, no porque la IA sea torpe. Arregla el conocimiento antes de culpar a la herramienta. Esta es también la razón por la que un chatbot con IA responde de forma incorrecta más a menudo de lo que debería: el material de origen nunca fue lo bastante bueno.

La brecha de la "última milla" mata más lanzamientos que una mala IA. El patrón que veo una y otra vez: un equipo conecta la documentación, configura el tono, llega al 80% de la configuración y luego nunca termina de conectar el disparador que hace que el chat se active. El widget se queda ahí, configurado pero inactivo, sin gestionar ni una sola conversación. La configuración no está terminada hasta que de verdad está respondiendo a un visitante real.

"make sure you put link in and always refer to our bestselling products... i would reference this page it is more accurate"

Ese es un operador de ecommerce con Shopify y Gorgias escribiendo correcciones directamente en su widget de chat el primer día, enseñando a la IA dónde están las buenas respuestas. Ese bucle de instrucción es exactamente el trabajo que separa un chat que ayuda de uno que adivina, y es la razón por la que las buenas herramientas te permiten corregir a la IA en lenguaje sencillo en lugar de reconstruir un árbol de decisiones.

Dos formas de lanzar el chat de un sitio web: instalar y esperar, frente a simular primero con tickets anteriores
Dos formas de lanzar el chat de un sitio web: instalar y esperar, frente a simular primero con tickets anteriores

La conclusión: trata el widget como el 10% del trabajo, y el conocimiento, las pruebas y la derivación como el otro 90%. Esa es toda la diferencia.

Prueba eesel para el chat de tu sitio web

Si ya has decidido que quieres chat con IA en tu sitio, esta es la parte en la que llevamos años trabajando. eesel coloca una función de chat en tu sitio web que aprende de tus documentos de ayuda y tu historial de tickets resueltos, así responde con tu propia voz desde el primer día en lugar de repetir como un loro un artículo del centro de ayuda.

El punto que más importa, dado todo lo anterior: eesel te permite simular al agente contra miles de tus tickets reales anteriores antes de que hable con un cliente, así ves de antemano la cobertura y las respuestas exactas. Usa el enrutamiento basado en confianza para derivar cualquier caso del que no esté seguro, y se conecta a tu helpdesk existente además de más de 100 herramientas. El precio es según el uso, 0,40 dólares por ticket, sin cuota de plataforma ni coste por puesto. Hay una prueba gratuita con 50 dólares de uso y sin tarjeta de crédito, para que puedas apuntarlo a tu propia documentación y ver qué hace.

Interfaz de chat con IA de eesel respondiendo a una conversación con un cliente
Interfaz de chat con IA de eesel respondiendo a una conversación con un cliente

Preguntas frecuentes

¿Cómo añado una función de chat a mi sitio web?
Elige una herramienta de chat, copia el pequeño fragmento de JavaScript que te da y pégalo antes de la etiqueta de cierre </body> en cada página (o instala el plugin si usas Shopify, WordPress o Webflow). El widget aparece en minutos. El verdadero trabajo viene después: conectar tu base de conocimiento para que el chat pueda responder de verdad. Consulta el agente de IA para helpdesk para ver cómo funciona esa parte.
¿Existe una función de chat gratuita para un sitio web?
Sí. La mayoría de las herramientas de chat en vivo tienen un plan gratuito para un solo agente, y también hay opciones de IA gratuitas. Los planes gratuitos son suficientes para poco volumen, pero suelen limitar el historial de conversaciones y las respuestas con IA, así que revisa los límites antes de comprometerte.
¿Cuál es la diferencia entre el chat en vivo y una función de chat con IA?
El chat en vivo dirige el mensaje a una persona que responde escribiendo; un chat con IA responde por su cuenta a partir de tus documentos de ayuda y tickets anteriores. La mayoría de los equipos usan ambos, con la IA gestionando las preguntas repetitivas y las personas encargándose del resto.
¿Cuánto cuesta una función de chat para sitios web?
Los widgets de chat en vivo cuestan entre 0 y 50 dólares por agente al mes, aproximadamente. El chat con IA suele tener un precio por conversación; eesel cuesta 0,40 dólares por ticket sin cuota de plataforma ni por puesto, lo que suele salir más barato que pagar por cada agente humano a medida que crece el volumen.
¿Una función de chat con IA le dará respuestas incorrectas a mis clientes?
Puede pasar si la conectas a documentación pobre y la activas a ciegas. La solución es el enrutamiento basado en confianza (las preguntas de baja confianza se convierten en un borrador o se derivan a una persona, no en una respuesta en vivo) y simular con tus tickets anteriores antes de lanzarlo, para ver las respuestas antes que tus clientes.
¿Qué plataformas de sitios web son compatibles con una función de chat?
Todas. Hay plugins nativos para Shopify, WordPress, Webflow, Squarespace y Magento, además de una etiqueta de script universal para sitios personalizados. Si ya usas un helpdesk, el chat también puede conectarse a él.

Share this article

Riellvriany Indriawan

Article by

Riellvriany Indriawan

Riell is a designer and writer at eesel AI with about two years of experience researching CX platforms, AI chatbots, and helpdesk software. She combines her design background with a sharp eye for how these tools actually look and feel in practice — making her comparisons unusually visual and user-focused.

Related Posts

All posts →
Ilustración de una burbuja de widget de chat en vivo apareciendo en una ventana de navegador
Guides

Cómo añadir chat en vivo a tu sitio web (guía de configuración 2026)

Un recorrido práctico sobre cómo añadir chat en vivo a tu sitio web en 2026: los tres métodos de instalación, lo que cuestan las herramientas, dónde entra la IA, y los errores que hay que evitar.

Rama Adi NugrahaRama Adi NugrahaJul 5, 2026
Ilustración de una ventana de aplicación de chat web con burbujas de mensajes
Guides

¿Qué es una aplicación de chat web? Guía 2026 para equipos de soporte

Qué es una aplicación de chat web, los tres tipos principales, cómo funciona realmente el chat web con IA y cómo elegir una para soporte al cliente en 2026.

Kurnia Kharisma Agung SamiadjieKurnia Kharisma Agung SamiadjieJul 5, 2026
Una guía práctica de la IA de Gmail en móvil y web (2025)
Guides

Una guía práctica de la IA de Gmail en móvil y web (2025)

¿Pensando en usar las nuevas funciones de IA de Gmail? Nuestra guía desglosa todo, desde Smart Compose hasta el asistente avanzado Gemini, tanto en móvil como en la web. Cubriremos las características principales, los precios, las limitaciones y por qué las herramientas especializadas podrían ser una mejor opción para las necesidades de tu negocio.

Kenneth PanganKenneth PanganOct 16, 2025
Una guía práctica para usar un generador de sitios web con IA en 2025
Guides

Una guía práctica para usar un generador de sitios web con IA en 2025

¿Pensando en usar un generador de sitios web con IA? Nuestra guía desglosa los beneficios, compara las principales herramientas como Wix y Squarespace, y te muestra lo que sigue.

Stevia PutriStevia PutriNov 13, 2025
Una persona señala un panel de conversación de chat mientras un colega trabaja en una laptop
Guides

Chat en vivo dentro de la app: qué es y cómo añadirlo a tu producto

El chat en vivo dentro de la app lleva el soporte a tu producto, no solo a tu sitio web. Así se diferencia de un widget, esto cuesta y así se añade uno.

Rama Adi NugrahaRama Adi NugrahaJul 9, 2026
Ejemplos de chat de atención al cliente ilustrados como burbujas de conversación de chat en vivo
Guides

Ejemplos de chat de atención al cliente: guiones para cada escenario

Ejemplos reales de chat de atención al cliente para saludos, clientes enfadados, reembolsos, escalados y cierres, además de cómo la IA los redacta a partir de tus propios tickets pasados.

Riellvriany IndriawanRiellvriany IndriawanJul 6, 2026
Ilustración destacada con plantillas de mensajes de chat en vivo en una pantalla de soporte
Guides

Guiones de chat en vivo: 25+ plantillas para una atención más rápida y cercana

25+ guiones de chat en vivo para copiar y pegar: saludos, esperas, reembolsos, clientes enfadados y traspasos, además de cómo usarlos sin sonar a robot.

Riellvriany IndriawanRiellvriany IndriawanJul 5, 2026
Ilustración de un widget de chat en vivo proactivo contactando a un visitante de un sitio web
Guides

Chat en vivo proactivo: cómo funciona, disparadores y mejores prácticas

El chat en vivo proactivo contacta primero a los visitantes según su comportamiento. Así es como funcionan los disparadores, los números detrás de todo esto y cómo hacerlo sin molestar a la gente.

Riellvriany IndriawanRiellvriany IndriawanJul 5, 2026
Ilustración que compara un chatbot de IA y un agente de chat en vivo para atención al cliente
Guides

Chatbot de IA vs chat en vivo: ¿cuál necesita realmente tu equipo de soporte en 2026?

Chatbot de IA vs chat en vivo es la pelea equivocada. Esto es en qué es realmente bueno cada uno, dónde falla cada uno, y el modelo de desviar-y-luego-transferir que usa ambos.

Riellvriany IndriawanRiellvriany IndriawanJun 25, 2026

Listo para contratar tu companero de IA?

Configuracion en minutos. Sin tarjeta de credito requerida.

Comienza gratis