Din webbplatschatt är aktiv, men din pipeline är det inte. Samtal försvinner in i en widget, någon glömmer att följa upp och “heta” blir “ghostade” till i morgon. Det är den verkliga kostnaden av att sakna automatisering av chatt-leads.
Marknadschefer får skulden för “låg leadkvalitet”. Småföretagare sitter och svarar sent på kvällen. Och kundteam på byråer? De fastnar med att kopiera chattutskrifter till kalkylark. Det här flödet gör varje bra chatt till en spårbar lead, med en inbyggd uppföljningsväg.
Du får se hur chatboten fångar namn och e-post först, behåller kontext med minne och sedan loggar leaden till Google Sheets och Google Kalender så att nästa steg faktiskt händer.
Så fungerar automatiseringen
Hela n8n-flödet, från trigger till slutligt resultat:
n8n Workflow Template: Google Sheets + Kalender: leads från din webbchatt
flowchart LR
subgraph sg0["Google Drive Flow"]
direction LR
n0@{ icon: "mdi:brain", form: "rounded", label: "Google Gemini Chat Model", pos: "b", h: 48 }
n1@{ icon: "mdi:play-circle", form: "rounded", label: "Google Drive Trigger", pos: "b", h: 48 }
n2@{ icon: "mdi:play-circle", form: "rounded", label: "Google Drive Trigger1", pos: "b", h: 48 }
n3@{ icon: "mdi:cog", form: "rounded", label: "Download file", pos: "b", h: 48 }
n4@{ icon: "mdi:cube-outline", form: "rounded", label: "Supabase Vector Store", pos: "b", h: 48 }
n5@{ icon: "mdi:robot", form: "rounded", label: "Default Data Loader", pos: "b", h: 48 }
n6@{ icon: "mdi:robot", form: "rounded", label: "Recursive Character Text Spl..", pos: "b", h: 48 }
n7@{ icon: "mdi:cube-outline", form: "rounded", label: "Knowledgebase", pos: "b", h: 48 }
n8@{ icon: "mdi:swap-vertical", form: "rounded", label: "Loop Over Items", pos: "b", h: 48 }
n9@{ icon: "mdi:vector-polygon", form: "rounded", label: "Embeddings OpenAI", pos: "b", h: 48 }
n10@{ icon: "mdi:wrench", form: "rounded", label: "Think", pos: "b", h: 48 }
n11@{ icon: "mdi:wrench", form: "rounded", label: "Calculator", pos: "b", h: 48 }
n12@{ icon: "mdi:robot", form: "rounded", label: "Support Agent", pos: "b", h: 48 }
n13@{ icon: "mdi:memory", form: "rounded", label: "conversation buffer", pos: "b", h: 48 }
n14["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/supabase.svg' width='40' height='40' /></div><br/>Deletes old records"]
n15@{ icon: "mdi:swap-vertical", form: "rounded", label: "Set the fields for mapping", pos: "b", h: 48 }
n16@{ icon: "mdi:play-circle", form: "rounded", label: "When chat message received", pos: "b", h: 48 }
n17@{ icon: "mdi:wrench", form: "rounded", label: "Code Tool", pos: "b", h: 48 }
n18["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Data Normalizer"]
n10 -.-> n12
n17 -.-> n12
n11 -.-> n12
n3 --> n4
n7 -.-> n12
n18 --> n12
n8 --> n3
n8 --> n14
n9 -.-> n4
n9 -.-> n7
n5 -.-> n4
n14 --> n8
n13 -.-> n12
n1 --> n15
n2 --> n15
n0 -.-> n12
n15 --> n14
n16 --> n18
n6 -.-> n5
end
%% Styling
classDef trigger fill:#e8f5e9,stroke:#388e3c,stroke-width:2px
classDef ai fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
classDef aiModel fill:#e8eaf6,stroke:#3f51b5,stroke-width:2px
classDef decision fill:#fff8e1,stroke:#f9a825,stroke-width:2px
classDef database fill:#fce4ec,stroke:#c2185b,stroke-width:2px
classDef api fill:#fff3e0,stroke:#e65100,stroke-width:2px
classDef code fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
classDef disabled stroke-dasharray: 5 5,opacity: 0.5
class n1,n2,n16 trigger
class n5,n6,n12 ai
class n0 aiModel
class n10,n11,n17 ai
class n13 ai
class n4,n7 ai
class n9 ai
class n18 code
classDef customIcon fill:none,stroke:none
class n14,n18 customIcon
Problemet: webbplatschattar blir inte spårbara leads
Webbplatschatt känns som framsteg eftersom du ser aktivitet. Men om du inte fångar besökarens namn och e-post direkt kan du inte återengagera dem senare, och du kan inte mäta vad chatten faktiskt bidrar med i intäkter. Det blir värre när chatten har bra kontext (budget, tidslinje, produktkrav) men ingen dokumenterar den, så överlämningen till sälj eller support blir en gissningslek. Sedan blir uppföljningar sena, eller uteblir helt, eftersom de bygger på att någon kommer ihåg. Ärligt talat: “vi återkommer snart” är ingen process.
Friktionen byggs på.
- Bra samtal försvinner när besökaren stänger fliken, så du tappar chansen att konvertera dem senare.
- Manuell copy-paste till Google Sheets är långsamt, och folk “fixar det senare” tills senare aldrig kommer.
- Utan en kalenderhändelse (eller åtminstone en schemalagd uppgift) blir uppföljningstidpunkten slumpmässig.
- När du inte kan koppla chattar till utfall ser chatten ut som en kostnadspost i stället för en tillväxtkanal.
Lösningen: fånga, kom ihåg, logga och följ upp automatiskt
Det här n8n-flödet driver en anpassningsbar webbplatschatbot som du bäddar in på nästan vilken webbplats som helst (WordPress, egen HTML, you name it). När någon startar en konversation skickar chatt-widgeten deras meddelande till en n8n-webhooktrigger. Innan boten går på djupet samlar den in grunderna (namn och e-post) och behåller sedan hela samtalskontexten med en minnesbuffer som backas av Supabase. AI-agenten genererar hjälpsamma svar, kan hämta kunskap från dina dokument via RAG och kan även hämta realtidsinfo via SerpAPI vid behov. När konversationen kvalificeras som en lead eller en förfrågan loggar flödet nyckeldetaljer i Google Sheets och skapar en post i Google Kalender, och skickar sedan ett uppföljningsmejl via SMTP så att relationen fortsätter framåt.
Flödet börjar med den inbäddade chatt-triggen och normaliserar inkommande data. Därefter svarar AI-agenten med hjälp av minne plus din Supabase-kunskapsbas. Till sist hamnar leaddetaljer och sammanfattningar i Google Sheets och Google Kalender, och SMTP skickar uppföljningsmeddelandet automatiskt.
Det här får du: automatisering vs. resultat
| Det här automatiserar flödet | Resultaten du får |
|---|---|
|
|
Exempel: så här ser det ut
Säg att din webbplats får 20 chattkonversationer i veckan och att ungefär hälften är riktiga leads. Manuellt tar det lätt 10 minuter per bra chatt att fånga uppgifter, klistra in transkriptet i Google Sheets och skapa en kalenderuppföljning, alltså runt 2 timmar per vecka. Med det här flödet skickar besökaren in namn och e-post som en del av chatten, AI:n sammanfattar kontexten och både Sheets och Kalender uppdateras automatiskt. Ditt “arbete” blir att granska nya poster, vilket oftast är några minuter om dagen.
Det här behöver du
- n8n-instans (testa n8n Cloud gratis)
- Alternativ för egen drift om du föredrar det (Hostinger fungerar bra)
- Google Sheets för leadloggning och rapportering.
- Google Kalender för att skapa uppföljningshändelser automatiskt.
- Supabase för chattminne och kunskapsbas (RAG).
- SMTP-konto för att skicka uppföljningsmejl från din domän.
- SerpAPI-nyckel (hämta den i din SerpAPI-dashboard).
- OpenAI API-nyckel (hämta den från sidan för OpenAI API-nycklar) för embeddings.
Kunskapsnivå: Medel. Du kopplar in behörigheter, klistrar in en inbäddningssnutt och mappar några fält i Sheets/Kalender.
Vill du inte sätta upp detta själv? Prata med en automationsexpert (gratis konsultation i 15 minuter).
Så fungerar det
En besökare startar en chatt på din webbplats. Den inbäddade widgeten skickar varje meddelande till din n8n-webhook (produktionsläge), tillsammans med sessionsdetaljer så att du kan hålla en sammanhängande konversation.
Flödet rensar och standardiserar indata. Ett kodsteg normaliserar inkommande fält, vilket hjälper dig att undvika röriga problem som “ibland är det email, ibland är det e-mail” senare i Google Sheets.
AI-agenten svarar med minne och din kunskap. Supabase lagrar minnet, och en retriever hämtar relevanta utdrag så att svaren håller sig i linje med din dokumentation. Om användaren frågar något som kräver aktuell information kan SerpAPI användas som sökverktyg.
Kvalificerade chattar blir spårbara leads. Leaddetaljer och en sammanfattning skrivs till Google Sheets, en uppföljning läggs i Google Kalender och SMTP skickar ett personligt mejl så att nästa kontaktpunkt sker direkt.
Du kan enkelt ändra vad som loggas (till exempel lägga till “företagsstorlek” eller “intresse för tjänst”) utifrån dina behov. Se hela implementationsguiden nedan för anpassningsalternativ.
Steg-för-steg-guide för implementering
Steg 1: Konfigurera chat-triggern
Det här arbetsflödet startar när ett nytt meddelande tas emot via chat-webhooken.
- Lägg till och öppna Incoming Chat Trigger.
- Ställ in Public till
true. - Kopiera webhook-URL:en för er chattwidget eller frontend-integration.
Steg 2: Normalisera inkommande chat-payload
Normalisera inkommande webhook-data till en konsekvent struktur innan ni skickar vidare den till agenten.
- Koppla Incoming Chat Trigger till Normalize Incoming Data.
- I Normalize Incoming Data behåller ni JavaScript Code som angivet för att normalisera nästlade arrayer och standardfält.
- Verifiera att den normaliserade outputen innehåller
action,sessionId,route,chatInputochmetadata.
Steg 3: Sätt upp AI-agenten och verktygen
Konfigurera assistenten, minnet, modellen och verktygen som driver chattsvaren.
- Koppla Normalize Incoming Data till Support Assistant Agent.
- I Support Assistant Agent ställer ni in Text till
{{ $json.chatInput }}och behåller Prompt Type somdefine. - I Support Assistant Agent bekräftar ni att System Message innehåller era tjänsteregler och kontaktplatshållare. Ersätt
[YOUR_EMAIL],[YOUR_PHONE]och[YOUR_URL]med riktiga värden. - Koppla Dialogue Memory Buffer som minnesverktyg med Session Key satt till
{{ $json.sessionId }}och Context Window Length satt till20. - Koppla Gemini Chat Engine som språkmodell för Support Assistant Agent.
- Koppla Knowledgebase Retriever, Reasoning Tool, Computation Tool och Code Sanitizer Tool som AI-verktyg för Support Assistant Agent.
- Credential Required: Anslut era googlePalmApi-inloggningsuppgifter i Gemini Chat Engine.
- Credential Required: Anslut era supabaseApi-inloggningsuppgifter i Knowledgebase Retriever.
Obs: Dialogue Memory Buffer, Reasoning Tool, Computation Tool och Code Sanitizer Tool är AI-under-noder. Lägg till eller hantera inloggningsuppgifter i den överordnade Support Assistant Agent eller i deras anslutna modell-/verktygsnoder, inte på under-noden i sig.
Steg 4: Konfigurera Google Drive-triggers för uppdateringar i kunskapsbasen
Sätt upp triggers som upptäcker nya eller uppdaterade filer i er kunskapsbasmapp.
- Öppna Drive File Created Trigger och ställ in Event till
fileCreatedmed Trigger On satt tillspecificFolder. - Välj målmappen i Folder To Watch (ersätt
[YOUR_ID]med ert faktiska mapp-ID). - Öppna Drive File Updated Trigger och ställ in Event till
fileUpdatedmed samma mappval. - Credential Required: Anslut era googleDriveOAuth2Api-inloggningsuppgifter i både Drive File Created Trigger och Drive File Updated Trigger.
⚠️ Vanlig fallgrop: Om ni glömmer att ersätta [YOUR_ID] i Drive-triggers kommer inga filhändelser att triggas.
Steg 5: Mappa filfält och rensa befintliga poster i kunskapsbasen
Förbered metadata och ta bort gamla dokumentchunkar innan ni lägger in nya embeddings.
- Koppla både Drive File Created Trigger och Drive File Updated Trigger till Map Input Fields.
- I Map Input Fields ställer ni in file_id till
{{ $json.id }}och file_name till{{ $json.originalFilename }}. - Koppla Map Input Fields till Purge Existing Records.
- I Purge Existing Records ställer ni in Table ID till
documents, Operation tilldeleteoch Filter String till=metadata->>file_id=eq.{{ $json.file_id }}. - Credential Required: Anslut era supabaseApi-inloggningsuppgifter i Purge Existing Records.
Tips: Steget för borttagning säkerställer att uppdaterade filer inte skapar dubbla embeddings i documents.
Steg 6: Ladda, dela upp, skapa embeddings och indexera kunskapsbasfilerna
Ladda ner filen, dela upp texten, generera embeddings och infoga dem i Supabase.
- Koppla Purge Existing Records till Iterate Items Batch.
- Koppla Iterate Items Batch till Retrieve Drive File.
- I Retrieve Drive File ställer ni in Operation till
downloadoch File ID till{{ $('Map Input Fields').item.json.file_id }}. - Koppla Recursive Text Divider till Standard Document Loader som textdelare.
- I Standard Document Loader ställer ni in Loader till
docxLoader, Data Type tillbinaryoch Text Splitting Mode tillcustom. - I Standard Document Loader lägger ni till metadata file_id med värdet
{{ $('Map Input Fields').item.json.file_id }}. - Koppla Standard Document Loader till Supabase Vector Index och koppla Retrieve Drive File till Supabase Vector Index.
- I Supabase Vector Index ställer ni in Mode till
insertoch Table Name tilldocuments. - Koppla OpenAI Embedding Generator till Supabase Vector Index som embedding-modell.
- Credential Required: Anslut era googleDriveOAuth2Api-inloggningsuppgifter i Retrieve Drive File.
- Credential Required: Anslut era openAiApi-inloggningsuppgifter i OpenAI Embedding Generator.
- Credential Required: Anslut era supabaseApi-inloggningsuppgifter i Supabase Vector Index.
Obs: OpenAI Embedding Generator är en AI-under-nod som används av Supabase Vector Index och Knowledgebase Retriever. Säkerställ att inloggningsuppgifter läggs till i OpenAI Embedding Generator, inte på de överordnade noderna.
Steg 7: Testa och aktivera ert arbetsflöde
Validera chattupplevelsen och flödet för indexering av kunskapsbasen innan ni aktiverar i produktion.
- Trigga Incoming Chat Trigger manuellt med en exempel-payload och bekräfta att Support Assistant Agent returnerar ett svar.
- Ladda upp eller uppdatera en fil i den övervakade Drive-mappen och bekräfta att Drive File Created Trigger eller Drive File Updated Trigger triggas.
- Kontrollera att Purge Existing Records tar bort gamla chunkar och att Supabase Vector Index lägger in nya embeddings.
- Verifiera att assistenten kan hämta relevanta svar med Knowledgebase Retriever.
- Klicka på Activate för att aktivera arbetsflödet för produktionsanvändning.
Vanliga fallgropar
- Behörigheter för Google Sheets och Google Kalender kan löpa ut eller kräva specifika rättigheter. Om något slutar fungera, kontrollera först Google-kopplingen i n8n:s panel för Credentials.
- Om du använder Wait-noder eller extern rendering varierar bearbetningstiderna. Öka väntetiden om noder längre fram fallerar på tomma svar.
- Standardprompter i AI-noder är generiska. Lägg in er tonalitet tidigt, annars kommer du att redigera output för evigt.
Vanliga frågor
Cirka 60 minuter om dina Google- och Supabase-konton är klara.
Nej. Du klistrar in en inbäddningssnutt och mappar några fält i n8n. Den enda “kodliknande” delen är oftast att kopiera nycklar och testa webhooken.
Ja. n8n har ett gratis alternativ för egen drift och en gratis provperiod på n8n Cloud. Cloud-planer börjar på 20 USD/månad för högre volymer. Du behöver också räkna in API-användning för saker som embeddings och AI-svar (ofta några dollar i månaden för mindre webbplatser).
Två alternativ: n8n Cloud (hanterat, enklast att komma igång) eller egen drift på en VPS. För egen drift är Hostinger VPS prisvärd och hanterar n8n bra. Egen drift ger dig obegränsade körningar men kräver grundläggande serverhantering.
Ja, och det är en vanlig justering. Du kan ändra instruktionerna för AI-agenten så att den kvalificerar besökaren snabbt och sedan routar “boka ett samtal”-förfrågningar till Google Kalender, samtidigt som chattsammanfattningen loggas i Google Sheets. Många team anpassar också steget “Map Input Fields” så att kalenderhändelsen innehåller budget, tidslinje och vilken sida besökaren var på. Om du vill att boten bara ska svara utifrån dina dokument (ingen webbsökning) kan du stänga av SerpAPI-verktyget och förlita dig på Supabase-retrievern.
Oftast beror det på utgången OAuth-åtkomst eller att Google-kontot saknar behörighet till målarket. Anslut Google-credentialen igen i n8n och bekräfta sedan att kalkylarket är delat med samma konto. Om flödet kan läsa Drive-filer men inte kan skriva till Sheets, dubbelkolla att du auktoriserade rätt scopes. Rate limits kan också dyka upp om du bulk-importerar många chattar på en gång, så batchning hjälper.
Många.
Ofta, ja, eftersom det här inte bara är “skicka en rad till ett kalkylark”. Du kombinerar en webbplatschatt-trigger, en AI-agent med minne, en vektordatabas (Supabase) och förgreningslogik för leadhantering, vilket är där Zapier och Make kan bli dyrt eller klumpigt. n8n ger dig också ett alternativ för egen drift, vilket spelar roll om chattvolymen växer eller om du vill ha mer kontroll över data. Om du bara behöver ett enkelt “ny chatt → mejla mig”-flöde kan Zapier vara snabbare att slänga ihop. Men för ett verkligt leadsysten kopplat till Google Sheets och Google Kalender är n8n oftast det mer flexibla valet. Prata med en automationsexpert om du vill ha hjälp att välja.
När detta är live slutar chatten vara “trevligt engagemang” och börjar leverera leads du faktiskt kan agera på. Sätt upp det, testa en gång och låt flödet göra jagandet.
Kontakta oss
Hör av dig, så diskuterar vi hur just din verksamhet kan dra nytta av alla fantastiska möjligheter som AI skapar.