¡Hola y bienvenido/a a este completo tutorial sobre despliegue e integración! En este vídeo, nos centraremos en cómo incrustar (embed) tus chatbots de Flowise en sitios web y aplicaciones.
Te mostraré cuatro formas diferentes de integrar tu flujo de chat. No importa si trabajas con HTML puro o con aplicaciones modernas como React, este vídeo es para ti. Al final de la lección, sabrás cómo llevar tu chatbot del desarrollo a la producción de forma sencilla.
¿Qué Necesitas para Empezar?
- Una instancia de Flowise funcionando (ya sea en local o en un servidor).
- Un flujo de chat completo y guardado (usaremos el Chatbot RAG que construimos en el mini-proyecto).
- Un editor de código (como Visual Studio Code, Sublime Text, etc.).
Paso 1: Obtén tu Código de Inserción (Embed Code)
Este es el paso más importante, y Flowise nos lo pone increíblemente fácil.
- Navega a tu panel de control de Flowise y abre el flujo de chat que quieres incrustar.
- En la barra de herramientas superior, busca el botón
Embed, que normalmente tiene un icono de código (</>). - Al hacer clic, se abrirá un panel con todas las opciones de integración. ¡Aquí es donde ocurre la magia!
Verás cuatro pestañas principales. Flowise genera automáticamente el código para cada una, incluyendo el ID de tu flujo y la dirección de tu API. ¡No necesitas copiar estos valores manualmente!
- Pop-up HTML: Genera el código para una burbuja de chat flotante que aparece en la esquina de una página web.
- Full Page HTML: Genera el código para una página de chat que ocupa la pantalla completa.
- Pop-up React: Ofrece las opciones para integrar la burbuja de chat en una aplicación de React.
- Full Page React: El código para una página de chat completa en React.
Cada fragmento de código tiene un práctico botón para copiarlo directamente.
Paso 2: Integración en HTML (Pop-up)
Empecemos con la opción más común: una burbuja de chat para un sitio web HTML.
- En tu editor de código, crea un nuevo archivo llamado
index.html. - Crea una estructura HTML básica.
- Vuelve a Flowise, ve a la pestaña
Pop-up HTMLy copia el código. - Pega ese código justo antes de la etiqueta de cierre
</body>en tu archivo HTML.
Tu código se verá así:
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página con Chatbot</title>
</head>
<body>
<h1>¡Bienvenido a mi sitio web!</h1>
<p>Habla con nuestro asistente en la esquina inferior derecha.</p>
<script type="module">
import { init } from 'https://cdn.jsdelivr.net/npm/flowise-embed@latest/dist/web.js'
init({
chatflowid: "TU_CHATFLOW_ID",
apiHost: "http://localhost:3000",
});
</script>
</body>
</html>- Guarda el archivo y ábrelo en tu navegador. ¡Verás tu página web con la burbuja de chat de Flowise flotando en la esquina, lista para usar!
Paso 3: Integración en HTML (Página Completa)
Ahora, veamos cómo crear una página dedicada exclusivamente al chat.
- Crea un nuevo archivo, llámalo
chat_fullpage.html. - Crea de nuevo una estructura HTML básica.
- Vuelve a Flowise, ve a la pestaña
Full Page HTMLy copia el código. - Pega el código dentro de la etiqueta
<body>.
El código será ligeramente diferente:
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Asistente de IA</title>
</head>
<body>
<flowise-fullchatbot></flowise-fullchatbot>
<script type="module">
import { initFull } from "https://cdn.jsdelivr.net/npm/flowise-embed@latest/dist/web.js";
initFull({
chatflowid: "TU_CHATFLOW_ID",
apiHost: "http://localhost:3000",
});
</script>
</body>
</html>- Guarda y abre este nuevo archivo en tu navegador. Ahora verás que el chatbot ocupa toda la ventana. Esto es perfecto para páginas de soporte o experiencias móviles donde el chat es la interfaz principal.
Conclusión
¡Felicidades! Has aprendido las dos formas más directas de desplegar tu chatbot Flowise en cualquier página web.
- Pop-up HTML: Ideal para añadir un asistente a un sitio web existente.
- Full Page HTML: Perfecto para crear una experiencia de chat inmersiva y dedicada.
La belleza de Flowise es que, una vez que has construido y perfeccionado tu flujo, el despliegue está a solo unas pocas líneas de código de distancia.
Espero que este tutorial te haya sido de gran ayuda. En el próximo, exploraremos otras formas más avanzadas de integrar nuestros flujos de chat.
¡Muchas gracias!