Introducción
En esta lección aprenderás cómo crear una aplicación independiente desde tu chatbot de Flowise. Esta es una de las funcionalidades más poderosas que puedes implementar, ya que te permite crear aplicaciones autónomas y también integrar tu chatbot en páginas web.
Opciones de Implementación
Para crear tu aplicación independiente, Flowise te ofrece varias opciones:
Opciones de Integración
- Código de integración (Embed)
- Pop-up HTML
- Página completa HTML
- Pop-up React
- Página completa React
Opciones para Desarrolladores
Para desarrolladores Python: Puedes importar tu chatbot directamente en tus aplicaciones Python.
Para desarrolladores JavaScript: Puedes integrar el chatbot usando una función JavaScript específica. Solo necesitas copiar el fragmento de código proporcionado.
Para webhooks: Utiliza el comando cURL que se proporciona automáticamente.
Creando una Aplicación Independiente
Paso 1: Compartir el Chatbot
- Presiona el botón «Share Chatbot» (Compartir Chatbot)
- Esto te permitirá abrir tu chatbot como una aplicación independiente
Paso 2: Configurar la Autorización
- Antes de compartir, haz clic en la configuración de autorización
- Puedes agregar una clave por defecto o crear una nueva clave
- Para este ejemplo, no usaremos autorización, así que desmarca las opciones de seguridad
Paso 3: Hacer Público el Chatbot
- Activa la opción «Make Public» (Hacer Público) si quieres que otras personas puedan acceder
- Importante: Si tu aplicación solo funciona localmente con Node.js, otras personas no podrán acceder a ella
- Para que sea accesible públicamente, necesitas alojar la aplicación en un servidor
Paso 4: Acceder al Chatbot
- Copia la URL proporcionada o presiona «Open in New Chat» (Abrir en Nueva Conversación)
- Si configuraste la opción pública correctamente, no necesitarás usuario y contraseña
Personalización de la Interfaz
Configuración del Título
- Ve a «Title Settings» (Configuración del Título)
- Cambia «FlowWise Assistant» por el nombre que prefieras (ej: «Bot de Prompting»)
- Guarda los cambios y recarga la página para ver el resultado
Personalización Visual
Avatar del Título:
- Puedes agregar un avatar proporcionando un enlace a una imagen
- Comúnmente se alojan las imágenes en GitHub o en tu servidor
Colores del Título:
- Color de fondo del título: Cambia el color de la barra superior
- Color del texto del título: Modifica el color del texto del título
Configuración General
Mensaje de Bienvenida: Personaliza el primer mensaje que verán los usuarios (ej: «¡Hola! Dime qué necesitas, pero debe ser sobre prompting»)
Mensaje de Error: Define qué mensaje aparecerá si ocurre un error (ej: «Lo siento, ocurrió un error»)
Apariencia General:
- Color de fondo: Cambia el color de fondo de toda la interfaz
- Tamaño de fuente: Ajusta el tamaño del texto (ej: 18px)
- Color del texto «Powered by»: Modifica el color del texto inferior
Configuración de Mensajes
Mensajes del Bot:
- Color de fondo de los mensajes
- Color del texto
- Enlace del avatar
- Mostrar/ocultar avatar
Mensajes del Usuario:
- Las mismas opciones que los mensajes del bot
Campo de Entrada de Texto:
- Color de fondo del campo
- Color del texto
- Texto de placeholder (ej: «Dime algo…»)
- Color del botón de envío
Truco para Ocultar «Powered by Flowise»
Si no quieres que aparezca el texto «Powered by Flowise» en la parte inferior:
- Ve a la configuración de color de fondo general
- Establece el color de fondo en blanco
- Cambia el color del texto «Powered by» también a blanco
- Guarda los cambios
Resultado: El texto seguirá estando ahí técnicamente, pero será invisible porque será texto blanco sobre fondo blanco.
Limitaciones Importantes
Acceso Local vs. Público
- Local: Si tu aplicación solo funciona en localhost, solo tú podrás acceder a ella
- Público: Para que otros usuarios puedan acceder, necesitas alojar tu aplicación en un servidor como Render u otros servicios de hosting
Para Integración Profesional
Para implementaciones más profesionales, especialmente cuando integres el chatbot en páginas web usando el código de embed, podrás hacer modificaciones más avanzadas directamente en el código.
Conclusión
Has aprendido cómo crear una aplicación independiente de tu chatbot de Flowise. Aunque por ahora funciona solo localmente, en lecciones posteriores aprenderás cómo alojar tu aplicación para que sea accesible públicamente. Esta funcionalidad te proporciona una interfaz completa y personalizable para interactuar con tu chatbot de manera profesional.