Cómo añadir un chatbot a tu sitio web (WordPress, Shopify, Wix y más)
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.
Resumen rápido: 3 formas de añadir un chatbot a tu sitio web
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.
Cómo construimos esta guía
Este walkthrough refleja buenas prácticas actuales a abril de 2026, compiladas desde:
- Pruebas directas en las principales plataformas de chatbot y live chat dentro de cuentas reales de clientes al trabajar en la inserción de un widget de chatbot.
- Verificación cruzada de documentación contra guías publicadas por proveedores y changelogs.
- Hilos de Reddit y Stack Overflow donde practitioners reportan qué funcionó y qué falló durante implementaciones reales.
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.
Qué necesitas antes de empezar
Antes de instalar nada, asegúrate de tener listo lo siguiente:
- Una cuenta en una plataforma de chatbot. Si aún no tienes una, regístrate en Chatsy o elige otro proveedor. Consulta nuestra guía completa para construir chatbots de IA si empiezas desde cero.
- El ID de tu agente de chatbot. En Chatsy, lo encontrarás en Settings > Embed después de crear tu primer agente. Otras plataformas proporcionan un identificador similar o código embed.
- Acceso al código o CMS de tu sitio web. Necesitas poder añadir HTML personalizado, JavaScript o instalar plugins en tu sitio. Si alguien más gestiona tu sitio, envíale esta guía.
- Contenido de tu base de conocimiento (recomendado). Artículos de ayuda, FAQ, documentación de producto o cualquier contenido que quieras que el chatbot use como referencia. Puedes añadirlo después de instalar, pero tenerlo listo acelera el proceso.
- 5-10 minutos. Eso es realmente todo lo que toma con el método de widget embed.
3 formas de añadir un chatbot a tu sitio web
Método 1: widget embed (recomendado)
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.
Método 2: iFrame embed
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.
Método 3: integración API
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:
- Construir una interfaz de chat dentro de una app móvil nativa (iOS o Android).
- Integrar respuestas del chatbot en una aplicación existente o herramienta interna.
- Crear workflows personalizados que combinen respuestas del chatbot con otra lógica de negocio.
- Construir una experiencia completamente de marca sin elementos UI de terceros.
- Conectar el chatbot a sistemas backend como bases de datos de pedidos o CRMs en tiempo real.
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.
Añadir un chatbot a WordPress
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.
Opción A: instalación por plugin
- Inicia sesión en tu panel de administración de WordPress.
- Ve a Plugins > Add New.
- Busca el plugin de tu plataforma de chatbot (por ejemplo, "Chatsy" o el nombre de tu proveedor).
- Haz clic en Install Now, luego Activate.
- Navega a la página de ajustes del plugin. Ingresa tu agent ID o API key.
- Guarda los ajustes. El widget aparecerá ahora en tu sitio.
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.
Opción B: embed manual
Si no hay plugin disponible, o prefieres control manual:
- Ve a Appearance > Theme Editor en tu admin de WordPress (o usa el Theme File Editor bajo Tools en versiones más nuevas).
- Abre el archivo
footer.phpde tu tema activo. - Pega el script embed justo antes de la etiqueta de cierre
</body>:
html<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>
- Haz clic en Update File.
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.
Añadir un chatbot a Shopify
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.
Opción A: Shopify App Store
- Visita la Shopify App Store y busca tu plataforma de chatbot.
- Haz clic en Add app y autoriza la instalación.
- Sigue el asistente de setup de la app para conectar tu agente de chatbot.
- El widget aparecerá automáticamente en tu storefront.
Las instalaciones desde App Store se gestionan desde el panel admin de Shopify, lo que facilita actualizaciones y desinstalación.
Opción B: embed manual en theme.liquid
Si tu plataforma de chatbot no aparece en Shopify App Store, añade el código manualmente:
- En tu admin de Shopify, ve a Online Store > Themes.
- Haz clic en el menú de tres puntos junto a tu tema activo, luego selecciona Edit code.
- En la barra lateral izquierda, abre la carpeta Layout y haz clic en
theme.liquid. - Desplázate al final del archivo. Busca la etiqueta de cierre
</body>. - Pega el script embed justo encima de
</body>:
html<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>
- Haz clic en Save.
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.
Añadir un chatbot a Wix
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.
Pasos
- Inicia sesión en tu dashboard de Wix.
- Ve a Settings en la barra lateral izquierda.
- Haz clic en Custom Code bajo la sección Advanced. (Si no ves esta opción, quizá necesites un plan Wix Premium).
- Haz clic en + Add Custom Code.
- Pega el script embed:
html<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>
- Bajo Place Code in, selecciona Body - end.
- Bajo Add Code to Pages, selecciona All pages (o elige páginas específicas si prefieres).
- Haz clic en Apply.
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.
Añadir un chatbot a Squarespace
Squarespace tiene una función integrada de inyección de código que hace sencillo añadir un chatbot.
Pasos
- En tu dashboard de Squarespace, ve a Settings.
- Haz clic en Advanced en la barra lateral izquierda, luego selecciona Code Injection.
- En el campo Footer, pega el script embed:
html<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>
- Haz clic en Save.
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:
- Edita la página donde quieres el chatbot.
- Añade un Code Block (Insert Point > Code).
- Pega el script embed y desactiva el toggle Display Source.
- Guarda la 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.
Añadir un chatbot a Webflow
Webflow te da control fino sobre código personalizado, lo que hace que instalar un chatbot sea limpio y simple.
Pasos
- Abre tu proyecto en Webflow Designer.
- Ve a Project Settings (icono de engranaje en el panel izquierdo).
- Haz clic en la pestaña Custom Code.
- En la sección Footer Code (antes de la etiqueta
</body>), pega el script embed:
html<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>
- Haz clic en Save Changes.
- Publica tu sitio para que los cambios salgan en vivo.
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:
- Selecciona la página en el panel Pages.
- Haz clic en el icono de engranaje junto al nombre de la página.
- Desplázate a Custom Code y añade el script en el campo Before
</body>tag. - Publica.
Para instrucciones completas, consulta nuestra guía de integración con Webflow.
Añadir un chatbot a sitios Custom HTML, React o Next.js
Si gestionas tu propio código, tienes la máxima flexibilidad. Así se añade un chatbot a cada tipo de sitio personalizado.
HTML plano
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.
React (Create React App, Vite, etc.)
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>; }
Next.js
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.
Personalizar tu chatbot
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.
Colores y branding
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.
Mensaje de bienvenida
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.
Posición del widget
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.
Idioma
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.
Horarios de operación y fallback
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.
Errores comunes que debes evitar
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.
1. Lanzar sin entrenar la IA
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.
2. Ocultar el chatbot
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.
3. No configurar handoff humano
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.
4. Olvidar móvil
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.
5. Añadir el script varias veces
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.
Probar tu chatbot
Antes de anunciar tu chatbot al mundo, recorre este checklist:
Funcionalidad:
- El widget carga en navegadores desktop (Chrome, Firefox, Safari, Edge).
- El widget carga en dispositivos móviles (iOS Safari, Android Chrome).
- Abrir y cerrar la ventana de chat funciona con fluidez.
- Los mensajes se envían y reciben correctamente.
- El chatbot responde con respuestas precisas y relevantes.
- El handoff humano se dispara cuando debe.
Apariencia:
- Los colores del widget coinciden con tu marca.
- El mensaje de bienvenida se muestra correctamente.
- El widget no se solapa con otros elementos de la página.
- La ventana de chat es legible en pantallas móviles.
- La posición del widget es consistente en todas las páginas.
Rendimiento:
- La carga de tu sitio no se ve afectada de forma notable.
- El widget carga en pocos segundos después de la carga de página.
- No hay errores JavaScript en la consola del navegador relacionados con el chatbot.
Casos límite:
- El chatbot maneja mensajes sin sentido o fuera de tema con gracia.
- Los mensajes largos no rompen el layout del chat.
- Refrescar la página conserva la conversación (si tu plataforma lo soporta).
- El chatbot funciona correctamente detrás de una VPN o en modo incógnito.
Si todo pasa, estás listo para salir en vivo.
Cuándo un chatbot es la jugada equivocada ahora mismo
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.
Preguntas frecuentes
¿Un chatbot ralentizará mi sitio web?
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.
¿Puedo añadir un chatbot a varios sitios web con una cuenta?
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.
¿Necesito saber programar para instalar un chatbot?
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.
¿Cómo elimino el chatbot si cambio de opinión?
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.
¿El chatbot puede recopilar leads y emails?
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.
Siguientes pasos
Ahora tienes un chatbot funcionando en tu sitio web. Esto es lo que debes hacer después:
- Entrénalo a fondo. Sube toda tu base de conocimiento y prueba cada pregunta común. Cuanto más contenido le des, más precisas serán sus respuestas.
- Monitorea conversaciones. Revisa transcripciones de chat en tu dashboard durante la primera semana. Busca preguntas con las que el chatbot tenga problemas y añade datos de entrenamiento para cubrir las brechas.
- Rastrea métricas. Mide tasa de resolución, satisfacción del cliente y tasa de handoff. Estos números te dicen si el chatbot ayuda o frustra a visitantes. Consulta nuestra guía sobre métricas de chatbot a rastrear para detalles.
- Itera. Un chatbot no es una herramienta de configurar y olvidar. Actualiza sus datos de entrenamiento conforme evoluciona tu producto, cambian tus FAQ y se desplazan las preguntas de clientes.
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.