Lägg till en AI-chattbot på din webbplats utan kod

Du kan lägga till en AI-chattbot på din webbplats genom att ge en agent kunskap om ditt företag, konfigurera dess svar och installera en chattwidget med ett tillägg eller ett medföljande skript. Quickchat AI:s chattbot för webbplatser samlar kunskap, samtalsinställningar och teamets Inbox på ett ställe. Besökare ställer frågor på din webbplats utan att skapa ett konto.

I den här guiden bygger vi Kestrel Kitchens, ett fiktivt företag som designar kök. En besökare frågar hur lång tid en renovering tar, kontrollerar den troliga kostnaden för ett kök på 3 gånger 4 meter och ber sedan om en offert. Agenten svarar utifrån företagets information, samlar in projektuppgifter och låter en designer fortsätta samtalet.

Grundkonfigurationen kräver ingen programmering. Följ stegen för kunskap och instruktioner, insamling av leads och överlämning till en människa, och installera sedan widgeten. En valfri API Action skickar fullständiga förfrågningar till ett annat system.

Ladda ner konfigurationspaketet för Kestrel Kitchens för exempelwebbplatsen, kunskapen, Main Prompt, inställningarna och testmeddelandena. Filerna går att redigera och följa i kontrollpanelen; de importerar inte en agent med ett klick. Skärmbilder och kopierbara paketfiler, promptar och konfigurationer är kvar på engelska så att det testade exemplet kan återskapas.

Vad ska chattboten på webbplatsen göra?

Chattboten svarar på frågor utifrån ditt innehåll, sparar uppgifter för en begärd uppföljning och lämnar över samtal till teamet när en människa behövs.

Dessa resultat behöver verifieras på olika sätt. Ett korrekt prisintervall kommer från Knowledge Base. En offertförfrågan behöver kontakt- och projektuppgifter i Inbox. En överlämning kräver att en människa tar ansvar och skickar ett svar som når besökaren.

Besökarens väg genom exemplet. En offertförfrågan registrerar intresse; designern bekräftar fortfarande pris och tillgänglighet.

Vad behöver du innan du lägger till en chattbot?

Du behöver ett Quickchat AI-konto, verifierbar företagsinformation och åtkomst till webbplatsens inställningar för tillägg eller egen kod.

1. Skapa ett Quickchat AI-konto och slutför registreringen. Använd en separat agent för övningen så att exempelfakta inte kan påverka befintlig kundservice.
2. Förbered dina tjänstesidor, vanliga frågor och policyer, eller använd den fiktiva kunskapen i paketet. Byt ut de fiktiva priserna och serviceområdet innan du driftsätter för ett riktigt företag.
3. Kontrollera att ditt webbplatsabonnemang tillåter den aktuella installationsmetoden. WordPress kräver åtkomst till tillägg; vissa driftade webbplatsbyggare kräver ett betalt abonnemang för egen kod som gäller hela webbplatsen.
4. Se till att någon bevakar testets Inbox när du provar överlämning till en människa. Ha en webbläsare på datorn och en telefon tillgängliga för de sista kontrollerna på webbplatsen.

Free är för personligt, icke-kommersiellt lärande. Free-planen omfattar 50 AI-krediter per månad. Företagsanvändning kräver en kommersiell plan, och tester förbrukar samma svarstilldelning som andra AI-samtal. Abonnemang för webbplatsbyggare och externa API-kostnader tillkommer separat. Kostnadsavsnittet skiljer mellan dessa kostnader.

Steg 1: Hur tränar du en chattbot på din webbplats?

Lägg till sidorna som innehåller företagets svar i Knowledge Base och kontrollera det importerade innehållet innan du testar. Det ger agenten referensmaterial för svaren.

Skapa agenten för övningen

1. Välj Set up manually på den första konfigurationsskärmen. I en befintlig kontrollpanel använder du + bredvid AI Agent (Add new AI Agent) för att skapa en separat agent och väljer sedan Set up manually.
2. I Identity anger du Kestrel Kitchens under Name your AI Agent. Klistra in main-prompt.txt från paketet i Describe what you want your agent to do. Detta blir agentens Main Prompt, som förklaras i steg 2. Välj Next.
3. Lämna Knowledge Base tom tills vidare och välj Next. Fortsätt genom External apps utan att välja någon anslutning. I Deployment väljer du Chat widget och sedan Next.
4. På Choose your plan använder du Skip for now för att fortsätta den personliga övningen, eller väljer en lämplig kommersiell plan för företagsanvändning. Slutför eller avvisa eventuella valfria erbjudanden som visas efteråt.
5. Bekräfta agentens namn i Identity i kontrollpanelen och öppna sedan Knowledge Base. Välj antingen dina egna sidor eller den medföljande exempelartikeln nedan.

Importera dina egna sidor

