7.4- Mejorando el Diseño y Marca del Chatbot LangGraph en Replit

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

1. Busca «Replit» en Google y accede al primer enlace
2. Crea una cuenta o inicia sesión
3. Navega a la sección «Apps»

Paso 2: Creación del Proyecto

1. Haz clic en «Create» (Crear)
2. Selecciona «HTML» como tipo de proyecto
3. Nombra tu proyecto (ejemplo: «Fluit»)
4. Presiona «Create App»

Integración Básica del Chatbot

Paso 3: Obtener el Código de Inserción

1. Accede a tu plataforma Flowwise
2. Localiza tu chatbot y haz clic en el botón de inserción
3. 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>

4. Pega el código en el cuerpo de tu página HTML en Replit
5. 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:

1. En Flowwise, selecciona «Show embed config file»
2. Copia todo el código de configuración
3. 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:

1. Eliminar «Powered by FlowWise»: // Comentar o eliminar estas líneas // poweredByText: "Powered by FlowWise" // poweredByLink: "https://flowwise.ai"
2. Remover prompts predeterminados: // Eliminar o comentar // starterPrompts: ["What is a bot?", "Who are you?"]
3. 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:

1. Exportar el código: Copia el script completo personalizado
2. Documentar cambios: Mantén un registro de todas las personalizaciones
3. 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.