Build a Website AI Chatbot with Lead Capture using Gemini and Supabase RAG
This workflow deploys a fully customizable AI chatbot that can be embedded on any website, from custom-coded sites to platforms like WordPress. The chatbot is powered by n8n, uses Supabase for memory and RAG, and integrates SerpAPI, Google Calendar, SMTP, and Google Sheets to automate responses, collect leads, and follow up intelligently.
Unlike typical widgets, this bot captures name and email before chatting, enabling personalized, human-like conversations and smart lead tracking. Check demo here
🎯 Core Features
💡 Universal Embedding – Works on any site (custom HTML or WordPress) using a single embed snippet.
🧠 AI Agent Node + RAG – Powered by Gemini (or any AI model) with Supabase as memory for contextual replies.
🌐 SerpAPI Integration – Lets the agent search the internet for real-time information.
📅 Google Calendar & Sheets – Logs leads, appointments, and chat summaries.
📧 SMTP Node – Sends personalized follow-up emails directly to new leads.
🪪 Lead Capture – Requires users to enter their name and email before chatting, creating personalized sessions.
⚙️ How It Works
Chat Trigger: The widget sends user input to your n8n webhook set to production mode.
AI Processing: The AI Agent node handles the response logic with memory and RAG context from Supabase.
Integrations:
SerpAPI → Real-time search.
Google Calendar & Sheets → Stores lead data and events.
SMTP Node → Sends automatic thank-you or follow-up emails.
Response: The chatbot replies instantly on your website, maintaining session memory.
🧩 Quick Setup Steps
Fork or use the Open Source Repo: The widget script is hosted via CDN from your GitHub repo and is fully editable.
Embed the Widget: Copy and paste the following snippet into your site’s <head> or footer (or use a plugin like Insert Headers and Footers on WordPress):
<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" /> <script> window.ChatWidgetConfig = { webhook: { url: '', // production webhook URL route: 'general' }, branding: { logo: '', // your logo URL name: 'CustomCX Agent', welcomeText: 'Hi 👋, how can we help?', responseTimeText: 'We typically respond right away', }, style: { primaryColor: '#854fff', secondaryColor: '#6b3fd4', position: 'right', backgroundColor: '#ffffff', fontColor: '#333333', } }; </script> <script src="https://cdn.jsdelivr.net/gh/shadrack-ago/n8n/widget.js?v=2.6"></script>
Connect Integrations:
Add your Supabase, SerpAPI, Google, and SMTP credentials in n8n.
Update your webhook URL in the script above.
Deploy: Activate the workflow, refresh your site, and start chatting with your AI assistant.
🚀 Why Use This Template
Works with any website or CMS.
Captures and stores qualified leads automatically.
Open source — easily modify, brand, or extend it.
Seamlessly integrates AI, CRM, and communication tools.
Related Templates
Instagram Full Profile Scraper with Apify and Google Sheets
📸 Instagram Full Profile Scraper with Apify and Google Sheets This n8n workflow automates the process of scraping ful...
Auto-classify Gmail emails with AI and apply labels for inbox organization
Who is this for? Professionals and individuals who receive high volumes of emails, those who want to automatically organ...
Compare Lists and Identify Common Items & Differences Using Custom Keys
This workflow compares two lists of objects (List A and List B) using a user-specified key (e.g. email, id, domain) and ...
🔒 Please log in to import templates to n8n and favorite templates
Workflow Visualization
Loading...
Preparing workflow renderer
Comments (0)
Login to post comments