1. Välj Add Website i Knowledge Base. Välj en enskild sida eller alternativet för webbplatsimport beroende på hur mycket du behöver.
2. Ange den offentliga webbadressen. Vid webbplatsimport granskar du de hittade sidorna och väljer de tjänste-, pris-, process- och FAQ-sidor som ska ligga till grund för svaren.
3. Granska den importerade texten. Bekräfta att priserna har rätt valuta och momshantering och att gamla kampanjer eller orelaterade sidor inte har blivit källor.
4. Vänta tills bearbetningen är klar. Tillämpa eller publicera eventuella väntande kunskapsändringar som visas i kontrollpanelen innan du testar den installerade widgeten.

Börja med några tydliga sidor. En webbplats kan visa en tilltalande prisruta men placera villkoren på annat håll; agenten behöver båda. Om du bara importerar startsidan kan du missa installationsvillkor, geografiska begränsningar eller återbetalningspolicyer som gör ett svar användbart.

Använd källan för Kestrel Kitchens

Lägg till fakta direkt för att återskapa exemplet utan att först publicera en webbplats:

1. Välj Add Article i Knowledge Base. Då skapas en artikel med namnet Untitled och Edit Article öppnas.
2. Ange Kestrel Kitchens: services, prices and process i Title. Under Content väljer du Plain Text och klistrar in knowledge.txt från paketet.
3. Välj Save och vänta tills artikeln har statusen Ready. Bekräfta att titeln visas i listan i Knowledge Base.

Den sparade artikeln behåller villkoren för priser och tidsramar. Dess fiktiva fakta stämmer med exempelwebbplatsen.

Kestrel Kitchens is a fictional kitchen design and renovation business used in this tutorial. It serves Bristol, Bath and addresses within 25 miles of central Bristol.

Services: kitchen design, supply and full installation. A full kitchen renovation typically costs £18,000 to £45,000 including VAT. This is a planning range, not a quote. The final price depends on the survey, layout, cabinetry, appliances and building work. Room dimensions alone are not enough to calculate a firm price.

Timelines: survey and design normally take 2 to 3 weeks. Installation usually takes 4 to 8 weeks after all materials are available. These are typical durations, not a promised start date or completion date.

Process: discuss the project, arrange a site survey, agree the design and receive a written quote, then schedule work once the quote is accepted and materials are available. The chatbot cannot book a survey or confirm availability.

The design team works Monday to Friday, 09:00 to 17:00, Europe/London. Quote enquiries need the visitor's full name, email, postcode and project type. A preferred timeline is helpful but optional. The team follows up by email. Do not promise a response deadline.

Källan lämnar avsiktligt finansiering ospecificerad. Det ger ett användbart test av hur agenten hanterar en verklig kunskapslucka. På en riktig webbplats bör du hålla källsidorna uppdaterade och använda de uppdateringsinställningar som stöds där de finns; guiden till Knowledge Base förklarar hur du organiserar och testar källorna.

Steg 2: Vad ska chattboten säga och aldrig lova?

Använd Main Prompt för att ange hur agenten ska tillämpa kunskapen: svara först, ge användbara svar och låt teamet fatta beslut om exempelvis en fast offert.

För Kestrel visar rummets mått projektets omfattning. De fastställer inte skåpinredning, vitvaror eller byggarbete. Agenten ska förklara källans planeringsintervall på £18,000 till £45,000 inklusive moms utan att räkna fram ett mer exakt pris utifrån golvytan.

Priserna är fiktiva uppgifter för guiden. Poängen är att behålla skillnaden mellan fakta från källan och ett beslut som teamet fortfarande behöver fatta.

1. Välj Edit på kortet Main Prompt i Identity.
2. Klistra in hela prompten nedan. Låt den sparas och öppna sedan redigeraren igen för att bekräfta den lagrade texten.
3. Behåll företagsfakta i Knowledge Base. Använd prompten för svarsstil, insamlingsbeteende och beslut som kräver en människa.

Main Prompt är instruktionsfältet. Hela texten nedan och i paketet är den kopierbara versionen.

You are the website assistant for Kestrel Kitchens. Help visitors understand our services, indicative prices and process using the Knowledge Base.

Answer the visitor's question before asking for contact details. Keep replies concise, usually two to four sentences. Use the visitor's language.

Treat prices as planning ranges. Never calculate a firm quote from room dimensions, invent a discount, promise a start date, confirm a survey booking or claim financing is available. If the Knowledge Base does not answer a question, say that a designer must confirm it.

When a visitor wants a quote or follow-up, collect their full name, email, postcode and project type in conversation. Ask one or two relevant questions at a time. Ask about their preferred timeline only after the required details, and accept a refusal without pressure. Do not ask for payment information.

Offer Human Handoff when the visitor asks for a designer or needs information you cannot confirm. Respect the configured working hours. Never claim that a designer is connected or a quote is booked. If the team is unavailable, offer an email follow-up.

