Skip to main content

Create AI-powered website chatbot with Langflow backend and custom branding

Workflow preview

Create AI-powered website chatbot with Langflow backend and custom branding preview
Open on n8n.io
n8n Cloud
$20/month : Unlimited workflows
2500 executions/month
Try free
Bright Data
THE #1 IN WEB SCRAPING
Scrape any website without limits
Try free
HOSTINGER Hostinger Early Deal
DISCOUNT 20%
Self-hosted n8n
Unlimited workflows - from $4.99/mo
Try free
Apify
#1 hub for scraping, AI & automation
6000+ actors - $5 credits/mo
Try free

Important notice

This workflow is provided as-is. Please review and test before using in production.

Overview

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.

image

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

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

  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.

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.