Create AI-Powered Website Chatbot with Langflow Backend and Custom Branding

This workflow integrates a chatbot frontend with a backend powered by Langflow, a visual low-code AI development tool. The flow is triggered whenever a chat message is received via the n8n chatbot widget embedded on a website. It then sends the message to a Langflow flow for processing and returns the generated response to the user.

How It Works
Chat Trigger: The workflow starts with a webhook trigger (When chat message received) that listens for incoming chat messages from the n8n Chat interface.
Langflow Integration: The chat input is sent to a Langflow instance via an HTTP request (Langflow node). The request includes the user's message and expects a response from the Langflow flow.
Response Processing: The output from Langflow is extracted and formatted using the Edit Fields node, ensuring the chatbot displays the response correctly.
Customization: Sticky notes provide instructions for embedding the n8n Chat widget on a website and customizing its appearance, including welcome messages, language settings, and branding.

Set Up Steps
Configure Langflow Connection:
Replace LANGFLOW_URL and FLOW_ID in the HTTP request node with your Langflow instance details.
Ensure the API headers (e.g., Content-Type: application/json) and authentication (if required) are correctly set.

Deploy n8n Chat:
Add the provided CDN script to your website, replacing YOUR_PRODUCTION_WEBHOOK_URL with the webhook URL generated by the When chat message received node.
Customize the chatbot’s UI (e.g., title, placeholder text, initial messages) using the JavaScript snippet in the sticky notes.

Activate Workflow:
Toggle the workflow to "Active" in n8n.
Test the chatbot by sending a message and verifying the Langflow response is processed and displayed correctly.

Advantages

✅ Seamless Langflow Integration It allows n8n to communicate directly with a Langflow flow via API, enabling AI responses using custom-designed Langflow logic.

✅ No-Code Chatbot Deployment With just a script snippet, the chatbot widget can be embedded into any website. Minimal coding is required to launch a fully functioning AI chatbot.

✅ Customizable UI/UX The included embed code offers full control over the chatbot's appearance, language, welcome message, input placeholder, and branding—ideal for white-label or customer-facing deployments.

✅ Modular and Extensible Because it's built in n8n, this chatbot can be easily extended with other services like CRMs, email alerts, or databases, without leaving the platform.

✅ Real-Time AI Interactions Thanks to Langflow's API and chat response support, users get immediate and dynamic AI-driven replies.

Need help customizing?
Contact me for consulting and support or add me on Linkedin.