Flowise Embed

By default, the NodeDetailsDialog renders inside the chatbot's shadow DOM, which can cause it to appear behind other page elements. To fix this, use the dialogContainer property to render the dialog into a host-page element instead. This places the dialog in the document's stacking context so it appears on top.

Requirements:

• chatWindow.showAgentMessages must be true for the dialog to render.
• The target element should be in the DOM at initialization.

Supported modes: Works with both init (popup) and initFull (full-page).

<!-- 1. Add a portal target -->
<div id="flowise-portal"></div>

<script type="module">
  import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';

  // 2. Pass the selector or element to dialogContainer
  Chatbot.init({
    chatflowid: '<chatflowid>',
    apiHost: 'http://localhost:3000',
    dialogContainer: '#flowise-portal', 
  });
</script>

To set up the proxy server, follow these steps to configure your environment and start the service.

1. Configure Environment Variables

Create a .env file (copy from .env.example) and set the following:

• API_HOST: Your Flowise instance URL (e.g., https://your-flowise-instance.com).
• FLOWISE_API_KEY: Your Flowise API key.
• Chatflow Configuration: Define your chatbots using the format [identifier]=[chatflowId],[allowedDomain1],[allowedDomain2],....

Example .env configuration:

API_HOST=https://your-flowise-instance.com
FLOWISE_API_KEY=your-api-key

# identifier=chatflowId,allowedDomain1,allowedDomain2
support=abc123-def456,https://example.com
agent1=xyz789-uvw456,https://sales.example.com
helpdesk=ghi123-jkl456,https://help.example.com,https://support.example.com

Note: Identifiers are case-insensitive. Wildcard domains (*) are not supported.

2. Install and Start

yarn install
yarn start

The server will be available at http://localhost:3001 locally or your platform's URL in the cloud.

# Configure environment
API_HOST=https://your-flowise-instance.com
FLOWISE_API_KEY=your-api-key

# Configure chatflows
support=abc123-def456,https://example.com

# Install and start
yarn install
yarn start

To test the proxy server and your chatbot implementation on your local machine, follow these steps:

1. Start the Proxy Server: Run yarn start. It will be available at http://localhost:3001.
2. Configure the Test Page: Update public/index.html to point to your local proxy.
3. Start the Development Server: In a new terminal, run yarn dev. This serves the test page at http://localhost:5678.

Note: The development URL http://localhost:5678 is automatically whitelisted in development mode.

Local Configuration Examples

For PopUp Chatbot:

<script type="module">
  import Chatbot from './web.js';
  Chatbot.init({
    chatflowid: 'agent1', // Must match an identifier from your .env
    apiHost: 'http://localhost:3001',
  });
</script>

For Full Page Chatbot:

<flowise-fullchatbot></flowise-fullchatbot>
<script type="module">
  import Chatbot from './web.js';
  Chatbot.initFull({
    chatflowid: 'agent1', // Must match an identifier from your .env
    apiHost: 'http://localhost:3001',
  });
</script>

# 1. Start proxy
yarn start

# 2. Start dev server (in another terminal)
yarn dev

The Chatbot.init() method accepts a large configuration object to customize the UI. Key sections include:

• pageTitle: Browser tab title.
• chatflowConfig: Configuration passed to the chatflow.
• observersConfig: Callbacks for monitoring chatbot signals (observeUserInput, observeMessages, observeLoading).
• theme: Extensive styling for button, tooltip, disclaimer, form, and chatWindow.
• chatWindow: Controls visibility of titles, agent messages, welcome messages, error messages, and starter prompts. It also manages height, width, and clearChatOnReload.

<script type="module">
  import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';
  Chatbot.init({
    chatflowid: '91e9c803-5169-4db9-8207-3c0915d71c5f',
    apiHost: 'http://localhost:3000',
    theme: {
      chatWindow: {
        title: 'Flowise Bot',
        welcomeMessage: 'Hello!',
        starterPrompts: ['What is a bot?'],
        // ... other options
      },
      button: {
        backgroundColor: '#3B81F6',
        autoWindowOpen: { autoOpen: true, openDelay: 2 }
      }
    }
  });
</script>

Flowise Embed supports two primary modes for handling file uploads, which are determined by the fullFileUpload configuration:

1. Full File Upload (file:full)

When fullFileUpload is enabled, files are sent as FormData to the createAttachmentWithFormData endpoint. The server processes these files and returns extracted content, which is then used in the chat context.

2. RAG File Upload (file:rag)

When fullFileUpload is disabled and isRAGFileUploadAllowed is true, files are sent via upsertVectorStoreWithFormData. This mode is intended for uploading documents to a vector store to be used for Retrieval Augmented Generation (RAG). There is a built-in delay (approx. 2.5s) to allow for vector store updates before the next interaction.

Upload Validation

Uploads are validated against uploadsConfig:

• Images: Checked against isImageUploadAllowed and imgUploadSizeAndTypes (which defines maxUploadSize and allowed fileTypes).
• RAG Files: Checked against isRAGFileUploadAllowed and fileUploadSizeAndTypes (supports specific extensions or * for all).

The Flowise Embed client uses an EventStream (SSE) to receive real-time updates from the chatflow. The following payload.event types are processed during a streaming session: