Guía paso a paso para añadir un chatbot de IA a cualquier sitio web. Cubre WordPress, Shopify, Wix, Squarespace y sitios personalizados en menos de 10 minutos.
El 73% de los clientes espera una respuesta instantánea cuando contacta con una empresa online. No en una hora. No en cinco minutos. Instantáneamente. Esa expectativa solo está creciendo, y la mayoría de equipos de soporte no puede cubrir personal las 24 horas para cumplirla. Un chatbot sí puede. Y puedes añadir uno a tu sitio web en menos de 10 minutos, sin importar la plataforma que uses.
Esta guía recorre tres métodos de integración, seis tutoriales específicos por plataforma y los pasos de personalización y prueba para tener tu chatbot en vivo y funcionando hoy. Usamos Chatsy como ejemplo principal en toda la guía, pero los pasos centrales aplican a cualquier plataforma de chatbot.
Divulgación: construimos Chatsy, que se usa como ejemplo en esta guía.
Hay tres métodos de integración, cada uno adecuado para necesidades distintas:
| Método | Mejor para | Dificultad | Tiempo |
|---|---|---|---|
| Widget embed (etiqueta script) | La mayoría de sitios web, burbuja flotante de chat | Fácil | 2 minutos |
| iFrame embed | Ubicación inline dentro de una sección de página | Fácil | 5 minutos |
| Integración API | Frontends personalizados, apps móviles, workflows avanzados | Intermedia | 30+ minutos |
La mayoría debería empezar con el widget embed. Es una sola línea de código que añade una burbuja de chat a cada página de tu sitio. Los otros métodos existen para casos de uso específicos que cubrimos más abajo.
Este walkthrough refleja buenas prácticas actuales a abril de 2026, compiladas desde:
Donde los pasos difieren entre proveedores (por ejemplo, ubicación de claves API, configuración de webhooks, comportamiento del snippet embed), marcamos la discrepancia y mostramos ambos casos. Evitamos afirmaciones que no pudimos reproducir en un entorno real de prueba.
Antes de instalar nada, asegúrate de tener listo lo siguiente:
El widget embed es el método más común. Pegas una sola etiqueta script en tu sitio y aparece una burbuja de chat en la esquina inferior derecha de cada página. Los visitantes hacen clic para abrir una conversación.
Paso 1: inicia sesión en tu dashboard de Chatsy y navega a Settings > Embed.
Paso 2: copia tu script embed. Se ve así:
html<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>
Reemplaza YOUR_AGENT_ID por el ID real de tu agente desde el dashboard.
Paso 3: pega este script en el HTML de tu sitio web, justo antes de la etiqueta de cierre </body>. También puedes añadirlo dentro de la sección <head>. El atributo defer asegura que el script cargue sin bloquear tu página.
Paso 4: guarda y publica los cambios. Visita tu sitio y deberías ver el widget de chat en la esquina inferior derecha.
Eso es todo. El widget maneja todo: la interfaz de chat, historial de mensajes, indicadores de escritura y responsividad móvil. Configuras apariencia y comportamiento desde tu dashboard de Chatsy sin tocar código otra vez.
Usa un iFrame cuando quieras que el chatbot quede incrustado inline en una página específica en vez de como burbuja flotante. Esto es útil para páginas dedicadas de soporte, centros de ayuda o landing pages donde quieres que la interfaz de chat sea una parte visible del layout.
html<iframe src="https://chatsy.app/chatbot-iframe/YOUR_AGENT_ID" width="100%" height="600" style="border: none; border-radius: 12px;" title="Chat with us" ></iframe>
Puedes ajustar width y height para encajar con el layout de tu página. Coloca el iFrame dentro de cualquier contenedor en tu página. Funciona en todas las plataformas que permiten HTML personalizado.
Un tradeoff: el método iFrame no sigue a los visitantes entre páginas como lo hace el widget. Solo aparece donde lo colocas. Para la mayoría de empresas, el widget embed es el mejor default.
El método API es para desarrolladores que construyen interfaces de chat personalizadas, apps móviles o workflows complejos donde el widget estándar no encaja. En vez de usar una UI preconstruida, envías y recibes mensajes programáticamente mediante la API de Chatsy.
Este método requiere escribir código. Haces requests HTTP al endpoint de la API, manejas respuestas y construyes tu propia interfaz de chat. Te da control total sobre la experiencia de usuario, pero exige mucho más esfuerzo que los otros dos métodos.
El enfoque API es ideal cuando necesitas:
Una integración API básica implica enviar una request POST con el mensaje del usuario y recibir la respuesta del chatbot como JSON. Luego renderizas esa respuesta en la UI que hayas construido. La mayoría de plataformas proporciona SDKs o librerías cliente para simplificar el proceso.
Para la mayoría de sitios web, empieza con el widget embed. Siempre puedes migrar a la API después si tus necesidades superan el widget estándar.
WordPress impulsa más del 40% de la web, así que aquí es donde empieza la mayoría de personas. Tienes dos opciones: instalar un plugin o añadir manualmente el código embed.
Usar un plugin es el método más rápido y no requiere programar. El plugin maneja la carga del script, y la mayoría ofrece una página de ajustes donde puedes configurar el widget sin salir de WordPress.
Para un walkthrough detallado, consulta nuestra guía de integración con WordPress.
Si no hay plugin disponible, o prefieres control manual:
footer.php de tu tema activo.</body>:html<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>
Como alternativa, si usas un block theme o el Full Site Editor, añade un bloque Custom HTML a la plantilla de footer de tu sitio y pega el script ahí.
Importante: si actualizas o cambias tu tema de WordPress, quizá tengas que volver a añadir el script. Considera usar un plugin como Insert Headers and Footers para hacer persistente tu código entre cambios de tema.
Las tiendas Shopify se benefician enormemente de los chatbots. Manejan preguntas de producto, consultas de estado de pedido y preguntas de envío 24/7, lo que impacta directamente tasas de conversión.
Las instalaciones desde App Store se gestionan desde el panel admin de Shopify, lo que facilita actualizaciones y desinstalación.
Si tu plataforma de chatbot no aparece en Shopify App Store, añade el código manualmente:
theme.liquid.</body>.</body>:html<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>
El chatbot aparecerá ahora en cada página de tu tienda Shopify. Si usas una configuración headless de Shopify (Hydrogen o storefront personalizado), trátalo como un sitio personalizado y sigue las instrucciones en la sección Custom HTML/React/Next.js.
Para más detalles, consulta nuestra guía de integración con Shopify.
Wix no permite edición directa de HTML en el sentido tradicional, pero ofrece una función de código personalizado que funciona para embeds de chatbot.
html<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>
El widget de chatbot aparecerá en tu sitio Wix después de unos momentos. Quizá tengas que publicar tu sitio o limpiar la caché de Wix antes de que los cambios sean visibles para visitantes.
Algo a tener en cuenta: la vista previa del editor de Wix no siempre renderiza scripts personalizados. Si no ves el widget en el editor, revisa tu sitio publicado en vivo.
Para orientación adicional, consulta nuestra guía de integración con Wix.
Squarespace tiene una función integrada de inyección de código que hace sencillo añadir un chatbot.
html<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>
El widget de chatbot aparecerá ahora en cada página de tu sitio Squarespace.
Si quieres que el chatbot aparezca solo en páginas específicas en vez de todo el sitio, usa un Code Block dentro del editor de página:
Ten en cuenta que la inyección de código de Squarespace está disponible en planes Business y Commerce. Si estás en un plan Personal, necesitarás subir de plan para usar esta función.
Para el walkthrough completo, consulta nuestra guía de integración con Squarespace.
Webflow te da control fino sobre código personalizado, lo que hace que instalar un chatbot sea limpio y simple.
</body>), pega el script embed:html<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>
El widget aparecerá en cada página de tu sitio Webflow después de publicar. El código personalizado en Webflow solo corre en el sitio publicado, no en la vista previa del Designer, así que tendrás que publicar y revisar la URL en vivo para confirmar que el widget funciona.
Si quieres el chatbot solo en páginas específicas, usa el código personalizado a nivel de página de Webflow:
</body> tag.Para instrucciones completas, consulta nuestra guía de integración con Webflow.
Si gestionas tu propio código, tienes la máxima flexibilidad. Así se añade un chatbot a cada tipo de sitio personalizado.
Añade la etiqueta script a tu archivo HTML, justo antes de la etiqueta de cierre </body>:
html<!DOCTYPE html> <html> <head> <title>Your Website</title> </head> <body> <!-- Your page content --> <script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script> </body> </html>
Eso es todo. El script carga de forma asíncrona y no afecta la velocidad de carga de tu página.
Añade la etiqueta script a tu archivo public/index.html, igual que harías con HTML plano. Como alternativa, cárgalo dinámicamente en tu componente raíz:
jsximport { useEffect } from 'react'; function App() { useEffect(() => { const script = document.createElement('script'); script.src = 'https://chatsy.app/api/embed-script/YOUR_AGENT_ID'; script.defer = true; document.body.appendChild(script); return () => { document.body.removeChild(script); }; }, []); return <div>{/* Your app */}</div>; }
En Next.js, usa el componente integrado next/script. Añádelo a tu archivo de layout raíz (app/layout.tsx o pages/_app.tsx):
tsximport Script from 'next/script'; export default function RootLayout({ children }) { return ( <html> <body> {children} <Script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" strategy="lazyOnload" /> </body> </html> ); }
La estrategia lazyOnload asegura que el script del chatbot cargue después de que la página sea completamente interactiva, manteniendo intactas tus puntuaciones de Core Web Vitals.
Una vez instalado el chatbot, personalízalo para que encaje con tu marca y realmente ayude a visitantes. La mayoría de la personalización se hace desde el dashboard de tu plataforma de chatbot, no en código.
Haz que el widget de chat coincida con el esquema de color de tu sitio. En Chatsy, ve a Settings > Appearance para definir tu color principal, color de texto y fondo. Un widget que se ve como si perteneciera a tu sitio genera más confianza que uno genérico.
El primer mensaje que ven los visitantes importa. Evita saludos genéricos como "Hello! How can I help you?" En su lugar, sé específico: "Hola. Pregúntame lo que quieras sobre nuestros precios, funciones o cómo empezar." Un saludo claro define expectativas y fomenta la interacción.
La posición por defecto abajo a la derecha funciona para la mayoría de sitios. Si tu sitio tiene un botón de acción flotante u otro elemento en esa esquina, mueve el chatbot abajo a la izquierda. Asegúrate de que no se solape con banners de cookies, botones de volver arriba u otros elementos fijos.
Si tu audiencia es multilingüe, configura el chatbot para detectar el idioma del navegador del visitante y responder en consecuencia. Chatsy soporta detección automática de idioma para más de 50 idiomas. Define el idioma por defecto en tu dashboard bajo Settings > General.
Si tienes agentes en vivo, configura el chatbot para mostrar estado de disponibilidad. Cuando los agentes estén offline, el chatbot debe avisar a los visitantes y ofrecer recopilar su email para seguimiento. Esto evita la frustración de solicitudes de live chat sin respuesta.
Después de ayudar a miles de empresas a instalar chatbots, estos son los cinco errores que vemos con más frecuencia. Evítalos para ahorrar tiempo y frustración.
Añadir un chatbot que no puede responder las preguntas de tus clientes es peor que no tener chatbot. Los visitantes lo probarán una vez, recibirán una respuesta inútil y no volverán a confiar en él. Antes de salir en vivo, sube tus artículos de ayuda, FAQ y documentación de producto. Prueba las 20 preguntas más comunes que recibe tu equipo de soporte. Si el chatbot no puede responderlas con precisión, sigue entrenando antes de lanzarlo. Un chatbot bien entrenado que maneja correctamente el 80% de preguntas desde el primer día genera confianza. Uno que adivina mal la pierde para siempre. Consulta nuestra guía sobre errores comunes de chatbot para más sobre esto.
Algunas empresas hacen el widget diminuto, transparente o escondido en un submenú. Si los clientes no lo encuentran, no lo usarán. Mantén el widget visible en una posición estándar (esquina inferior derecha o inferior izquierda). Usa un color contrastante para que destaque sobre el fondo.
Los chatbots de IA son buenos, pero no perfectos. Algunas preguntas requieren un humano: disputas complejas de facturación, asuntos sensibles de cuenta o situaciones donde el cliente está molesto y necesita empatía que la IA no puede dar. Si tu chatbot no tiene ruta de escalado, los clientes frustrados se irán de tu sitio en vez de recibir ayuda. Configura reglas de handoff para que las conversaciones se enruten a un agente en vivo cuando el chatbot no esté seguro, cuando el cliente pida explícitamente un humano o cuando el tema implique facturación, reembolsos o seguridad de cuenta. Un handoff fluido conserva el contexto de la conversación para que el cliente no tenga que repetirse.
Más de la mitad del tráfico web es móvil, y en sitios ecommerce ese número suele acercarse al 70%. Prueba tu chatbot en un teléfono real, no solo en el modo responsive del navegador. Asegúrate de que el widget no cubra elementos críticos de la página como botones "Add to Cart" o menús de navegación. Verifica que la ventana de chat sea usable en pantallas pequeñas, que el texto se lea sin zoom y que el botón de cierre sea fácil de tocar. La mayoría de widgets modernos de chatbot son responsive por defecto, pero siempre verifica en dispositivos iOS y Android antes de salir en vivo.
Si instalas el chatbot mediante un plugin y además pegas manualmente el código embed, tendrás widgets duplicados. Esto causa glitches visuales, mensajes dobles y una mala experiencia. Elige un método de instalación y mantente con él.
Antes de anunciar tu chatbot al mundo, recorre este checklist:
Funcionalidad:
Apariencia:
Rendimiento:
Casos límite:
Si todo pasa, estás listo para salir en vivo.
Espera si no has escrito contenido fuente para que el bot se apoye en él: una base de conocimiento vacía produce un bot vacío, y ningún código embed puede arreglar eso. Espera si tu ruta de conversión ya está bien afinada y el chat solo añadiría ruido de UI (página de precios limpia, checkout rápido, bajo volumen de soporte): añadir un widget solo por tenerlo puede dañar la conversión móvil. Y espera si no puedes comprometer al menos una hora por semana a revisar transcripciones durante el primer mes: un chatbot lanzado y olvidado se degrada rápido y empieza a parecer más tonto de lo que es. Es mejor retrasar el lanzamiento que publicar uno y abandonarlo.
No. El script embed usa el atributo defer, lo que significa que carga después de que el contenido de tu página haya terminado de renderizar. El script en sí es ligero (normalmente menos de 50 KB). No debería tener impacto medible en tus Core Web Vitals ni velocidad de carga.
Sí. La mayoría de plataformas de chatbot, incluyendo Chatsy, te permiten crear múltiples agentes bajo una sola cuenta. Cada agente obtiene su propio código embed y puede entrenarse con contenido diferente. Esto es útil si gestionas varias marcas o propiedades.
No para el método de widget embed. Si puedes copiar y pegar una línea de código en los ajustes de tu sitio web, puedes instalar un chatbot. Las secciones específicas por plataforma más arriba ofrecen instrucciones paso a paso para cada CMS. Para el método de integración API, sí necesitarás experiencia de desarrollo.
Elimina el script embed de donde lo hayas colocado: archivo de tema, ajustes de inyección de código o plugin. Si lo instalaste mediante un plugin, desactivar y eliminar el plugin quitará el chatbot. La eliminación tiene efecto de inmediato al guardar y publicar.
Sí. La mayoría de plataformas de chatbot te permite configurar el bot para pedir nombre y email del visitante antes o durante la conversación. En Chatsy, puedes configurarlo bajo Settings > Lead Capture. La información recopilada se sincroniza con tu dashboard y puede exportarse o enviarse a tu CRM mediante integraciones.
Ahora tienes un chatbot funcionando en tu sitio web. Esto es lo que debes hacer después:
Si aún no has creado tu chatbot, empieza gratis con Chatsy. Puedes tener un chatbot entrenado y personalizado en vivo en tu sitio en menos de 10 minutos.
Una guía completa para añadir live chat a tu sitio web. Desde elegir una plataforma hasta instalar el widget, personalizarlo, entrenar la IA y salir en vivo, con instrucciones específicas para Shopify, WordPress, Webflow y sitios personalizados.