Implementation:FlowiseAI Flowise UpdateChatflow Appearance

Attribute	Value
Page Name	UpdateChatflow_Appearance
Workflow	Chatbot_Deployment
Repository	FlowiseAI/Flowise
Domain	UI Theming, Branding, Deployment
Source	packages/ui/src/api/chatflows.js:L13
Last Updated	2026-02-12 14:00 GMT

Overview

API call implementation for updating a chatflow's visual appearance configuration via the chatbotConfig JSON field.

Code Reference

Source Location

File: packages/ui/src/api/chatflows.js, line 13
UI Component: packages/ui/src/views/chatflows/ShareChatbot.jsx, lines 100-594 (appearance settings form and save logic)

Signature

const updateChatflow = (id, body) => client.put(`/chatflows/${id}`, body)

For appearance configuration, the body parameter includes a chatbotConfig field containing a JSON-serialized string.

Import

import chatflowsApi from '@/api/chatflows'

The API client is configured at packages/ui/src/api/client.js with base URL ${baseURL}/api/v1.

I/O Contract

Inputs

Parameter	Type	Description
`id`	`string`	The chatflow ID to update
`body`	`object`	Object containing `chatbotConfig: string` (JSON string)

The chatbotConfig JSON string has the following structure:

{
  // Title settings
  title: string,                        // Chatbot window title
  titleAvatarSrc: string,               // URL for title avatar image
  titleBackgroundColor: string,         // Hex color (default: '#3B81F6')
  titleTextColor: string,               // Hex color (default: '#ffffff')

  // General settings
  welcomeMessage: string,               // Initial greeting message
  errorMessage: string,                 // Custom error message
  backgroundColor: string,             // Chat window background (default: '#ffffff')
  fontSize: number,                     // Base font size in pixels (default: 16)
  poweredByTextColor: string,           // Footer text color (default: '#303235')
  showAgentMessages: boolean,           // Show agent reasoning (agent flows)
  renderHTML: boolean,                  // Render HTML in messages
  generateNewSession: boolean,          // New session on page load

  // Bot message styling
  botMessage: {
    backgroundColor: string,            // Default: '#f7f8ff'
    textColor: string,                  // Default: '#303235'
    avatarSrc: string,                  // URL for bot avatar image
    showAvatar: boolean                 // Default: false
  },

  // User message styling
  userMessage: {
    backgroundColor: string,            // Default: '#3B81F6'
    textColor: string,                  // Default: '#ffffff'
    avatarSrc: string,                  // URL for user avatar image
    showAvatar: boolean                 // Default: false
  },

  // Text input styling
  textInput: {
    backgroundColor: string,            // Default: '#ffffff'
    textColor: string,                  // Default: '#303235'
    placeholder: string,                // Input placeholder text
    sendButtonColor: string             // Default: '#3B81F6'
  },

  // Extended embed config (used by flowise-embed)
  starterPrompts: [{prompt: string}],   // Suggested starting questions
  customCSS: string                     // Custom CSS to inject
}

Outputs

Field	Type	Description
`data`	`Chatflow`	Updated chatflow object with the new `chatbotConfig` value

Returns Promise<{data: Chatflow}> with the full updated chatflow record.

Usage Examples

Setting Brand Colors and Welcome Message

import chatflowsApi from '@/api/chatflows'

const chatbotConfig = {
  title: 'Acme Support Bot',
  titleAvatarSrc: 'https://acme.com/logo.png',
  titleBackgroundColor: '#1a1a2e',
  titleTextColor: '#e94560',
  welcomeMessage: 'Welcome to Acme! How can I help you today?',
  backgroundColor: '#f5f5f5',
  fontSize: 14,
  botMessage: {
    backgroundColor: '#e8e8e8',
    textColor: '#1a1a2e',
    avatarSrc: 'https://acme.com/bot-avatar.png',
    showAvatar: true
  },
  userMessage: {
    backgroundColor: '#1a1a2e',
    textColor: '#ffffff',
    showAvatar: false
  },
  textInput: {
    backgroundColor: '#ffffff',
    textColor: '#1a1a2e',
    placeholder: 'Ask me anything...',
    sendButtonColor: '#e94560'
  }
}

const response = await chatflowsApi.updateChatflow(chatflowId, {
  chatbotConfig: JSON.stringify(chatbotConfig)
})

ShareChatbot.jsx Save Pattern

// From ShareChatbot.jsx -- the actual save implementation
const onSave = async () => {
  try {
    const saveResp = await chatflowsApi.updateChatflow(chatflowid, {
      chatbotConfig: JSON.stringify(formatObj())
    })
    if (saveResp.data) {
      dispatch({ type: SET_CHATFLOW, chatflow: saveResp.data })
    }
  } catch (error) {
    // Error handling with snackbar notification
  }
}

Default Configuration Values

// From ShareChatbot.jsx -- defaults applied when no config exists
const defaultConfig = {
  backgroundColor: '#ffffff',
  fontSize: 16,
  poweredByTextColor: '#303235',
  titleBackgroundColor: '#3B81F6',
  titleTextColor: '#ffffff',
  botMessage: {
    backgroundColor: '#f7f8ff',
    textColor: '#303235'
  },
  userMessage: {
    backgroundColor: '#3B81F6',
    textColor: '#ffffff'
  },
  textInput: {
    backgroundColor: '#ffffff',
    textColor: '#303235',
    sendButtonColor: '#3B81F6'
  }
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment