Widget de chat en JavaScript: añade chat con IA a cualquier web con una sola etiqueta de script
Una línea de JavaScript. Sin paquetes npm, sin dependencias de frameworks, sin pasos de compilación. Pega una etiqueta de script en tu HTML y tu sitio web tendrá un widget de chat IA que lee tu contenido y responde a las preguntas de los visitantes, en cualquier stack y en 36 idiomas.
Mira cómo la IA responde preguntas en tu sitio web
Pega cualquier URL de sitio web a continuación. La IA lee tus páginas y comienza a responder a las preguntas de los visitantes usando tu propio contenido, sin configuración, sin archivos de configuración, sin claves de API que gestionar.
La mayoría de los widgets de chat te obligan a adoptar un ecosistema entero antes de poder saludar a un visitante
Añadir un chat en vivo a un sitio web debería ser sencillo. En cambio, la mayoría de las soluciones de widgets de chat arrastran una cadena de dependencias que convierte una tarea de cinco minutos en un proyecto de ingeniería. Necesitas un paquete npm, que requiere Node.js, que requiere una canalización de compilación, que requiere una configuración de bundler que funcione bien con el framework que estés utilizando. El wrapper de React no funciona con tu proyecto Vue. El módulo de Angular no soporta tu versión. La opción de JavaScript plano existe técnicamente, pero la documentación asume que ya estás ejecutando Webpack con un cargador de módulos. Antes de que un solo visitante haya hecho una sola pregunta, has quemado horas lidiando con gestores de paquetes, resolviendo conflictos de dependencias peer y depurando errores de compilación que no tienen nada que ver con el chat. ¿Tu sitio de marketing construido con HTML y CSS plano? Ahora necesita un entorno Node solo para mostrar una burbuja de chat en la esquina. ¿El sitio WordPress de tu cliente de agencia? Buena suerte explicando por qué necesitan instalar Node en su hosting. Mientras tanto, tu objetivo real —permitir que los visitantes hagan preguntas y obtengan respuestas— se queda en el backlog detrás de un trabajo de infraestructura que nunca debió ser necesario. Un widget de chat es un elemento de interfaz de usuario, no un compromiso de plataforma. Asyntai lo trata así. Una etiqueta de script en tu HTML, el mismo código de inserción independientemente de si tu sitio ejecuta React, Vue, Angular, Svelte, Astro, Next.js, HTML plano, un generador de sitios estáticos, un CMS o un framework renderizado en servidor que construiste tú mismo. Sin paquetes que instalar. Sin configuración de compilación que mantener. Sin dependencia en tiempo de ejecución que se rompa cuando actualices otra cosa. El script se carga de forma asíncrona, renderiza el widget y comienza a responder a las preguntas de los visitantes utilizando el contenido de tu sitio web.
- Funciona en cada stack sin adaptaciónAplicación de una sola página (SPA) de React, sitio PHP renderizado en servidor, portafolio HTML estático, blog de Jekyll, sitio de documentación de Hugo, aplicación de Rails: el código de inserción es idéntico en todos los casos. Pegas la etiqueta de script antes de la etiqueta de cierre de body y el widget de chat aparece. No hay un wrapper específico del framework que configurar, ni una guía de integración que seguir, ni una matriz de compatibilidad que revisar. Si el navegador puede ejecutar JavaScript, el widget funciona.
- Impacto cero en tu pipeline de compilación existenteEl widget se carga desde una CDN externa como un script independiente. No entra en tu árbol de dependencias, no aparece en tu package.json y no participa en tu proceso de compilación. Actualizar React, cambiar de Webpack a Vite, o migrar de Vue 2 a Vue 3 no tiene ningún efecto en el widget de chat. Opera independientemente del código de tu aplicación, lo que significa que nunca causa un fallo de compilación y nunca necesita una actualización de versión.
- Se carga de forma asíncrona sin bloquear la renderización de la páginaLa etiqueta de script utiliza el atributo async, por lo que el contenido de tu página se carga primero y el widget de chat aparece una vez que el navegador ha terminado de renderizar. Los visitantes ven tu contenido inmediatamente: el widget se inicializa en segundo plano sin añadir tiempo de carga a tu página. No hay destello de contenido sin estilo, ni desplazamiento de diseño, ni recurso que bloquee el renderizado que ralentice tu puntuación de Lighthouse.
Conecta tus APIs de backend y permite que el widget de chat obtenga datos en vivo durante las conversaciones
El widget de chat responde a las preguntas de los visitantes a partir del contenido de tu sitio web de forma inmediata: descripciones de productos, documentación, tablas de precios, secciones de preguntas frecuentes, páginas de información. Pero algunas preguntas necesitan datos en tiempo real que no residen en una página estática. Las Herramientas Personalizadas —disponibles en los planes Standard ($139/mes) y Pro ($449/mes)— permiten que el widget de chat llame a tus propias APIs REST durante una conversación, para que los visitantes obtengan respuestas en vivo en lugar de información obsoleta.
- Inventario y disponibilidad en tiempo realConecta una Herramienta Personalizada a tu API de productos. Cuando un visitante pregunta "¿hay stock del modelo de 256 GB?", la IA consulta tu sistema de inventario y responde con la disponibilidad actual, las fechas de reposición esperadas y los precios, obtenidos en vivo de tu base de datos, no en caché de una página rastreada.
- Estado del pedido sin ticket de soportePermite a los visitantes escribir su número de pedido en el widget de chat y obtener una actualización instantánea. La IA llama a tu API de seguimiento de pedidos y devuelve el estado del envío, el número de seguimiento y la fecha de entrega estimada. Sin cola de soporte, sin idas y venidas por correo electrónico, sin tiempo de espera telefónico.
- Búsqueda de cuentas y reservasPara productos SaaS, negocios de servicios y sitios basados en citas, las Herramientas Personalizadas permiten que el widget de chat compruebe el estado de la suscripción, las próximas citas o los saldos de cuenta consultando tu backend. Un visitante que pregunta "¿cuándo es mi próxima cita?" obtiene la respuesta de tu sistema de programación en tiempo real.
- Precios y presupuestos dinámicosSi tu precio depende de la configuración, la cantidad o el segmento de cliente, una Herramienta Personalizada puede calcular presupuestos sobre la marcha. La IA recopila los requisitos a través de la conversación —tamaño, cantidad, velocidad de entrega— y llama a tu endpoint de precios para devolver un presupuesto preciso sin que el visitante tenga que rellenar un formulario.
- 36 idiomas con detección automáticaUn visitante que navega por tu sitio web en inglés en Tokio recibe respuestas en japonés. Un visitante en São Paulo recibe respuestas en portugués. La IA detecta automáticamente el idioma del visitante y responde en consecuencia: 36 idiomas soportados en cada plan, sin coste adicional. Tu contenido web no necesita ser traducido.
Añade el widget de chat JavaScript a tu sitio
Sin paquetes, sin herramientas de CLI, sin pasos de compilación. Cuatro pasos y tu sitio web tendrá un widget de chat con IA respondiendo a las preguntas de los visitantes.
- Elige un plan en asyntai.com/pricing: el nivel Gratuito te da 1 sitio y 100 mensajes al mes para probar con tráfico real de visitantes.
- Añade la URL de tu sitio web en el panel de control. La IA rastrea hasta 50 páginas —descripciones de productos, documentación, secciones de preguntas frecuentes, páginas de precios, páginas de información— y construye su base de conocimiento a partir de tu contenido existente.
- Personaliza la apariencia del widget de chat. Establece los colores de tu marca, el avatar, el mensaje de bienvenida y la posición. Añade cualquier contenido complementario —PDFs, artículos de base de conocimiento, documentos de políticas— como archivos subidos para cubrir información más allá de lo que contienen tus páginas web.
- Copia la etiqueta de script de una sola línea y pégala en tu HTML: antes de la etiqueta de cierre
</body>, en el encabezado de tu plantilla, o donde sea que tu sitio cargue scripts externos. El widget se activa inmediatamente.
<script src="https://asyntai.com/widget.js"
data-id="your-site-id" async>
</script>
# Sin npm. Sin bundler. Sin dependencias.
# Funciona en React, Vue, Angular o HTML plano.
Widget de chat JavaScript — Preguntas Frecuentes
Preguntas comunes de desarrolladores y propietarios de sitios sobre cómo añadir un widget de chat JavaScript a su sitio web.
¿Funciona con React, Vue, Angular y otros frameworks?
Sí. El widget de chat se carga como un script independiente desde una fuente externa: no interactúa con el árbol de componentes, la gestión de estado o el ciclo de renderizado de tu framework. Pegas la misma etiqueta de script en una aplicación React, un proyecto Vue, una aplicación Angular, un sitio Svelte o una página HTML plana. No hay un wrapper específico del framework, ni un paquete adaptador, ni un paso de integración. El widget se renderiza independientemente en el DOM y no entra en conflicto con el código de tu aplicación. Si tu sitio ejecuta JavaScript en un navegador, el widget funciona en él.
¿Ralentizará mi sitio web?
No. El script se carga de forma asíncrona, lo que significa que no bloquea la renderización de tu página. Tu HTML, CSS y contenido visible se cargan primero; el widget de chat se inicializa en segundo plano después de que la página esté interactiva. El script en sí es ligero y se sirve desde una CDN, por lo que los tiempos de carga son mínimos independientemente de la ubicación de tu visitante. No se añade a tu ruta de renderizado crítica y no afecta a tus Core Web Vitals ni a la puntuación de rendimiento de Lighthouse.
¿Cómo sabe la IA qué decir sobre mi sitio web?
Cuando añades la URL de tu sitio web en el panel de control, la IA rastrea hasta 50 páginas y lee el contenido: descripciones de productos, documentación, información de precios, páginas de preguntas frecuentes, páginas de información, documentos de políticas y cualquier otra cosa accesible públicamente. Utiliza este contenido para responder a las preguntas de los visitantes. No genera información que no esté en tu sitio. También puedes subir documentos adicionales —PDFs, artículos de base de conocimiento, guías internas— para ampliar lo que sabe el chatbot más allá de tus páginas web publicadas.
¿Puedo personalizar la apariencia para que coincida con mi marca?
Sí. El panel de control te permite establecer el color principal del widget, el color del texto, la imagen del avatar, el mensaje de bienvenida y la posición de la burbuja de chat (izquierda o derecha). Puedes adaptarlo a la paleta de tu marca para que parezca una parte nativa de tu sitio web en lugar de un complemento de terceros. La personalización se realiza a través de la interfaz de usuario del panel de control, sin necesidad de anular CSS ni objetos de configuración de JavaScript.
¿Funciona en sitios estáticos y aplicaciones de una sola página?
Sí a ambos. En un sitio HTML estático, el widget se carga cuando se carga la página y permanece activo mientras el visitante esté en ella. En una aplicación de una sola página —donde la navegación ocurre del lado del cliente sin recargas completas de página— el widget persiste automáticamente a través de los cambios de ruta. Un visitante puede navegar por toda tu SPA y la conversación de chat continúa sin interrupciones. No se necesita ninguna configuración especial para el enrutamiento del lado del cliente.
¿Puede el widget de chat conectarse a mis APIs de backend?
Sí, a través de Herramientas Personalizadas en los planes Standard ($139/mes) y Pro ($449/mes). Defines tu endpoint de API en el panel de control, especificas qué parámetros debe extraer la IA de la conversación, y el widget de chat llama a tu API durante las conversaciones para obtener datos en vivo. Los usos comunes incluyen comprobaciones de inventario, consultas de estado de pedidos, programación de citas y consultas de saldo de cuenta. La IA maneja la conversación de forma natural: los visitantes simplemente hacen su pregunta, y el chatbot llama a tu API tras bambalinas para obtener la respuesta.
¿Qué idiomas soporta el widget de chat?
La IA soporta 36 idiomas y detecta el idioma del visitante automáticamente. Un visitante que escribe en español recibe una respuesta en español. Un visitante que escribe en japonés recibe una respuesta en japonés. Tu contenido web no necesita ser traducido; la IA lee tus páginas en inglés y entrega las respuestas en el idioma que utilice el visitante. El soporte de idiomas está incluido en todos los planes sin coste adicional.
¿Cuánto cuesta?
El nivel Gratuito te da 1 sitio y 100 mensajes al mes, suficiente para probar el widget de chat con tráfico real de visitantes y ver cómo la IA maneja las preguntas en tu sitio. Starter cuesta $39/mes con 2.500 mensajes y 2 sitios. Standard cuesta $139/mes con 15.000 mensajes, 3 sitios y Herramientas Personalizadas para integraciones de API. Pro cuesta $449/mes con 50.000 mensajes, 20 sitios y marca blanca. Todos los planes son mes a mes, sin contratos. Puedes actualizar o cancelar en cualquier momento.
¿Necesito actualizar la etiqueta de script cuando el widget obtenga nuevas funciones?
No. La etiqueta de script apunta a una URL alojada que siempre sirve la versión actual. Cuando se envían nuevas funciones o mejoras, tu widget las obtiene automáticamente, sin necesidad de cambios de código de tu parte. El código de inserción que pegas en tu HTML hoy es el mismo código que funcionará el año que viene. Nunca necesitas actualizar una versión de paquete, ejecutar una migración o cambiar tu integración.
Widget de chat JavaScript: el caso de una sola línea de código
Hay un tipo específico de frustración que surge al intentar añadir una función sencilla a un sitio web y descubrir que la versión "sencilla" requiere un gestor de paquetes, una herramienta de compilación y tres archivos de configuración. Los widgets de chat tocan este nervio con frecuencia. Quieres un pequeño botón flotante en la esquina de tu sitio que permita a los visitantes hacer preguntas. La guía de implementación comienza con "npm install" y termina con un plugin de Webpack. En algún momento, el proyecto pasó de "añadir chat al sitio" a "modernizar la canalización de compilación para soportar los requisitos del widget de chat". La cola está moviendo al perro, y el visitante que solo quería preguntar por tu política de devoluciones sigue mirando una esquina de página vacía.
El ecosistema JavaScript se mueve rápido, y el daño colateral de esa velocidad es la fragilidad de las dependencias. Un widget de chat distribuido como paquete npm hereda cada problema que acarrean los paquetes npm: conflictos de versiones con otros paquetes en tu proyecto, cambios disruptivos en lanzamientos menores, advertencias de dependencias peer que pueden o no importar, y la ansiedad silenciosa de saber que tu función de chat depende de un árbol de dependencias transitivas mantenidas por extraños. Cuando una de esas dependencias publica una mala actualización —y eventualmente lo hará— tu widget de chat se romperá sin que sea tu culpa. Estás depurando la cadena de suministro de otra persona a las 9 de la mañana de un lunes porque un visitante informó que el botón de chat desapareció.
Una etiqueta de script elimina esta categoría de problemas por completo. El widget de chat se carga desde una URL alojada, se ejecuta en su propio ámbito y no participa en tu proceso de compilación. No tiene entrada en tu package.json, ni línea en tu archivo de bloqueo, ni nodo en tu grafo de dependencias. Cuando actualizas React de 18 a 19, el widget de chat no se ve afectado. Cuando cambias de Create React App a Vite, el widget de chat no se ve afectado. Cuando migras tu sitio de marketing de Gatsby a Astro, el widget de chat no se ve afectado. Es una etiqueta de script en tu HTML —el mismo mecanismo de despliegue que ha funcionado desde 1995— y no conlleva el acoplamiento que introduce la distribución moderna de paquetes.
El rendimiento es el otro eje en el que una etiqueta de script independiente supera a un paquete compilado. Cuando un widget de chat reside dentro de tu paquete de aplicación, añade tamaño a tu paquete. Cada visitante descarga el código del widget de chat como parte de tu archivo JavaScript principal, independientemente de si interactúa con el chat o no. La inicialización del widget se ejecuta durante la secuencia de arranque de tu aplicación, compitiendo por el hilo principal durante la ruta de renderizado crítica. El widget de chat nunca aparece en tu análisis de tamaño de paquete, nunca contribuye a tu métrica de Tiempo hasta Interactivo y nunca causa un desplazamiento de diseño durante la renderización inicial.
Las agencias y los freelancers que construyen sitios web para clientes se enfrentan a una versión particularmente aguda del problema de las dependencias. El sitio de marketing de un cliente está construido sobre WordPress, Squarespace, Wix o HTML plano servido desde hosting compartido. El cliente no tiene Node.js instalado. El cliente no tiene un pipeline de compilación. El cliente no sabe qué es npm, y explicarlo llevaría más tiempo de lo que debería tardar la configuración del widget de chat. Cuando la solución de chat requiere un entorno Node, la agencia tiene dos opciones: configurar un proceso de compilación en el hosting del cliente (que el cliente no puede mantener) o decirle al cliente que su plataforma no es compatible. Una etiqueta de script no requiere ninguna de las dos cosas. La agencia pega una línea de código en la plantilla del sitio, y el widget de chat funciona. El cliente puede verlo funcionando inmediatamente. La entrega es limpia porque no hay entorno de desarrollo que mantener.
Las aplicaciones de una sola página presentan un desafío sutil que la mayoría de las instalaciones de widgets de chat manejan mal. Cuando la navegación ocurre del lado del cliente —React Router, Vue Router, el router de Angular— una implementación de chat ingenua pierde el estado de la conversación en cada cambio de ruta. El visitante hace una pregunta en la página de precios, navega a la página de características y la ventana de chat se reinicia. El widget de Asyntai persiste automáticamente a través de la navegación del lado del cliente. La conversación continúa sin interrupciones sin importar cuántas veces navegue el visitante dentro de la aplicación. Esto no es una opción de configuración que debas habilitar; es el comportamiento predeterminado porque perder el estado de la conversación durante la navegación es un error, no una característica.
La cuestión de lo que realmente hace el widget de chat con el contenido de tu sitio web es donde la brecha entre el chat en vivo tradicional y un widget impulsado por IA se vuelve más aparente. Un widget de chat JavaScript tradicional es un canal de comunicación: conecta a un visitante con un operador humano. Si no hay un operador disponible, el visitante recibe un formulario de "dejar un mensaje" o una respuesta automatizada que no dice nada útil. Un widget de chat impulsado por IA lee el contenido de tu sitio web —hasta 50 páginas, rastreadas automáticamente cuando añades tu URL— y utiliza ese contenido para responder directamente a las preguntas. Un visitante que pregunta "¿cuáles son sus tarifas de envío?" obtiene la respuesta de tu página de política de envíos. Un visitante que pregunta "¿ofrecen una prueba gratuita?" obtiene la respuesta de tu página de precios. La IA no inventa información. Lee lo que has publicado y lo entrega de forma conversacional, que es lo que el visitante haría por sí mismo si tuviera la paciencia de encontrar la página correcta y el párrafo correcto.
La implementación técnica de la etiqueta de script es deliberadamente mínima. Copias una línea de HTML de tu panel de control, la pegas en la plantilla de tu página —antes de la etiqueta de cierre del body, en una sección de head, o donde sea que tu sitio cargue scripts externos— y el widget aparece. El script acepta un único atributo de datos: tu ID de sitio. No hay objetos de configuración que definir en JavaScript, ni funciones de inicialización que llamar, ni oyentes de eventos que conectar. El panel de control gestiona toda la configuración: colores, mensaje de bienvenida, posición, avatar, ajustes de comportamiento, por lo que los cambios no requieren despliegues de código. Tu equipo de marketing puede ajustar la apariencia y el saludo del widget de chat sin tocar un editor de código ni esperar a que un desarrollador envíe una actualización.
El soporte de idiomas es otra área donde la simplicidad de la implementación oculta la sofisticación del resultado. La IA detecta automáticamente el idioma de cada visitante y responde en consecuencia: 36 idiomas, desde el árabe hasta el vietnamita, sin configuración adicional. Un visitante que navega por tu sitio web en inglés desde Seúl escribe una pregunta en coreano y recibe una respuesta en coreano. Un visitante de Berlín escribe en alemán y recibe una respuesta en alemán. Tu contenido web no necesita ser traducido. La IA lee tus páginas en inglés y entrega la respuesta en el idioma que utilice el visitante. Esto ocurre en todos los planes, incluido el Gratuito, sin paquetes de idiomas que instalar ni archivos de traducción que mantener.
Para los sitios que necesitan que el widget de chat haga más que responder a partir de contenido estático, las Herramientas Personalizadas en los planes Standard y Pro permiten que la IA llame a tus propias APIs REST durante una conversación. Un visitante pregunta "¿ya se ha enviado mi pedido?" y la IA extrae el número de pedido, llama a tu API de cumplimiento y devuelve la información de seguimiento. Un visitante pregunta "¿tenéis la versión azul en talla mediana?" y la IA consulta tu endpoint de inventario. Esto convierte el widget de chat de una herramienta de recuperación de contenido a una interfaz de autoservicio para tus sistemas de backend, sin necesidad de construir un framework de chatbot, escribir flujos de diálogo o gestionar el estado de la conversación. Tú defines el endpoint de la API y los parámetros. La IA se encarga de la conversación de forma natural.
Los desarrolladores preocupados por la seguridad a menudo preguntan por las implicaciones de cargar un script de terceros. El widget se ejecuta en el contexto de ejecución estándar del navegador, de la misma manera que se ejecutan los scripts de análisis, los cargadores de fuentes y los píxeles de marketing. No accede al ámbito de JavaScript de tu aplicación, no lee las cookies establecidas por tu aplicación y no modifica tu DOM más allá del contenedor que crea para la interfaz de chat. El widget se comunica con el backend de Asyntai a través de HTTPS para enviar los mensajes de los visitantes y recibir las respuestas de la IA. Los datos de la conversación se procesan para generar respuestas y no se utilizan para crear perfiles ni se venden a terceros.
La estructura de costes refleja la realidad de que la mayoría de los sitios web no necesitan una infraestructura de chat de nivel empresarial. El nivel Gratuito —un sitio, 100 mensajes al mes— te permite insertar el widget en un proyecto personal, portafolio o página de pequeña empresa y ver cómo interactúan los visitantes con él. Cien mensajes son suficientes para evaluar la calidad de las respuestas de la IA sobre tu contenido específico. Si funciona, el plan Starter por $39 al mes cubre 2.500 mensajes y dos sitios, lo que gestiona cómodamente el tráfico de la mayoría de los sitios web de pequeñas y medianas empresas. Standard por $139 al mes añade Herramientas Personalizadas para integraciones de API y 15.000 mensajes en tres sitios. Pro por $449 al mes está diseñado para agencias y empresas que ejecutan el widget en varias propiedades: 20 sitios, 50.000 mensajes, marca blanca e integración completa de API.
Los sitios de documentación son un caso de uso poco apreciado para un widget de chat con IA. Los desarrolladores construyen documentación con generadores de sitios estáticos —Hugo, Jekyll, Docusaurus, MkDocs, VitePress— y el resultado son docenas o cientos de páginas que cubren APIs, opciones de configuración, tutoriales y guías de solución de problemas. Los visitantes de los sitios de documentación buscan respuestas específicas: "¿Cómo me autentico con la API?", "¿Cuáles son los límites de tasa?", "¿Por qué ocurre este error?". Tienen que navegar por una barra lateral, buscar en las páginas y escanear para encontrar la sección relevante. Un widget de chat IA que lee el contenido de la documentación les permite hacer la pregunta directamente y obtener la respuesta específica, extraída de la página correcta, entregada en una frase en lugar de una página. Para proyectos de código abierto y herramientas para desarrolladores, esto convierte la documentación de una referencia que se busca en un recurso con el que se conversa.
El comportamiento del widget en dispositivos móviles merece ser mencionado porque el móvil es a menudo donde los widgets de chat fallan. El espacio en pantalla es limitado, y un widget mal implementado cubre el contenido de la página, crea problemas de captura de desplazamiento o se renderiza en un tamaño inutilizable. El widget de Asyntai es responsivo por defecto: se adapta al viewport, utiliza objetivos táctiles apropiados para la interacción móvil y se abre como una superposición de pantalla completa en pantallas pequeñas para que la conversación sea legible sin entrecerrar los ojos. Cerrar el chat restaura la página exactamente como estaba. No hay configuración móvil especial. La misma etiqueta de script que funciona en escritorio funciona en móvil, tableta y todo lo intermedio.
Una etiqueta de script. Sin dependencias. IA que lee tu sitio web y responde a las preguntas de los visitantes en 36 idiomas. Empieza con el plan Gratuito y míralo funcionando en tu sitio en cinco minutos, o ve a Standard para Herramientas Personalizadas e integración de API.