FlowiseAI Chat Customizer

Customize your FlowiseAI Chatbots to match your particular brand and style.

🚀 Start by clicking on the chat bubble, change the properties and copy the JSON code once your done.

Chatflow settings

Chatflow ID

API Host

Button

Background color

Right

Bottom

Size (medium / large)

Icon Color

Icon URL (leave empty for no icon)

Chat Window

Welcome message

Background color

Height

Width

Font Size

Bot Message

Background color

Text color

Show Avatar

Avatar Source

User Message

Background color

Text color

Show Avatar

Avatar Source

Text input

Placeholder

Background Color

Text Color

Send Button Color

{
  "button": {
    "backgroundColor": "#3B81F6",
    "right": 20,
    "bottom": 20,
    "size": "medium",
    "iconColor": "white",
    "customIconSrc": "https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg"
  },
  "chatWindow": {
    "welcomeMessage": "Hello! This is custom welcome message",
    "backgroundColor": "#ffffff",
    "height": 700,
    "width": 400,
    "fontSize": 16,
    "poweredByTextColor": "#303235",
    "botMessage": {
      "backgroundColor": "#f7f8ff",
      "textColor": "#303235",
      "showAvatar": true,
      "avatarSrc": "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/parroticon.png"
    },
    "userMessage": {
      "backgroundColor": "#3B81F6",
      "textColor": "#ffffff",
      "showAvatar": true,
      "avatarSrc": "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png"
    },
    "textInput": {
      "placeholder": "Type your question",
      "backgroundColor": "#ffffff",
      "textColor": "#303235",
      "sendButtonColor": "#3B81F6"
    }
  }
}