Acknowledge the details the visitor has provided. Do not claim CRM delivery or a confirmed booking. The design team reviews enquiries in the Inbox.

Öppna AI Preview och fråga How long does a full kitchen renovation take?. I det lokala kontrolltestet svarade agenten med 2 till 3 veckor för platsundersökning och design, följt av 4 till 8 veckor för installation efter att materialet finns tillgängligt. Både tidsåtgången och villkoret är viktiga.

Starta ett nytt samtal och fråga Do you offer financing?. Ett korrekt svar förklarar att källan inte bekräftar något erbjudande och hänvisar frågan till en designer. Säkrare formuleringar i prompten skulle inte tillföra den saknade företagsuppgiften.

Steg 3: Hur samlar du in offertförfrågningar i chatten?

Smart Data Gathering frågar efter utvald information under ett samtal och sparar det besökaren anger. För en offertförfrågan samlar du bara in det designern behöver för att följa upp.

1. Öppna Actions & MCPs, aktivera Smart Data Gathering och välj Edit Action. Sätt Name till Quote enquiries och Description till Capture contact and project details for a kitchen design enquiry. Det sparade namnet blir kortets titel.
2. Lägg till raderna nedan under Data to collect. Behåll dessa engelska Data point-namn när du återskapar exemplet; kontaktnamnen har särskilda mappningar till besökarfälten i Inbox.
3. Sätt Reason for collecting information till So a Kestrel Kitchens designer can assess your project and follow up by email.
4. Sätt When to ask for data till After exchanging a few messages och How to ask for data till Subtle.
5. Spara din Action. Ställ en användbar fråga om tjänsterna i AI Preview innan du ber om en offert och granska de sparade uppgifterna i Inbox.

Frågorna beskriver informationen som ska samlas in. Inställningarna för tidpunkt och stil styr när frågorna ställs; testa även själva samtalet.

Namn, e-postadress, postnummer och projekttyp är obligatoriska uppgifter för en fullständig förfrågan i det här exemplet. Önskad tidsram är valfri, som Main Prompt förklarar. Detta verksamhetskrav är skilt från inställningarna för insamling i samtalet; steg 8 kontrollerar de obligatoriska fälten innan en CRM-förfrågan skickas.

Agenten ska besvara en allmän kostnadsfråga utan att kräva en e-postadress som villkor för svaret. En besökare kan också avböja insamlingen. Använd I am only researching. I do not want to leave contact details. för att kontrollera att samtalet fortsätter vara användbart utan upprepade förfrågningar.

Var hamnar insamlade uppgifter?

Öppna samtalet i Inbox. Vanliga kontaktuppgifter visas i besökarfälten; övriga insamlade värden är fortsatt kopplade till samtalet och kan exporteras via Export Gathered Data.

Under Where to send data meddelar Email new leads varje administratör för agenten när en e-postadress eller ett telefonnummer samlas in för första gången. Ett namn ensamt skickar inget mejl. Preview och Simulation skickar inte dessa aviseringar, så kontrollera din egen administratörsinkorg med ett kontrollerat test i den installerade widgeten innan du förlitar dig på e-postleveransen. Den lokala genomgången håller extern e-postleverans avstängd.

Dokumentationen för Smart Data Gathering beskriver insamling, aviseringar och export. På din egen webbplats bör du förklara varför du ber om uppgifterna och länka till din integritetspolicy i widgeten. Guiden till dataskydd för chattbotar hjälper dig att granska det bredare dataflödet.

Steg 4: Hur låter du en människa ta över chatten?

Human Handoff lämnar över ett samtal till teamet; en person tar sedan över i Inbox och svarar samma besökare.

Förbered överlämningen innan du publicerar widgeten. Den som ber om en designer ska inte behöva fylla i offertformuläret först, och agenten ska inte antyda att någon är tillgänglig utanför bemannade tider.

1. Aktivera Human Handoff i Actions & MCPs och öppna Edit Action.
2. Låt standardreglerna Media Message, User Frustration, Customer Support Suggestion och Lack Of Knowledge vara på; lämna Irrelevant Advice avstängd. Main Prompt förklarar redan när en designer ska erbjudas. Det testade exemplet använder dessa standardregler utan egna tilläggsregler.
3. Konfigurera meddelandena och tillgängligheten nedan och spara sedan. Låt Email notifications vara avstängt under övningen och kontrollera överlämningen direkt i Inbox.

Använd tider då en person faktiskt bevakar Inbox. Det fiktiva schemat är inget löfte om ett omedelbart svar.

Fråga Can I speak to a designer? från webbplatsen under en bemannad period. Slutför eventuell bekräftelse av överlämningen som agenten ber om. Öppna samtalet i Inbox och välj Assign to me när det inte är tilldelat någon, eller Take over när den kontrollen visas. Skicka ett mänskligt svar och bekräfta att besökaren får det. Använd Reassign to AI när AI:n ska återuppta samtalet.

