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/FLOWISE_ID) 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 FLOWISE_URL and FLOW_ID.

---

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 (https://FLOWISEURL/api/v1/prediction/FLOWISE_ID). The request includes the user's input as a JSON payload ({"question": "{{ $json.chatInput }}"}) and uses HTTP header authentication (e.g., Authorization: Bearer FLOWSIE_API).
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 FLOWISE_ID 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 FLOWSIE_API).

2. Embed n8n Chatbot:

   • Use the provided JavaScript snippet in the sticky notes to embed the n8n chatbot on your website. Replace YOUR_PRODUCTION_WEBHOOK_URL 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.