FlowiseIntegrationTutorialDeveloper

Flowise + BotChap: Complete Integration Guide

March 28, 20267 min read

Flowise is a powerful open-source visual flow builder for LLM applications. It lets you chain prompts, connect to vector stores, build RAG pipelines, and orchestrate complex AI workflows without writing code.

But Flowise's built-in chat UI is minimal — it's a developer tool, not a client-facing product. When you need to deliver a polished, branded chat experience on a website, you need a better widget layer.

BotChap is that layer. This guide covers the complete connection from Flowise flow to BotChap widget.

Prerequisites

A running Flowise instance (self-hosted or Flowise Cloud)
At least one configured Flowise flow with a chatflow endpoint
A BotChap account

Step 1: Get Your Flowise Chatflow API Endpoint

In Flowise, open your chatflow and click the API endpoint icon (the </> icon in the top bar). Copy the API endpoint URL — it will look like:

https://your-flowise.com/api/v1/prediction/{chatflowId}

If your Flowise instance requires an API key, note that too.

Step 2: Configure BotChap to Use Flowise

In your BotChap widget editor, navigate to the Backend tab and select Flowise as your integration type.

Enter:

Flowise API URL: Your prediction endpoint from Step 1
API Key (if required): Your Flowise API key
Response Path: The field in Flowise's response that contains the assistant's message (typically text or result)

BotChap will send user messages to this endpoint and display the response in the chat widget.

Step 3: Understand What BotChap Sends to Flowise

BotChap sends a POST request to your Flowise endpoint:

{
  "question": "<user message>",
  "overrideConfig": {
    "sessionId": "<botchap-session-id>"
  }
}

The sessionId ensures conversation history is maintained per user session in Flowise flows that support memory.

Step 4: Handle the Flowise Response

Flowise prediction responses include a text field with the assistant's response:

{
  "text": "Sure! Here are the three options available...",
  "sourceDocuments": [...]
}

BotChap automatically reads the text field. If your Flowise flow returns a different field name, configure the response path in BotChap's settings.

Step 5: Customise the Widget

Now that the backend is connected, customise the BotChap widget for your client:

Set the widget name (e.g. "Support Assistant" or the client's brand name)
Choose brand colors
Select an animated trigger preset (pulse or breathe are professional choices for most business contexts)
Set the opening message to something contextually relevant to the flow

Step 6: Test the Integration

In BotChap's live preview, send several test messages and verify:

Messages are received and processed by Flowise
Responses appear in the widget correctly
Multi-turn conversation context is maintained (if your Flowise flow uses memory)
Error handling works if Flowise is temporarily unavailable

Common Issues and Fixes

"No response" in the widget

Check that your Flowise endpoint is publicly accessible (not localhost)
Verify the Flowise flow is active (not in test mode)
Check that BotChap's response path matches the field Flowise returns

Conversation history not maintained

Enable memory in your Flowise flow (e.g., Buffer Memory or Redis memory node)
Ensure the sessionId from BotChap is being used as the memory key in your Flowise configuration

CORS errors

Add BotChap's domain to your Flowise instance's allowed origins, or use BotChap's Managed Mode to proxy requests through BotChap's servers

Deploying to Your Client's Website

Once the integration is working, copy the embed script from BotChap and add it to the client's website:

<script src="https://botchap.com/widget.js" data-chatbot-id="YOUR_WIDGET_ID" async></script>

The widget loads asynchronously and has zero impact on page performance. Your Flowise-powered AI is now live with a professional, branded widget.

What You Now Have

A Flowise AI flow — with whatever complexity you've built (RAG, memory, tool use, multi-step orchestration) — delivered through a polished, branded, animated chat widget that your clients can add to their website with a single script tag.

You handle the AI architecture. BotChap handles the presentation layer.