Kontrollera ansvarstilldelningen och att det mänskliga svaret har levererats, inte bara agentens erbjudande om överlämning.

Upprepa i ett nytt samtal utanför de konfigurerade tiderna. Agenten ska förklara tillgängligheten och erbjuda den angivna vägen för uppföljning. Om du tillfälligt ändrar schemat för att göra kontrollen återställer du det riktiga schemat efteråt. Dokumentationen för Human Handoff förklarar inställningarna och flödet i Inbox.

I guiden för att lämna över från en chattbot till en människa finns separata kontroller av vem som ansvarar för samtalet, återgången till AI och fel utanför arbetstid.

Steg 5: Hur anpassar du widgeten till din webbplats?

Ställ in utseendet och den fasta texten under Channels → Your Website. Gör välkomstmeddelandet tillräckligt specifikt för att förklara vad besökaren kan fråga om.

Utseende

1. Öppna Appearance. För Kestrel väljer du temat Custom med vit bakgrund, mörkgrönt sidhuvud och accentfärg (#315448) samt vit text i sidhuvudet. Behåll standardstorleken på texten och de rundade kontrollerna.
2. Klicka på avatarens uppladdningsikon under Branding → AI Agent Avatar, välj website/kestrel-avatar.png från paketet och välj Upload i beskärningsdialogen.
3. Sätt Widget window max width till 400px och Widget window max height till 520px. Välj Small som storlek på chattknappen, placera den till höger och använd Ask about your kitchen som etikett. Etiketten är tillgänglig med den lilla chattknappen. Förhandsgranska placeringen i förhållande till eventuella cookiebannrar eller andra flytande kontroller på webbplatsen.
4. Låt Auto-open Widget vara avstängt. Att öppna widgeten vid varje sidladdning avbryter surfandet, särskilt på en telefon.

Kontrollera förhandsvisningen när du väljer färger. Testet på den riktiga webbplatsen är fortfarande viktigt eftersom chattknappen delar utrymme med webbplatsens kontroller.

Textinnehåll

Öppna Text Content och använd dessa värden:

Samtalsförslag bör inleda användbara uppgifter. Ansvarsfriskrivningen talar om vilka beslut som fortfarande behöver en designer.

Agenten kan svara på besökarens språk. Översättning av det fasta välkomstmeddelandet och widgetens etiketter är en separat inställning under Other languages, tillgänglig på betalda planer. För en flerspråkig webbplats bör du testa både svaret och den fasta gränssnittstexten; guiden till flerspråkiga chattbotar förklarar skillnaden.

Utseendeändringar kan ta några minuter innan de når cachade besökarsessioner. Ladda om innan du drar slutsatsen att en sparad ändring misslyckades. Hide Quickchat AI Branding kräver Professional eller högre; guiden till egen varumärkesprofil beskriver övriga ytor att granska.

Steg 6: Hur installerar du chattboten på din webbplats?

Installera Widget i webbplatsens gemensamma layout eller använd den plattformsintegration som stöds. Den flytande widgeten måste köras på sidan som besökaren tittar på.

1. Öppna Channels → Your Website → Install.
2. Aktivera Widget & Embed access för den offentliga widgeten.
3. Välj installationsmetod för din webbplats och kopiera kodsnutten eller Scenario ID som visas för den här agenten.
4. Publicera ändringen, öppna den offentliga webbplatsen och ställ en fråga vars svar du vet finns i Knowledge Base.

Kopiera från den här agentens Install-skärm. Dess Scenario ID är en offentlig widgetidentifierare, inte en privat API-nyckel.

Alla webbplatser: klistra in Widget-kodsnutten före den avslutande body-taggen

Välj Install manually with code och kopiera kodsnutten för Widget. Den nuvarande laddaren ser ut så här:

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("init", "YOUR_SCENARIO_ID");
</script>

Ersätt YOUR_SCENARIO_ID med värdet från Install. Klistra in hela kodsnutten en gång, direkt före </body> i den gemensamma layouten, eller använd webbplatsbyggarens fält för en sidfot som gäller hela webbplatsen. Laddaren infogar ett skript i sidans body, så om du placerar den i head innan body finns kan det hindra laddningen.

Placeringen spelar roll. Ett iframe-baserat HTML-block är en separat sida och är olämpligt för den här flytande widgeten.

Det separata alternativet Embed placerar en chatt i en behållare på sidan. Använd dess genererade kodsnutt om du vill ha ett inbäddat chattavsnitt. Ett HTML-block som infogar kod direkt på sidan kan stödja det upplägget; ett block som isolerar kod i en iframe fungerar annorlunda. Se dokumentationen för webbplatskanalen.

WordPress: installera det officiella tillägget

1. Öppna Plugins → Add New i WordPress, sök efter Quickchat AI Agent och välj sedan Install Now och Activate.
2. Öppna Settings → Quickchat AI Agent.
3. Klistra in Scenario ID från Install-skärmen i Quickchat AI och välj Save Changes.
4. Öppna en offentlig sida och kontrollera widgeten. Använd antingen tillägget eller en manuell kodsnutt så att laddaren inte installeras två gånger.

Du behöver en WordPress-installation och ett abonnemang som tillåter tillägg. Guiden till chattbotar för WordPress visar tilläggets gränssnitt och kontroller som är specifika för WordPress.

Squarespace: använd kodinjektion i sidfoten

1. Öppna webbplatsens panel Code Injection. Använd kontrollpanelens inställningssökning om navigeringen ser annorlunda ut på ditt konto.
2. Klistra in hela Widget-kodsnutten i Footer och spara.
3. Öppna den publicerade sidan i en separat webbläsarflik och testa ett svar.

Squarespace erbjuder Code Injection i Core, Plus, Advanced och vissa äldre abonnemang. Kodinjektion i sidfoten placerar koden före </body> på hela webbplatsen. Använd den ytan för den flytande widgeten; ett iframe-block på sidnivå är inte likvärdigt. Den egna koden gäller inte Squarespaces kassasidor.

Wix: använd Custom Code i slutet av body

1. Öppna Settings → Custom Code i webbplatsens kontrollpanel och sedan + Add Custom Code.
2. Klistra in Widget-kodsnutten och ge den namnet Quickchat AI widget.
3. Tillämpa den på All pages, välj Body - end och sedan Apply.
4. Testa den publicerade webbplatsen, inklusive navigering till en annan sida.

Wix kräver en publicerad webbplats med en ansluten domän för egen kod. Använd inställningen Custom Code som gäller hela webbplatsen för den här flytande widgeten.

Webflow: använd sidfotskod och publicera

1. Öppna Site settings → Custom code.
2. Klistra in Widget-kodsnutten i Footer code och välj Save changes.
3. Välj Publish för den avsedda domänen och testa sedan den publicerade webbadressen.

Webflows inställningar för egen kod kräver en kvalificerande betald Workspace eller en aktiv Site-plan. Att bara spara inställningen publicerar den inte.

Shopify: välj kodsnutten för en befintlig agent eller Shopify-appen

För Kestrel-agenten du redan har byggt lägger du till dess Widget-kodsnutt direkt före </body> i Online Store → Themes → Edit code → layout/theme.liquid, sparar och granskar butiken. Säkerhetskopiera temat innan du redigerar och kontrollera installationen igen efter temabyten. Den här vägen visar agenten du valde; den konfigurerar inte Actions för produkter eller ordrar.

För en butiksinriktad agent ansluter konfigurationen av Quickchat AI:s Shopify-app butiken genom sitt eget introduktionsflöde. Efter anslutningen använder du Enable Widget in Shopify Theme Editor eller öppnar Online Store → Themes → Edit theme → App embeds. Aktivera Quickchat AI Widget och spara. Shopifys dokumentation om appinbäddning förklarar temakontrollerna; aktivera appinbäddningen igen när du byter publicerat tema.

Vägarna i webbplatsbyggarna ovan kontrollerades mot officiell dokumentation. Skärmbilderna i genomgången visar Kestrels exempelwebbplats och den riktiga lokala widgeten; de visar inte inloggade konton hos varje webbplatsbyggare.

Kontrollera kodsnutten innan du felsöker agenten

Dessa valfria kontroller utgår från värdena du anger:

• Kontrollera en Widget-kodsnutt. Kontrollera inklistrad kod mot angivet Scenario ID. Detta hämtar inte din webbplats.
• Jämför driftsättningsmetoder. Kontrollera dina angivna kanaler, webbplatsåtkomst och nödvändiga funktioner mot konfigurationsalternativen i Quickchat AI. Detta granskar inte din webbplats eller ditt konto.

I en kompatibel webbläsare finns kontrollerna även som webbplatsverktyg. Länkarna öppnar standardformulären.

Steg 7: Hur testar du chattboten innan besökarna gör det?

Testa svaret, sparade data och levererade svar var för sig. AI Preview och Simulation Testing hjälper till att utvärdera beteendet; den publicerade webbplatsen bevisar att besökaren kan använda den installerade widgeten.

Kör oberoende frågor i Simulation Testing

Öppna Testing → Create Dataset, ge det namnet Kestrel Kitchens: website launch checks och välj Paste messages. Lägg till frågorna om tidsåtgång, pris och finansiering nedan, med en rad som innehåller --- mellan frågorna. Enbart en radbrytning behåller texten i ett och samma testmeddelande. Ställ in Evaluation criteria för att kontrollera fakta och kortfattade svar och välj sedan Run → Start Run. Paketet innehåller de exakta meddelandena och kriterierna.

Varje rad i datamängden startar ett separat samtal. Använd Simulation för dessa oberoende frågor; kör kontrollerna av offertförfrågan och mänskligt övertagande över flera turer i ett enda samtal i AI Preview eller på webbplatsen. Granska Action-loggen och mottagaren separat eftersom en utvärderare av samtalstext inte kan verifiera extern leverans.

Öppna en slutförd körning och granska svaren. Detta prissvar behåller planeringsintervallet; svarspoängen bekräftar inte leverans till ett annat system.

Använd ett nytt samtal mellan oberoende fall. En omladdning av sidan kan återuppta ett befintligt samtal, så använd widgetens kontroll för ny chatt när du behöver ett nytt test.

Kontrollera webbplatsen på en telefon

På skärmar som är smalare än 768 CSS-pixlar använder den öppna widgeten en helskärmslayout. Kontrollera att du kan öppna den, skriva med tangentbordet synligt, rulla i samtalet och stänga den för att återgå till webbplatsen.

Avsluta med att en riktig person svarar från Inbox. Ett bra AI-svar bevisar inte att vägen till mänsklig support fungerar. Upprepa ett mindre urval av kontrollerna efter ändringar av källor, promptar, Actions eller webbplatsens tema.

Steg 8: Hur skickar du en fullständig förfrågan till ditt CRM?

En valfri API Action kan skicka de sparade fälten till en HTTP-mottagare när samtalet innehåller alla obligatoriska uppgifter. Den grundläggande webbplatschattboten går redan att använda utan detta tillägg.

Den viktiga skillnaden är mellan en kontaktuppgift har samlats in och den här förfrågan är fullständig. Quickchat AI sätter lead_captured när ett vanligt kontaktfält, inklusive ett namn, samlas in för första gången. Flaggan ensam visar inte att e-postadress, postnummer eller projekttyp finns.

Plattformen kontrollerar varje villkor. Modellen samlar in informationen; villkoren avgör när förfrågan får skickas.

Förbered mottagaren

Använd en CRM- eller automatiseringsendpoint som du kontrollerar och som accepterar JSON-kroppen nedan. Paketet innehåller en liten lokal demonstrationsmottagare för den som vill granska förfrågan innan ett CRM ansluts. Dess installationsanvisningar skapar en privat token och förklarar hur du exponerar en tillfällig HTTPS-endpoint. Skicka bara fiktiva testdata till demonstrationsmottagaren.

Om du i stället vill ha en hanterad integration följer du guiden till rapportering i Google Sheets eller genomgången för eget CRM. Aktivera inte två arbetsflöden som båda skapar samma lead.

Konfigurera en automatisk API Action

1. Öppna Actions & MCPs → Custom Actions → Add Action → API Action. Välj Create manually om den beskrivningsbaserade byggaren öppnas.
2. Sätt API Action Name till Send quote enquiry.
3. Lämna What to ask the user first tomt. Den här Action-funktionen läser fälten som Smart Data Gathering redan har sparat; den ber inte modellen att fylla i en andra uppsättning parametrar.
4. Välj POST under API Endpoint och ange mottagarens HTTPS-adress för /enquiries.
5. Lägg till headers, kropp och villkor nedan, spara och aktivera sedan din Action.

Ange token enbart i inställningen för Action-funktionens headers. Håll den utanför prompten, webbplatsens kodsnutt och besökarens samtal. Demonstrationsmottagarens README förklarar hur du genererar den; använd ditt CRM:s dokumenterade autentisering för en riktig integration.

Välj JSON på fliken Body och ange:

{
  "conversation_id": "{{conversation_id}}",
  "name": "{{metadata_visitor_name}}",
  "email": "{{metadata_visitor_email}}",
  "postcode": "{{metadata_postcode}}",
  "project_type": "{{metadata_project_type}}"
}

Använd Add AI Data för att infoga motsvarande inbyggda värden och metadatavärden. conversation_id identifierar samtalet. De övriga värdena kommer från de sparade fälten; de engelska kontaktnamnen mappas till visitor_name och visitor_email, medan Project type blir project_type. Dokumentationen om variabler förklarar dessa mappningar.

Välj When metadata matches under When to run. Lägg till alla fem rader i Run when; metadatavillkoren kombineras med AND:

För dessa textfält avvisar is true både tomma värden och text som tolkas som falskt. exists kontrollerar bara att en nyckel finns; en sparad tom sträng kan passera. Testerna nedan visar varför det starkare villkoret spelar roll. Detta kontrollerar att användbar text har angetts, inte att besökarens identitet eller fastighetsuppgifter har verifierats oberoende.

Använd denna API Action Description:

Send a quote enquiry to the design team when the visitor has provided their full name, email, postcode and project type. This records an enquiry only; it does not book a survey or confirm a price.

De första två av fem sparade villkor. Lägg till varje rad från tabellen; When metadata matches kontrollerar dem efter en AI-tur utan att agenten väljer din Action.

Action-funktionen försöker köras en gång per samtal när alla villkor stämmer. Den körs inte igen när en valfri tidsram tillkommer, och en skickad förfrågan som misslyckas försöks inte automatiskt igen i samma samtal. Behåll tidsramen i Inbox åt designern, eller bygg en integration med separata funktioner för att skapa och uppdatera poster om ditt CRM behöver senare ändringar.

Förfrågan körs efter AI-turen, och dess svar infogas inte i chatten. Därför bekräftar Main Prompt besökarens uppgifter utan att påstå att ett CRM har tagit emot dem. Verifiera leveransen i Action-loggen och hos mottagaren. Dokumentationen om automatiska Actions beskriver detta körbeteende.

Testa ofullständiga uppgifter och sedan den fullständiga förfrågan

Den första versionen använde exists för de obligatoriska textfälten. Sam angav ett namn och sedan en e-postadress i nästa meddelande. Smart Data Gathering hade redan skapat tomma värden för postnummer och projekttyp, så nycklarna fanns och Action-funktionen skickade en ofullständig förfrågan. Det förbrukade också dess enda försök för samtalet.

Korrigeringen var att ändra de fyra textfältsvillkoren till is true och behålla resten av konfigurationen. Upprepa testet i ett nytt samtal och ange bara en e-postadress i den andra turen. Action-funktionen ska vänta på de återstående projektuppgifterna.

Detta är ett observerat samtal, inte en uppmätt framgångsgrad i produktion. Återskapa det med ett nytt samtal, granska de sparade fälten efter varje tur och kontrollera förfrågan vid din egen endpoint.

Det faktiska Action-anropet returnerade HTTP 201. Öppna detaljerna för att granska förfrågan; den sparade posten nedan visar vad mottagaren lagrade.

En faktisk sparad post från den autentiserade demomottagaren. Detta är en förfrågan, inte en bekräftad offert eller bokning.

Demonstrationen använde en lokal mottagare och registrerade faktisk HTTP-leverans. En driftad Quickchat AI-agent behöver en offentligt åtkomlig HTTPS-endpoint; en localhost-adress på din dator kan inte nås från tjänsten.

Om inget kommer fram granskar du View logs på din Action och samtalets sparade metadata. Saknade värden, en avstängd Action och ett HTTP-fel kräver olika åtgärder. Korrigera konfigurationen och använd ett nytt samtal för att testa den automatiska utlösaren igen; att be samma chatt försöka igen återställer inte ett försök som bara får göras en gång per samtal.

Varför saknas chattboten eller visar gamla inställningar?

Kontrollera den publicerade sidan, installationsplatsen och agentåtkomsten innan du ändrar prompten. Ett laddningsproblem i webbläsaren är skilt från ett problem med svarskvaliteten.

Om webbläsaren rapporterar en blockerad resurs granskar du det exakta felet för Content Security Policy eller blockeraren. Undvik att stänga av webbplatsens skydd generellt. Testa den offentliga sidan via HTTPS och använd kanaldokumentationen för den nödvändiga konfigurationen.

Vad kostar en chattbot för webbplatser?

Abonnemanget och användningstilldelningen betalar för AI-tjänsten; webbplatsabonnemanget och valfria integrationer är separata kostnader.

En AI-kredit är inte ett samtal. Ett samtal kan innehålla flera AI-svar, och olika modellval kan ha olika kreditkostnader. Räkna in Preview och Simulation i testbudgeten. Använd aktuella priser och tilldelningar och guiden till chattbotkostnader för att uppskatta din volym.

Kan ChatGPT eller Claude hjälpa till att konfigurera chattboten?

Anslutningen för kontohantering i Quickchat AI låter en kompatibel assistent konfigurera de agentinställningar som stöds och förbereda tester utifrån dessa filer och konfigurationer.

Anslut ditt eget konto via Quickchat AI i ChatGPT eller Quickchat AI i Claude enligt guiden Manage with AI. Verktygen som stöds omfattar kunskap, Main Prompt, samtalsförslag, Human Handoff, HTTP Actions, testning och kodsnutten för driftsättning.

Slutför Smart Data Gathering och widgetens detaljerade inställningar för Appearance i kontrollpanelen. Du behöver också auktorisera externa konton och installera kodsnutten i webbplatsens inställningar. Kontoanslutningen används för att hantera din agent; det är separat från att exponera en agent som ett MCP-verktyg.

Use the Kestrel Kitchens website-chatbot kit to prepare a separate learning Agent. Do not change existing Agents. Set its name to Kestrel Kitchens, add knowledge.txt and set main-prompt.txt as Main Prompt. Configure the supported greeting, conversation starters and Human Handoff settings from the kit. Prepare the launch-test dataset with the supplied messages and criteria. Read back the saved configuration and return this Agent's current Widget snippet.
List the remaining dashboard steps for Smart Data Gathering, Appearance and website installation. Do not invent support for those settings. Leave the optional Send quote enquiry Action inactive until I provide my receiver URL and configure its credential. Before running tests or external writes, tell me the expected credit use and effects and obtain any approval required by this client. Do not claim that a website, email or CRM delivery works until it has been tested.

Vanliga frågor

Hur lägger jag till en AI-chattbot på min webbplats?

Skapa en agent i Quickchat AI, lägg till kunskap om ditt företag, konfigurera Main Prompt, Smart Data Gathering och Human Handoff och installera sedan dess Widget med ett tillägg eller den medföljande kodsnutten. Testa ett källbaserat svar, insamlade kontaktuppgifter och ett levererat mänskligt svar på den publicerade webbplatsen.

Kan jag lägga till en anpassad ChatGPT på min webbplats?

Du kan lägga till en assistent av ChatGPT-typ som har tränats på dina egna sidor. Den här guiden driftsätter en Quickchat AI-agent via dess webbplatswidget, så att besökare kan chatta på din webbplats utan att logga in på ChatGPT. Dess kunskap, instruktioner och integrationer hanteras i Quickchat AI.

Kan jag lägga till en AI-chattbot på min webbplats gratis?

Free-planen i Quickchat AI stöder personligt, icke-kommersiellt lärande och omfattar 50 AI-krediter per månad. En företagswebbplats eller kundinriktad försäljnings- och supportlösning behöver en plan som tillåter kommersiell användning. Abonnemang för webbplatsbyggare tillkommer separat, och testning förbrukar också AI-krediter.

Behöver jag programmera eller ange en API-nyckel?

Grundkonfigurationen använder inställningar i kontrollpanelen och ett tillägg, en appinbäddning eller ett medföljande skript. Webbplatsens kodsnutt innehåller ett offentligt Scenario ID, inte en privat API-nyckel. Anslutning av en valfri CRM Action kräver en lämplig endpoint och dess autentisering; behåll autentiseringsuppgiften i Action-inställningarna.

Kan en chattbot på webbplatsen samla in leads och offertförfrågningar?

Ja. Smart Data Gathering frågar efter valda fält under samtalet och sparar dem i Inbox. Email new leads kan meddela agentens administratörer efter att en e-postadress eller ett telefonnummer har samlats in. En API Action kan skicka de obligatoriska sparade fälten till en konfigurerad mottagare; enbart ett insamlat namn innebär inte att förfrågan är fullständig.

Kan en människa ta över chatten?

Ja. Konfigurera Human Handoff med bemannade tider och ett meddelande för övriga tider. Välj Assign to me i Inbox för ett otilldelat samtal, eller Take over när den kontrollen visas, och svara sedan besökaren. Reassign to AI lämnar tillbaka samtalet till agenten.

Fungerar det på WordPress, Shopify, Squarespace, Wix och Webflow?

Alla har en installationsväg. Använd det officiella WordPress-tillägget, Shopifys appinbäddning efter att ha anslutit dess butiksagent eller lämplig kodsnutt i sidfoten/slutet av body för hela webbplatsen för en befintlig agent. Behörigheter för tillägg och abonnemangskrav för egen kod varierar mellan webbplatsbyggare.

Varför visas inte min chattbot på min webbplats?

Kontrollera den publicerade sidan, rätt Scenario ID och kodsnuttens placering i slutet av sidans body. Ta bort gamla dubbla installationer och undvik iframe-baserade block för den flytande widgeten. Om den öppnas men inte kan svara kontrollerar du Widget & Embed access och tillgängliga AI-krediter.

Gör chattboten min webbplats långsammare?

Widgetladdaren hämtas asynkront, men tillför ändå JavaScript och nätverksförfrågningar. Jämför laddnings- och interaktionsprestanda före och efter installation på representativa sidor och på en telefon. Asynkron laddning bevisar inte att prestandan är opåverkad.

Fungerar webbplatsens chattbot på telefoner?

Den öppna widgeten använder en helskärmslayout under 768 CSS-pixlar. Testa chattknappen, tangentbordet, rullning och stängningskontrollen på en telefon. Låt Auto-open Widget vara avstängt när automatisk öppning skulle avbryta surfandet.

Kan chattboten svara på besökarnas språk?

Agenten kan svara på besökarens språk. Översättning av den fasta välkomsttexten, samtalsförslagen och widgetens etiketter är en separat inställning på betalda planer. Testa både svarets fakta och gränssnittstexten för varje språk du vill stödja.