Jump to content

Connect SuperML | Leeroopedia MCP: Equip your AI agents with best practices, code verification, and debugging knowledge. Powered by Leeroo — building Organizational Superintelligence. Contact us at founders@leeroo.com.

Principle:FlowiseAI Flowise Chat Widget Embedding

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

Overview

Technique for generating embeddable code snippets that integrate a chatbot widget into external websites using web components or React components.

Description

The embedding system generates copy-pasteable code for three deployment methods:

  1. Popup HTML using the flowise-embed web component. This creates a floating chat bubble button that opens a chat window when clicked. The code loads the library from CDN and calls Chatbot.init() with the chatflow ID and API host.
  1. Fullpage HTML using the <flowise-fullchatbot> web component. This fills the entire container or page with the chat interface. The code uses Chatbot.initFull() instead of Chatbot.init().
  1. React component using <BubbleChat> or <FullPageChat> from the flowise-embed-react package. This provides native React integration for applications built with React.

All variants include the chatflow ID and base URL as required parameters. Each code snippet is presented in a tabbed interface with copy-to-clipboard functionality.

Basic vs. Customized Code

The embedding component provides two levels of code generation:

  • Basic code: Minimal configuration with just chatflowid and apiHost. Suitable for quick integration with default appearance.
  • Customized code: Includes a full theme configuration object with detailed settings for button appearance, tooltip, disclaimer, chat window, messages, text input, feedback, and footer. Enabled via a "Show Embed Chat Config" checkbox.

The customization theme object includes:

  • Button: background color, position (right/bottom), size, icon color, drag-and-drop, auto-open behavior
  • Tooltip: message text, colors, font size
  • Disclaimer: title, message (supports HTML), button styling
  • Chat Window: title, avatar, welcome/error messages, background, dimensions, font size, starter prompts, source docs display, HTML rendering, bot/user message styling, text input styling, feedback, date/time toggle, footer

Usage

Use this principle when embedding a chatbot into a third-party website or application. Apply when:

  • Adding a chatbot widget to an existing website without modifying its backend
  • Integrating a Flowise chatbot into a React application
  • Providing a floating chat bubble on a website for customer support
  • Creating a full-page chatbot experience on a dedicated page

Choosing the Right Embed Method

  • Popup HTML: Best for adding a non-intrusive chat bubble to existing websites. Framework-agnostic.
  • Fullpage HTML: Best for dedicated chatbot pages or iframe embeddings. Framework-agnostic.
  • React (BubbleChat/FullPageChat): Best for React applications where you want component-level integration and React lifecycle management.

Theoretical Basis

This technique implements the web component embedding pattern. The flowise-embed package provides framework-agnostic web components (custom elements) that can be added to any HTML page. The React package (flowise-embed-react) wraps these web components for React applications, providing a native JSX interface.

Key design properties:

  • CDN delivery: The HTML embed code loads the library from cdn.jsdelivr.net/npm/flowise-embed, eliminating the need for npm installation in non-React websites. Versioned URLs enable pinning to specific versions.
  • Framework agnosticism: Web components work in any HTML environment regardless of the framework (vanilla JS, Vue, Angular, etc.). The React wrapper is an optional convenience layer.
  • Client-side only: Code generation is entirely client-side within the EmbedChat.jsx component. No API call is made to generate embed code -- the chatflow ID and base URL are interpolated into template strings.
  • Configuration cascading: The embed widget reads the chatbotConfig stored on the chatflow for default appearance, but the embed code's theme property can override these settings, providing embed-site-specific customization.
  • Custom element registration: The <flowise-chatbot> and <flowise-fullchatbot> elements are registered as web components by the flowise-embed library when the script loads.

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.
Principle
Implementation
Heuristic
Environment
Retrieved from "https://leeroopedia.com/index.php?title=Principle:FlowiseAI_Flowise_Chat_Widget_Embedding&oldid=23745"