Create a branded AI chatbot for websites with Flowise multi-agent chatflows

This workflow integrates Flowise Multi-Agent Chatflows into a custom-branded n8n chatbot, enabling real-time interaction between users and AI agents powered by large language models (LLMs). --- Key Advantages: ✅ Easy Integration with Flowise: Uses a low-code HTTP node to send user questions to Flowise's API (/api/v1/prediction/FLOWISEID) and receive intelligent responses. Supports multi-agent chatflows, allowing for complex, dynamic interactions. 🎨 Customizable Chatbot UI: Includes pre-built JavaScript for embedding the n8n chatbot into any website. Provides customization options such as welcome messages, branding, placeholder text, chat modes (e.g., popup or embedded), and language support. 🔐 Secure & Configurable: Authorization via Bearer token headers for Flowise API access. Clearly marked notes in the workflow for setting environment variables like FLOWISEURL and FLOWID. --- How It Works 1. Chat Trigger: The workflow starts with the When chat message received node, which acts as a webhook to receive incoming chat messages from users. 2. HTTP Request to Flowise: The received message is forwarded to the Flowise node, which sends a POST request to a Flowise API endpoint ( The request includes the user's input as a JSON payload ({"question": "{{ $json.chatInput }}"}) and uses HTTP header authentication (e.g., Authorization: Bearer FLOWSIEAPI). 3. Response Handling: The response from Flowise is passed to the Edit Fields node, which maps the output ($json.text) for further processing or display. Set Up Steps 1. Configure Flowise Integration: - Replace FLOWISEURL and FLOWISEID in the HTTP Request node with your Flowise instance URL and flow ID. - Ensure the Authorization header is set correctly in the credentials (e.g., Bearer FLOWSIEAPI). 2. Embed n8n Chatbot: - Use the provided JavaScript snippet in the sticky notes to embed the n8n chatbot on your website. Replace YOURPRODUCTIONWEBHOOKURL with the webhook URL generated by the When chat message received node. - Customize the chatbot's appearance and behavior (e.g., welcome messages, language, UI elements) using the createChat configuration options. 3. Optional Branding: - Adjust the sticky note examples to include branding details, such as custom messages, colors, or metadata for the chatbot. 4. Activate Workflow: - Toggle the workflow to "Active" in n8n and test the chat functionality end-to-end. --- Ideal Use Cases: Embedding branded AI assistants into websites. Connecting Flowise-powered agents with customer support chatbots. Creating dynamic, smart conversational flows with LLMs via n8n automation. ---- Need help customizing? Contact me for consulting and support or add me on Linkedin.