AutomationMart
Home/Browse/Create AI-powered website chatbot with Langflow backend and custom branding
n8n

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

n8nn8n3 modulesv1.0
LinkedIn

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 (`Whe

At a glance

Create AI-powered website chatbot with Langflow backend and custom branding is a ready-made n8n workflow you import as a workflow JSON file — no build required. It connects LinkedIn. It's free to download. Follow the 5-step import below to go live in minutes.

Platform
n8n
Connects
LinkedIn
Modules
3
Price
Free
Version
v1.0
Create AI-powered website chatbot with Langflow backend and custom branding workflow diagram

About this workflow

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

n8n

How to import this n8n workflow

  1. 1

    Download the workflow JSON file after purchase.

  2. 2

    Open n8n → click the menu → Import from File.

  3. 3

    Select the downloaded JSON and import.

  4. 4

    Set up credentials for each node that requires them.

  5. 5

    Click Execute Workflow to test, then activate.

Setup guide

Setup guide included

Purchase to unlock the full step-by-step guide

Related N8n workflows

Summarize youtube videos from transcript for social media

YouTube Video Summarizer for Social Media Turn any YouTube video into a short, structured summary using AI — perfect for content creators, marketers, or social media managers. --- 🔧 What We Built We created a no-code automation in n8n that: - Accepts a YouTube Video ID via a form - Fetches the video transcript using an external API - Summarizes the transcript using AI (Google Gemini) - Automatically saves the summary to Google Docs for team use --- 🧩 Flow Overview | Step |

Free

Generate document drafts from PDFs using Google Drive, GPT-4 & notifications

Automate Drafts From Google Drive This workflow automates the end-to-end process of extracting and summarizing information from PDFs stored in a specific Google Drive folder. When a new PDF or any binary data is added, the workflow is triggered and begins by downloading and processing the PDF to extract all available text. If multiple PDFs are detected, their content is aggregated into a single, combined dataset. This automation eliminates the time consuming task of manually reading, taking not

Free

Track Google rankings daily with Decodo and Google Sheets

Automatically monitor your keyword positions on Google every day. This workflow uses Decodo to pull live search results and logs them straight into Google Sheets, no manual checking needed. Why This Workflow? Save Time: No more spending an hour every morning checking rankings by hand. Everything runs on autopilot. Save Money: Skip expensive SEO tools that charge per keyword for basic rank tracking. Accurate Data: Every result — including meta descriptions and URLs — gets recorded without copy-

Free

Send cold outreach emails and follow-ups with Resend, Postgres and HubSpot

Automate your cold email outreach with this 3-stage workflow that sends emails, triggers follow-ups after 3 days, and syncs responses to HubSpot CRM automatically. - Uses: n8n, Postgres/Supabase, Resend API, HubSpot - Features: Scheduled triggers, automatic follow-ups, response tracking via webhooks, CRM auto-sync Perfect for sales teams and marketers who want to scale outreach without manual work. 📺 Full tutorial included 📧 Questions? Need customization? Connect with me on LinkedIn: Click here

Free

HubSpot Contact Enrichment with Lusha Auto-Lookup

Automatically enrich HubSpot contacts with missing data using Lusha. Searches for contacts needing enrichment, finds additional contact details, and updates HubSpot records with emails, phones, and company info. How it works: 1. Searches HubSpot for contacts missing key data (email, phone, company details) 2. Uses Lusha to find additional contact information based on available data 3. Updates the original HubSpot contact record with enriched details 4. Processes contacts efficiently while preser

Free

Create Facebook posts and images with Google Gemini and Facebook Graph API

This n8n template automates the creation of professional Facebook posts and visually striking illustrations directly from simple raw text. If you want to maintain a consistent social media presence without spending hours writing copy and designing images, this workflow is perfect for you. How it works Trigger & Configuration: The workflow begins with your raw text and brand guidelines, configured entirely within a single Set Context node. AI Copywriting: A Google Gemini Agent analyzes the inpu

Free

Analyze images from forms using GPT-4o-mini Vision and deliver to Telegram

This workflow analyzes images submitted via a form using OpenAI Vision, then delivers the analysis result directly to your Telegram chat. ✅ Use case examples: • Users submit screenshots for instant AI interpretation • Automated document or receipt analysis with Telegram delivery • Quick OCR or image classification workflows ⸻ ⚙️ Setup Guide 1. Form Submission Trigger • Connect your form app (e.g. Typeform, Tally, or n8n’s own webhook form) to the On form submission trigger nod

Free

Automatically create YouTube metadata with AI

This n8n workflow automates YouTube video metadata generation using AI. It extracts video transcripts, analyzes content, and produces optimized titles, descriptions, tags, hashtags, and call-to-action elements. Additionally, the workflow integrates affiliate and promotional links to enhance overall video performance. Key Features Automated Metadata Generation Utilizes an AI agent integrated with OpenAI GPT-4 to generate engaging metadata based on the provided video transcript. SEO and Engagement

Free

Reviews

No reviews yet

Be the first to buy and share your experience.

Leave a review

Sign in to share your experience with this workflow.

Log in to review
Free
No ratings yet

Create a free account to purchase workflows.

  • JSON blueprint — instant download
  • Setup guide PDF included
  • 5 downloads · valid 30 days
  • Works with n8n

Need help setting this up?

Book a 3-hour live setup session with an Agility consultant.

₹2,499/ session
3 hrs · video call
  • Configure live on Google Meet / Zoom
  • Free follow-up if workflow has defects
  • Platform expert assigned to you
Book installation session
Free