AI Chatbot Integration with Flowise Multi-Agent Chatflows - n8n Workflow

• Developers looking to embed custom, powerful AI chatbots on client websites.


• Technical marketers seeking to integrate multi-agent chatflows (like those built in Flowise) into a user-friendly interface.


• Anyone who needs a highly customizable and branded n8n chatbot solution.


• Users interested in leveraging the chatTrigger n8n node for web services.

This comprehensive n8n workflow provides a robust framework for building and deploying a branded, AI-powered customer support or conversational interface directly onto any website. While the front-end UI is handled efficiently by the provided n8n CDN component, the complex decision-making and generation capabilities are outsourced to an advanced Flowise multi-agent chatflow.

This n8n template solves the problem of integrating sophisticated, low-code AI backends (Flowise) with a simple, deployable web interface. The included setup notes detail how to use the specific n8n node configurations and necessary JavaScript to customize the chatbot's appearance, welcome messages, and internationalization settings, ensuring a consistent brand experience. By using this n8n workflow, you gain full control over both the conversation logic and the user interface.

This n8n workflow operates on a simple request-response loop, initiated entirely by a user's interaction with the embedded chatbot component.

1. Chat Initiation: The process begins when a user submits a message via the embedded n8n chat interface on a website. This triggers the specialized When chat message received n8n trigger node.


2. External AI Query: The captured user input (stored as $json.chatInput) is immediately passed to the Flowise n8n node, which is configured as an HTTP Request. This n8n node posts the user's question to the specific Flowise API prediction endpoint (/api/v1/prediction/FLOWISE_ID). Authentication uses a Bearer token.


3. AI Processing: Flowise processes the request using its configured multi-agent or complex LLM chatflow, generating a detailed response.


4. Response Formatting: The response data is returned to the n8n workflow. The Edit Fields n8n node then cleans and formats this data, specifically mapping the AI's response text (assumed to be in $json.text) to the final output field.


5. Output Display: The n8n workflow automatically sends the content of the output field back to the initiating n8n chat interface, displaying the AI's answer to the user.

To deploy this n8n workflow template and connect it to your Flowise instance, follow these steps:

1. Import: Copy the provided n8n workflow JSON and paste it into your n8n instance using the 'New' -> 'Import from JSON' function.


2. Configure Flowise Credentials: Update the credentials for the Flowise n8n node. This uses the 'HTTP Header Auth' type. Set the Header Name to Authorization and the Value to Bearer YOURFLOWISEAPIKEY.


3. Update Flowise URL: In the Flowise n8n node, replace the placeholders in the URL with your actual Flowise deployment URL and the specific Flow ID of your chatflow (e.g., https://YOURFLOWISEURL/api/v1/prediction/YOURFLOWID).


4. Activate and Get Webhook: Save and activate the n8n workflow. The 'When chat message received' n8n trigger node will provide a production Webhook URL.


5. Website Integration (Branding): Embed the n8n chat component on your website. Use the provided JavaScript code snippet, replacing 'YOURPRODUCTIONWEBHOOKURL' with the URL obtained from the n8n trigger. Use the advanced customization code provided in the sticky notes to apply branding, set initial messages, and localize the interface for a truly custom n8n chatbot experience.

• When chat message received (n8n Trigger): This specialized n8n trigger node initiates the workflow upon receiving a message from the embedded n8n chat client. It manages the webhook endpoint that powers the front-end chat interface, allowing messages to be passed into the n8n workflow.


• Flowise (HTTP Request n8n node): This core n8n node serves as the intermediary, sending the user's question as a JSON body to the external Flowise prediction API. It is configured with POST method and utilizes HTTP Header Authentication (Bearer Token) to secure the request.


• Edit Fields (Set n8n node): This crucial n8n node prepares the data for final output. It extracts the raw text response from the Flowise result ({{ $json.text }}) and maps it to the standardized output field, which the chatTrigger n8n node requires to send the response back to the user interface.