Principle:FlowiseAI Flowise Chatbot Appearance Customization
| Attribute | Value |
|---|---|
| Page Name | Chatbot_Appearance_Customization |
| Workflow | Chatbot_Deployment |
| Repository | FlowiseAI/Flowise |
| Domain | UI Theming, Branding, Deployment |
| Source | packages/ui/src/api/chatflows.js:L13, packages/ui/src/views/chatflows/ShareChatbot.jsx |
| Last Updated | 2026-02-12 14:00 GMT |
Overview
Technique for customizing the visual appearance and behavior of a deployed chatbot widget including colors, avatars, messages, and starter prompts.
Description
The chatbot widget's appearance is fully customizable through a chatbotConfig JSON object stored on the chatflow record. Configuration covers: bot and user message colors, avatar images, text input styling, title, welcome message, starter prompt suggestions, font size, and custom CSS. These settings apply to both the public chatbot page and embedded widgets.
The configuration is organized into several sections:
Title Settings
title-- The chatbot window title texttitleAvatarSrc-- URL to an image displayed next to the titletitleBackgroundColor-- Background color of the title bar (default:#3B81F6)titleTextColor-- Text color of the title (default:#ffffff)
General Settings
welcomeMessage-- Initial message displayed when the chatbot openserrorMessage-- Custom error message for failed requestsbackgroundColor-- Background color of the chat window (default:#ffffff)fontSize-- Base font size in pixels (default:16)poweredByTextColor-- Color of the "Powered by" footer text (default:#303235)showAgentMessages-- Toggle for showing agent reasoning steps (for agent-based flows)renderHTML-- Toggle for rendering HTML content in messagesgenerateNewSession-- Whether to create a new session on page load/refresh
Message Styling
- Bot Message:
botMessage.backgroundColor,botMessage.textColor,botMessage.avatarSrc,botMessage.showAvatar - User Message:
userMessage.backgroundColor,userMessage.textColor,userMessage.avatarSrc,userMessage.showAvatar
Text Input Styling
textInput.backgroundColor-- Background color of the input fieldtextInput.textColor-- Text color of user inputtextInput.placeholder-- Placeholder text in the input fieldtextInput.sendButtonColor-- Color of the send button
The ShareChatbot.jsx component (594 lines) provides a comprehensive form for editing all these settings with live color pickers (using SketchPicker) and text inputs. Changes are saved by serializing the configuration to JSON and calling the updateChatflow API.
Usage
Use this principle when branding and customizing a chatbot's visual appearance for deployment. Apply when:
- Matching the chatbot to a corporate brand color scheme
- Setting up a customized welcome experience with greetings and starter prompts
- Providing custom avatar images for bot and user messages
- Adjusting the chatbot for specific visual requirements (font size, placeholder text)
Theoretical Basis
This technique implements the configuration-driven UI theming pattern. A single JSON configuration object drives all visual aspects of the chat widget, enabling consistent branding across different deployment methods (public URL, embedded widget).
The pattern has several design properties:
- Single source of truth: All appearance settings are stored in one
chatbotConfigJSON string on the chatflow record. This avoids scattering theme settings across multiple storage locations. - Merge-with-defaults: The UI initializes each setting from the stored config, falling back to default values from the
defaultConfigobject. This ensures the chatbot always has valid appearance settings even when configuration is partial. - Serialization boundary: The
chatbotConfigis stored as a JSON string (not a nested database structure), providing flexibility to add new configuration fields without schema migrations. - Deployment-agnostic: The same configuration applies whether the chatbot is accessed via the public URL or loaded through an embedded widget. The
flowise-embedlibrary reads the same configuration format.
The color picker integration (react-color SketchPicker) provides a visual editing experience that maps directly to CSS hex color values, eliminating the need for users to know color codes.