Implementation:FlowiseAI Flowise EmbedChat Code Generation

Attribute	Value
Page Name	EmbedChat_Code_Generation
Workflow	Chatbot_Deployment
Repository	FlowiseAI/Flowise
Type	Pattern Doc
Domain	Embedding, Integration, Web Components
Source	packages/ui/src/views/chatflows/EmbedChat.jsx:L1-387
Last Updated	2026-02-12 14:00 GMT

Overview

Client-side code generation component that produces embeddable code snippets for integrating a Flowise chatbot widget into external websites. This is a Pattern Doc -- no API call is made; the component generates code by interpolating chatflow-specific values into template strings.

Code Reference

Source Location

File: packages/ui/src/views/chatflows/EmbedChat.jsx, lines 1-387 (entire component)

Pattern Interface

The EmbedChat component accepts a single prop:

const EmbedChat = ({ chatflowid }) => { ... }

Prop	Type	Description
`chatflowid`	`string`	The chatflow ID to embed in generated code

Import

The component is imported internally by ShareChatbot.jsx and APICodeDialog.jsx:

import EmbedChat from './EmbedChat'

External Dependencies

flowise-embed -- NPM package providing web component-based chat widgets, loaded from CDN at https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js
flowise-embed-react -- React wrapper package providing BubbleChat and FullPageChat components

I/O Contract

Inputs

Parameter	Type	Description
`chatflowid`	`string`	Chatflow identifier interpolated into generated code

The component also reads baseURL from @/store/constant to construct the API host URL.

Outputs

The component renders a tabbed UI with four code tabs: Popup Html, Fullpage Html, Popup React, Fullpage React. Each tab displays a copyable code block. No API call is made; the output is rendered UI.

Usage Examples

Generated Popup HTML Code

<script type="module">
    import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js"
    Chatbot.init({
        chatflowid: "abc-123-def-456",
        apiHost: "https://your-flowise-instance.com",
    })
</script>

Generated Fullpage HTML Code

<flowise-fullchatbot></flowise-fullchatbot>
<script type="module">
    import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js"
    Chatbot.initFull({
        chatflowid: "abc-123-def-456",
        apiHost: "https://your-flowise-instance.com",
    })
</script>

Generated Popup React Code

import { BubbleChat } from 'flowise-embed-react'

const App = () => {
    return (
        <BubbleChat
            chatflowid="abc-123-def-456"
            apiHost="https://your-flowise-instance.com"
        />
    );
};

Generated Fullpage React Code

import { FullPageChat } from "flowise-embed-react"

const App = () => {
    return (
        <FullPageChat
            chatflowid="abc-123-def-456"
            apiHost="https://your-flowise-instance.com"
        />
    );
};

Generated Popup HTML with Theme Customization

When the "Show Embed Chat Config" checkbox is enabled, the generated code includes the full theme object:

<script type="module">
    import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js"
    Chatbot.init({
        chatflowid: "abc-123-def-456",
        apiHost: "https://your-flowise-instance.com",
        chatflowConfig: {
            /* Chatflow Config */
        },
        observersConfig: {
            /* Observers Config */
        },
        theme: {
            button: {
                backgroundColor: '#3B81F6',
                right: 20,
                bottom: 20,
                size: 48,
                dragAndDrop: true,
                iconColor: 'white',
                customIconSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',
                autoWindowOpen: {
                    autoOpen: true,
                    openDelay: 2,
                    autoOpenOnMobile: false
                }
            },
            chatWindow: {
                showTitle: true,
                title: 'Flowise Bot',
                welcomeMessage: 'Hello! This is custom welcome message',
                backgroundColor: '#ffffff',
                fontSize: 16,
                botMessage: {
                    backgroundColor: '#f7f8ff',
                    textColor: '#303235',
                    showAvatar: true
                },
                userMessage: {
                    backgroundColor: '#3B81F6',
                    textColor: '#ffffff',
                    showAvatar: true
                },
                textInput: {
                    placeholder: 'Type your question',
                    backgroundColor: '#ffffff',
                    textColor: '#303235',
                    sendButtonColor: '#3B81F6'
                }
            }
        }
    })
</script>

Code Generation Functions

The component defines the following code generation functions:

Function	Description
`embedPopupHtmlCode(chatflowid)`	Basic popup HTML embed code
`embedFullpageHtmlCode(chatflowid)`	Basic fullpage HTML embed code
`embedPopupReactCode(chatflowid)`	Basic popup React embed code
`embedFullpageReactCode(chatflowid)`	Basic fullpage React embed code
`embedPopupHtmlCodeCustomization(chatflowid)`	Popup HTML with full theme config
`embedFullpageHtmlCodeCustomization(chatflowid)`	Fullpage HTML with full theme config
`embedPopupReactCodeCustomization(chatflowid)`	Popup React with full theme config
`embedFullpageReactCodeCustomization(chatflowid)`	Fullpage React with full theme config

The defaultThemeConfig object (exported) defines all available theme settings with their default values and is used by the customization code generators.

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment