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 1. Chat Trigger: The workflow starts with a webhook trigger (When chat message received) that listens for incoming chat messages from the n8n Chat interface. 2. 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. 3. Response Processing: The output from Langflow is extracted and formatted using the Edit Fields node, ensuring the chatbot displays the response correctly. 4. 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 1. Configure Langflow Connection: - Replace LANGFLOWURL and FLOWID 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.

2. Deploy n8n Chat: - Add the provided CDN script to your website, replacing YOURPRODUCTIONWEBHOOKURL 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.

3. 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.

---