Introducción
En esta lección aprenderás a personalizar completamente el diseño y la marca de tu chatbot RecChat, eliminando elementos genéricos y creando una experiencia profesional lista para producción. Utilizaremos Replit como plataforma de desarrollo para crear una interfaz web personalizada.
Preparación del Chatbot
Antes de comenzar con el diseño, es importante destacar las mejoras realizadas al bot:
- Optimización del prompt del sistema: Se implementó un prompt en alemán más efectivo
- Refinamiento de datos de entrenamiento: Se eliminó markdown innecesario para obtener datos más limpios
- Reducción de la base de datos vectorial: Se optimizó a solo 531 registros en PineCone
- Mejora del rendimiento: El chatbot ahora funciona de manera más eficiente
Configuración de Replit
Paso 1: Acceso a Replit
- Busca «Replit» en Google y accede al primer enlace
- Crea una cuenta o inicia sesión
- Navega a la sección «Apps»
Paso 2: Creación del Proyecto
- Haz clic en «Create» (Crear)
- Selecciona «HTML» como tipo de proyecto
- Nombra tu proyecto (ejemplo: «Fluit»)
- Presiona «Create App»
Integración Básica del Chatbot
Paso 3: Obtener el Código de Inserción
- Accede a tu plataforma Flowwise
- Localiza tu chatbot y haz clic en el botón de inserción
- Copia el código script del pop-up HTML
Paso 4: Inserción Inicial
<!-- Insertar en el body de tu HTML -->
<script>
// Código del chatbot de Flowwise
</script>
- Pega el código en el cuerpo de tu página HTML en Replit
- Ejecuta el proyecto y recarga la página si es necesario
Personalización Avanzada del Chatbot
Paso 5: Configuración Personalizada
Para mayor control sobre el diseño, utiliza el «embed config file» completo:
- En Flowwise, selecciona «Show embed config file»
- Copia todo el código de configuración
- Reemplaza el script básico con esta versión extendida
Configuraciones Principales
Nombre y Branding
// Cambiar el nombre del bot
botName: "aetardoc" // Reemplazar "FlowWise bot"
Posicionamiento y Tamaño
// Posición del botón flotante
bottom: 20, // Distancia desde abajo
right: 20, // Distancia desde la derecha
size: 48, // Tamaño del botón
Colores y Diseño
// Personalización visual
iconColor: "white", // Color del ícono
backgroundColor: "#azul", // Color de fondo
textColor: "#negro", // Color del texto
fontSize: 16 // Tamaño de fuente
Dimensiones de la Ventana
// Tamaño de la ventana del chat
height: 600, // Altura
width: 600 // Ancho (ajustar según necesidades)
Paso 6: Mensajes Personalizados
Mensaje de Bienvenida
Reemplaza el mensaje genérico con uno específico en alemán:
welcomeMessage: "Hola, cuéntame qué te está molestando"
Placeholder del Input
inputPlaceholder: "Escribe tu pregunta aquí"
Límite de Caracteres
maxCharacters: 1000, // Aumentar de 50 a 1000
characterLimitMessage: "Has excedido el límite de caracteres"
Paso 7: Eliminación de Branding Genérico
Para crear una experiencia completamente personalizada:
- Eliminar «Powered by FlowWise»:
// Comentar o eliminar estas líneas // poweredByText: "Powered by FlowWise" // poweredByLink: "https://flowwise.ai"
- Remover prompts predeterminados:
// Eliminar o comentar // starterPrompts: ["What is a bot?", "Who are you?"]
- Personalizar disclaimer:
disclaimer: "Al usar este chatbot aceptas los términos de uso"
Optimizaciones Finales
Configuración de Producción
Validación de Funcionalidad
- Prueba todas las interacciones del chatbot
- Verifica que los mensajes en alemán se muestren correctamente
- Confirma que el diseño sea responsive
Guardado del Código
<!-- Ejemplo de código final personalizado -->
<script>
// Tu configuración completa personalizada aquí
</script>
Importante: Guarda todo el código personalizado en un archivo de texto para su uso posterior en la implementación del cliente.
Próximos Pasos
Una vez completada la personalización:
- Exportar el código: Copia el script completo personalizado
- Documentar cambios: Mantén un registro de todas las personalizaciones
- Preparar para integración: El código estará listo para WordPress o HTML estático
Consejos Adicionales
- Colores: Puedes usar ChatGPT para generar esquemas de colores atractivos
- Iconos personalizados: Incluye iconos específicos de tu marca si es necesario
- Responsive design: Ajusta las dimensiones según diferentes dispositivos
- Testing: Siempre prueba en diferentes navegadores antes de la implementación final
Conclusión
Con estas personalizaciones, tu chatbot RecChat tendrá una apariencia profesional y específica para tu cliente, eliminando cualquier referencia genérica a las herramientas utilizadas en su desarrollo. El resultado es un chatbot completamente integrado que parece parte natural del sitio web del cliente.