Webbplatschatten ska hjälpa människor att konvertera. I stället blir den en rörig blandning av upprepade frågor, inkonsekventa svar och missade “heta” konversationer som du upptäcker först när besökaren redan har lämnat.
Det är precis här automatisering med Flowise Slack chatbot betalar sig. Marknadschefer vill ha en konsekvent tonalitet i varumärket. Småföretagare vill ha färre avbrott. Supportteam vill bara att samma fem frågor ska sluta dyka upp varje dag.
Det här flödet kopplar en varumärkesanpassad webbplatschatt (driven av n8n) till Flowise multi-agent-chatflows och mappar sedan svaret så att det är redo att visas och skickas vidare till Slack när det behövs. Du får se hur det fungerar, vad du behöver och vad du ska se upp med.
Så fungerar den här automatiseringen
Hela n8n-flödet, från trigger till slutligt resultat:
n8n Workflow Template: Flowise + Slack: varumärkesanpassade chatsvar
flowchart LR
subgraph sg0["When chat message received Flow"]
direction LR
n0@{ icon: "mdi:play-circle", form: "rounded", label: "When chat message received", pos: "b", h: 48 }
n1@{ icon: "mdi:swap-vertical", form: "rounded", label: "Edit Fields", pos: "b", h: 48 }
n2["<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/httprequest.dark.svg' width='40' height='40' /></div><br/>Flowise"]
n2 --> n1
n0 --> n2
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 n0 trigger
class n2 api
classDef customIcon fill:none,stroke:none
class n2 customIcon
Problemet: webbplatschattens svar glider off-brand (och leads rinner iväg)
Webbplatschatt ser enkel ut tills du har kört den i några veckor. Samma frågor kommer in varje dag (“pris?”, “integrerar ni med X?”, “kan ni göra en demo?”). Någon svarar snabbt när de kan, och sedan varierar tonen beroende på vem som är online. Eller ännu värre: ingen är online, så besökaren lämnar. Även när du använder AI kan svar snabbt bli generiska, vilket skapar mer fram och tillbaka och inte tar samtalet mot ett bokat samtal eller ett kvalificerat lead. Den verkliga kostnaden är ärligt talat inte bara tid. Det är de missade tillfällena du aldrig får tillbaka.
Det bygger upp snabbt. Här är var det faller isär när chatten inte är automatiserad från start till mål.
- Du fortsätter svara manuellt på samma frågor, och det äter tyst upp ungefär en timme om dagen.
- Svaren glider i ton och detaljnivå, vilket gör att varumärket känns inkonsekvent på sajten.
- Bra chattar flaggas inte, så säljmogna konversationer blir liggande obemärkta i en chat-inkorg.
- När trafiken toppar sjunker svarstiden, och konverteringsintentionen svalnar snabbt.
Lösningen: varumärkesanpassade chatsvar från Flowise, routade via n8n
Det här flödet gör webbplatschatten till en pålitlig ingång för frågor, leadinsamling och vidarekoppling. En besökare skickar ett meddelande till din n8n-chatwidget (inbäddad på sajten med den medföljande JavaScript-snippet). n8n tar emot det via en chat-trigger-webhook och skickar sedan användarens fråga till din Flowise-chatflow med en HTTP-request till Flowises prediction-endpoint. Flowise returnerar ett strukturerat svar (själva AI-svaret), och n8n mappar det till ett korrekt formaterat output-fält så att chat-UI:t kan visa det direkt. Därifrån kan du bygga vidare på samma mönster och skicka “viktiga chattar” till Slack för snabb uppföljning, utan att någon behöver bevaka en chatskärm hela dagen.
Flödet startar när ett chattmeddelande tas emot på din webbplats. Sedan skickar n8n frågan till Flowise (säkrat med en Bearer-token) och väntar på svaret. Till sist mappas svaret till formatet som din chatbot förväntar sig, så att det visas som ett polerat svar i stället för rå JSON.
Det du får: automatisering vs. resultat
| Vad det här flödet automatiserar | Resultat du får |
|---|---|
|
|
Exempel: så här ser det ut i praktiken
Säg att din webbplats får 20 chattfrågor per dag, och att du (eller någon i teamet) lägger kanske 5 minuter varje gång på att läsa, svara och leta upp länkar. Det blir cirka 100 minuter om dagen. Med det här flödet skickar besökaren meddelandet som vanligt, n8n skickar det vidare till Flowise på några sekunder och chat-widgeten svarar automatiskt. Du hoppar fortfarande in i de få “riktiga säljsamtalen”, men du bränner inte längre nästan 2 timmar på upprepningar.
Det här behöver du
- n8n-instans (testa n8n Cloud gratis)
- Self-hosting-alternativ om du föredrar det (Hostinger fungerar bra)
- Flowise för multi-agent-chatflow-svaren.
- Slack för att notifiera teamet om viktiga konversationer.
- Flowise API-token (hämtas i Flowise auth/inställningar).
Kunskapsnivå: Medel. Du klistrar in en JavaScript-snippet på din webbplats och sätter miljövariabler (FLOWISE_URL, FLOW_ID) samt en auth-header.
Vill du inte sätta upp det här själv? Prata med en automationsexpert (gratis 15-minuters konsultation).
Så fungerar det
En besökare skickar ett chattmeddelande från din webbplats. Den inbäddade n8n-chatwidgeten triggar noden “When chat message received”, som fungerar som en webhook-endpoint för chattinmatning.
Meddelandet paketeras för Flowise. n8n tar chattinmatningen och förbereder en enkel JSON-payload (din “fråga”), så att Flowise får exakt det den förväntar sig.
Flowise genererar svaret. HTTP Request-noden anropar din Flowise prediction-endpoint (/api/v1/prediction/<FLOW_ID>) med en Bearer-token-header, och Flowise returnerar agentens svarstext.
Output mappas för korrekt formaterad visning (och routing). n8n:s Set/Edit Fields-nod mappar svaret till ett konsekvent fält, vilket gör det enkelt att visa i chat-UI:t och senare förgrena till Slack-notiser, loggning eller leadinsamling.
Du kan enkelt ändra vilka chattar som eskaleras till Slack utifrån dina behov. Se hela implementationsguiden nedan för anpassningsalternativ.
Steg-för-steg-guide för implementering
Steg 1: Konfigurera webhook-triggern
Konfigurera den inkommande chatt-webhooken så att ert arbetsflöde tar emot chattinmatning i realtid.
- Lägg till och öppna Incoming Chat Trigger.
- Ställ in Mode på
webhook. - Aktivera Public genom att ställa in den på
true. - I Options, behåll Allowed Origins som
*om ni vill acceptera förfrågningar från valfritt ursprung.
⚠️ Vanlig fallgrop: Om er inkommande chattklient ligger på en annan domän, behåll * för tillåtna ursprung för att undvika CORS-problem under testning.
Steg 2: Anslut Flowise
Konfigurera API-anropet som skickar chattinmatning till Flowise för prediktion.
- Lägg till och öppna Flowise Prediction Request.
- Ställ in URL på
https://FLOWISEURL/api/v1/prediction/FLOWISE_ID. - Ställ in Method på
POST. - Aktivera Send Body och Send Headers.
- Ställ in Specify Body på
json. - Ställ in JSON Body på
={ "question": "{{ $json.chatInput }}"}. - Lägg till en header-parameter: Name
Content-Type, Valueapplication/json. - Inloggningsuppgifter krävs: Anslut era httpHeaderAuth-credentials.
⚠️ Vanlig fallgrop: Ersätt FLOWISEURL och FLOWISE_ID med er faktiska Flowise-instans-URL och prediktions-ID innan ni testar.
Steg 3: Sätt upp output-mappningen
Mappa Flowise-svaret till ett konsekvent output-fält för fortsatt användning nedströms.
- Lägg till och öppna Map Output Fields.
- Skapa en ny tilldelning med Name satt till
output. - Ställ in Type på
string. - Ställ in Value på
={{ $json.text }}.
Steg 4: Testa och aktivera ert arbetsflöde
Verifiera att arbetsflödet körs från start till mål och aktivera det sedan för drift.
- Klicka på Execute Workflow och skicka en testförfrågan till webhook-URL:en för Incoming Chat Trigger.
- Bekräfta att Flowise Prediction Request returnerar ett svar och att Map Output Fields ger ett
output-fält. - Om det fungerar, växla arbetsflödet till Active för användning i produktion.
Vanliga fallgropar
- Flowise-uppgifter kan gå ut eller kräva specifika behörigheter. Om det skapar fel, kontrollera först din Flowise API-token och Authorization-headern i HTTP Request-noden.
- Om du använder Wait-noder eller extern rendering varierar processingtider. Öka väntetiden om efterföljande noder misslyckas på grund av tomma svar.
- Standardprompter i AI-noder är generiska. Lägg in din varumärkesröst tidigt, annars kommer du att redigera output för alltid.
Vanliga frågor
Cirka 30 minuter om din Flowise-chatflow redan fungerar.
Nej. Du kommer mest att kopiera/klistra in värden och koppla in behörigheter. Den enda “kodiga” delen är att lägga in den medföljande JavaScript-snippet på din webbplats.
Ja. n8n har ett gratis self-hosted-alternativ och en gratis provperiod på n8n Cloud. Cloud-planer börjar på 20 USD/månad för högre volym. Du behöver också räkna in hosting för Flowise och eventuell LLM-användning bakom din Flowise-chatflow.
Två alternativ: n8n Cloud (hanterat, enklast att komma igång) eller self-hosting på en VPS. För self-hosting är Hostinger VPS prisvärd och hanterar n8n bra. Self-hosting ger obegränsat antal körningar men kräver grundläggande serverhantering.
Ja, och det är ett smart nästa steg. Behåll befintliga “Incoming Chat Trigger” och “Flowise Prediction Request”, och lägg sedan till en enkel If/Switch efter “Map Output Fields” för att upptäcka intent (ord som “pricing”, “demo”, “timeline” eller “budget”). När det matchar skickar du ett Slack-meddelande som innehåller besökarens fråga och AI:ns svar, plus en länk eller identifierare för uppföljning. Du kan också justera payloaden du skickar till Flowise så att den inkluderar metadata som sidans URL, produkt eller språk, så att chatflowen kan svara mer kontextuellt.
Oftast är det Authorization-headern (utgången token, fel format eller att den inte skickas alls). Dubbelkolla Flowise-URL:en och FLOW_ID i HTTP Request-noden och bekräfta sedan att endpointen går att nå från där n8n körs. Om det fungerar i Postman men inte i n8n är det ofta en header-/credential-missmatch eller ett stavfel i en miljövariabel.
Väldigt många, så länge din Flowise + LLM-backend hänger med.
För webbplatschatt är n8n oftast bättre eftersom du kan köra det som en riktig webhook-endpoint, styra request/response-formatet och self-hosta om volymen växer. Zapier och Make kan också göra HTTP-anrop, men du hamnar ofta i “en åtgärd i taget”-känslan när du behöver logik, routing och strukturerade outputs. n8n gör det också enklare att bygga ut med minne, loggning, förgrening och interna notiser utan att bygga om allt. Om din setup bokstavligen är “skicka ett meddelande till ett verktyg” kan de enklare plattformarna räcka. Prata med en automationsexpert om du vill ha en snabb rekommendation baserat på din trafik och dina mål.
När detta väl är igång slutar din sajt att vara beroende av att någon är “i närheten” för att svara på frågor. Flödet tar hand om det repetitiva, och de viktiga chattarna kan hamna där teamet redan jobbar.
Kontakta oss
Hör av dig, så diskuterar vi hur just din verksamhet kan dra nytta av alla fantastiska möjligheter som AI skapar.