Een AI-chatbot aan je website toevoegen zonder code

Je kunt een AI-chatbot aan je website toevoegen door een Agent je bedrijfskennis te geven, de antwoorden in te stellen en een chatwidget te installeren met een plugin of een meegeleverd script. De websitechatbot van Quickchat AI houdt kennis, gespreksinstellingen en de Inbox van je team op één plek. Bezoekers stellen vragen op je site zonder een account aan te maken.

In deze handleiding bouwen we Kestrel Kitchens, een fictief bedrijf voor keukenontwerp. Een bezoeker vraagt hoelang een renovatie duurt, informeert naar de waarschijnlijke kosten van een keuken van 3 bij 4 meter en vraagt daarna een offerte aan. De Agent antwoordt vanuit de bedrijfsinformatie, verzamelt de projectgegevens en laat een ontwerper het gesprek voortzetten.

Voor de basisconfiguratie hoef je niet te programmeren. Volg de stappen voor kennis en instructies, leads verzamelen en overdracht aan medewerkers, en installeer daarna de widget. Een optionele API Action verstuurt volledige aanvragen naar een ander systeem.

Download de configuratiekit voor Kestrel Kitchens voor de voorbeeldwebsite, kennis, Main Prompt, instellingen en testberichten. Dit zijn bewerkbare bestanden om in het dashboard te gebruiken, geen Agent-import met één klik. Screenshots en kopieerbare kit-, prompt- en configuratiebestanden blijven Engels, zodat je het geteste voorbeeld kunt reproduceren.

Wat gaat de websitechatbot doen?

De chatbot beantwoordt vragen vanuit je content, slaat de gegevens op voor een gevraagd vervolgcontact en draagt gesprekken over aan je team wanneer een medewerker nodig is.

Voor die resultaten heb je verschillend bewijs nodig. Een juiste prijsklasse komt uit de Knowledge Base. Voor een offerteaanvraag moeten contact- en projectgegevens in de Inbox staan. Bij een overdracht moet een medewerker het gesprek overnemen en een antwoord sturen dat de bezoeker bereikt.

De route van de bezoeker door het voorbeeld. Een offerteaanvraag legt interesse vast; de ontwerper moet de prijs en beschikbaarheid nog bevestigen.

Wat heb je nodig voordat je een chatbot toevoegt?

Je hebt een Quickchat AI-account nodig, bedrijfsinformatie die je kunt controleren en toegang tot de instellingen voor plugins of eigen code van de website.

1. Maak een Quickchat AI-account en voltooi de registratie. Gebruik voor deze oefening een aparte Agent, zodat de voorbeeldgegevens geen invloed hebben op een bestaande klantenservice.
2. Bereid je dienstenpagina’s, FAQ’s en beleidsinformatie voor, of gebruik de fictieve kennis uit de kit. Vervang de fictieve prijzen en het werkgebied voordat je de chatbot voor een echt bedrijf inzet.
3. Controleer of je websiteabonnement de betreffende installatiemethode toestaat. Voor WordPress heb je toegang tot plugins nodig; sommige gehoste websitebouwers vereisen een betaald abonnement voor eigen code op de hele site.
4. Regel dat iemand de test-Inbox in de gaten houdt wanneer je overdracht aan een medewerker probeert. Houd een desktopbrowser en een telefoon bij de hand voor de laatste controles op de website.

Free is bedoeld voor persoonlijk, niet-commercieel leren. Het Free-abonnement bevat 50 AI-credits per maand. Zakelijke inzet vereist een commercieel abonnement, en testen verbruikt hetzelfde antwoordtegoed als andere AI-gesprekken. Abonnementen voor websitebouwers en kosten van externe API’s staan daar los van. Het onderdeel over kosten maakt onderscheid tussen deze kosten.

Stap 1: Hoe train je een chatbot op je website?

Voeg de pagina’s met antwoorden over je bedrijf toe aan de Knowledge Base en controleer de geïmporteerde inhoud voordat je gaat testen. Zo krijgt de Agent referentiemateriaal voor zijn antwoorden.

Maak de Agent voor de oefening

1. Selecteer op het eerste configuratiescherm Set up manually. Gebruik vanuit een bestaand dashboard de + naast AI Agent (Add new AI Agent) om een aparte Agent te maken en selecteer daarna Set up manually.
2. Vul in Identity onder Name your AI Agent Kestrel Kitchens in. Plak main-prompt.txt uit de kit in Describe what you want your agent to do. Dit wordt de Main Prompt van de Agent, die in stap 2 wordt toegelicht. Selecteer Next.
3. Laat Knowledge Base voorlopig leeg en selecteer Next. Ga door External apps zonder een koppeling te kiezen. Selecteer in Deployment eerst Chat widget en daarna Next.
4. Gebruik bij Choose your plan de optie Skip for now om door te gaan met de persoonlijke leeroefening, of kies een geschikt commercieel abonnement voor zakelijk gebruik. Rond een eventueel daaropvolgend optioneel aanbod af of sluit het.
5. Controleer in het dashboard de naam van de Agent in Identity en open daarna Knowledge Base. Kies je eigen pagina’s of het meegeleverde voorbeeldartikel hieronder.

Importeer je eigen pagina’s

1. Selecteer in Knowledge Base de optie Add Website. Kies één pagina of de optie voor website-import, afhankelijk van hoeveel je nodig hebt.
2. Voer de openbare URL in. Controleer bij een website-import de gevonden pagina’s en selecteer de pagina’s over diensten, prijzen, werkwijze en veelgestelde vragen die als basis voor antwoorden moeten dienen.
3. Controleer de geïmporteerde tekst. Kijk of prijzen de juiste valuta en belastingbehandeling bevatten en of oude acties of niet-relevante pagina’s geen bronnen zijn geworden.
4. Wacht tot de verwerking klaar is. Pas eventuele nog openstaande kenniswijzigingen in het dashboard toe of publiceer ze voordat je de geïnstalleerde widget test.

Begin met een paar duidelijke pagina’s. Een site kan een aantrekkelijk prijsblok tonen terwijl de voorwaarden elders staan; de Agent heeft beide nodig. Als je alleen de homepage importeert, kunnen installatievoorwaarden, geografische beperkingen of retourbeleid ontbreken die een antwoord bruikbaar maken.

Gebruik de bron voor Kestrel Kitchens

Voeg de gegevens rechtstreeks toe om het voorbeeld na te maken zonder eerst een website te hosten:

1. Selecteer in Knowledge Base de optie Add Article. Hiermee maak je een artikel met de naam Untitled en open je Edit Article.
2. Vul bij Title Kestrel Kitchens: services, prices and process in. Kies onder Content de optie Plain Text en plak knowledge.txt uit de kit.
3. Selecteer Save en wacht totdat het artikel Ready is. Controleer of de titel in de lijst van de Knowledge Base staat.

Het opgeslagen artikel behoudt de voorwaarden bij prijzen en termijnen. De fictieve gegevens komen overeen met de voorbeeldwebsite.

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.

De bron laat financiering bewust onbesproken. Daarmee kun je goed testen hoe de Agent met werkelijk ontbrekende informatie omgaat. Houd voor een echte site de bronpagina’s actueel en gebruik waar beschikbaar de ondersteunde instellingen voor vernieuwen; de Knowledge Base-handleiding legt uit hoe je die bronnen ordent en test.

Stap 2: Wat moet de chatbot zeggen en nooit beloven?

Gebruik Main Prompt om vast te leggen hoe de Agent de kennis toepast: eerst antwoorden, het antwoord bruikbaar houden en beslissingen zoals een definitieve offerte aan het team overlaten.

Bij Kestrel geven de afmetingen van de ruimte de omvang van het project aan. Ze bepalen niet de keukenkasten, apparatuur of bouwwerkzaamheden. De Agent moet de indicatieve prijsklasse uit de bron van £18,000 tot £45,000 inclusief btw toelichten, zonder een nauwkeurigere prijs uit het vloeroppervlak te berekenen.

Deze prijzen zijn fictieve gegevens voor de handleiding. Het doel is het onderscheid te behouden tussen brongegevens en een beslissing die je team nog moet nemen.

1. Selecteer in Identity de optie Edit op de Main Prompt-kaart.
2. Plak de volledige prompt hieronder. Laat deze opslaan en open de editor opnieuw om de opgeslagen tekst te controleren.
3. Houd bedrijfsgegevens in de Knowledge Base. Gebruik de prompt voor antwoordstijl, het verzamelen van gegevens en beslissingen waarvoor een medewerker nodig is.

Main Prompt is het instructieveld. De volledige tekst hieronder en in de kit is de versie die je kunt kopiëren.

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.

Open AI Preview en vraag How long does a full kitchen renovation take?. In de lokale controletest antwoordde de Agent met 2 tot 3 weken voor opname en ontwerp, gevolgd door 4 tot 8 weken voor installatie nadat de materialen beschikbaar zijn. Zowel de duur als de voorwaarde zijn van belang.

Begin een nieuw gesprek en vraag Do you offer financing?. Het juiste antwoord geeft aan dat de bron geen aanbod bevestigt en verwijst de vraag naar een ontwerper. Stelligere bewoordingen aan de prompt toevoegen levert het ontbrekende bedrijfsgegeven niet op.

Stap 3: Hoe verzamel je offerteaanvragen in de chat?

Smart Data Gathering vraagt tijdens een gesprek om gekozen informatie en slaat op wat de bezoeker aanlevert. Verzamel voor een offerteaanvraag alleen wat de ontwerper nodig heeft om contact op te nemen.

1. Open Actions & MCPs, schakel Smart Data Gathering in en selecteer Edit Action. Stel Name in op Quote enquiries en Description op Capture contact and project details for a kitchen design enquiry. De opgeslagen naam wordt de titel van de kaart.
2. Voeg onder Data to collect de onderstaande rijen toe. Behoud deze Engelse Data point-namen wanneer je het voorbeeld namaakt; de contactnamen hebben speciale koppelingen aan de bezoekersvelden in Inbox.
3. Stel Reason for collecting information in op So a Kestrel Kitchens designer can assess your project and follow up by email.
4. Stel When to ask for data in op After exchanging a few messages en How to ask for data op Subtle.
5. Sla de Action op. Stel in AI Preview een nuttige vraag over de diensten voordat je een offerte aanvraagt en controleer de opgeslagen gegevens in Inbox.

De vragen beschrijven welke informatie je wilt verzamelen. De instellingen voor timing en stijl sturen wanneer de Agent erom vraagt; test ook het daadwerkelijke gesprek.

Naam, e-mail, postcode en projecttype zijn de vereiste gegevens voor een volledige aanvraag in dit voorbeeld. De gewenste termijn is optioneel, zoals de Main Prompt uitlegt. Deze bedrijfseis staat los van de instellingen voor het verzamelen tijdens gesprekken; stap 8 dwingt de verplichte velden af voordat een CRM-verzoek wordt verstuurd.

De Agent moet een algemene kostenvraag beantwoorden zonder een e-mailadres als voorwaarde voor het antwoord te stellen. Een bezoeker kan het verzamelen ook weigeren. Gebruik I am only researching. I do not want to leave contact details. om te controleren of het gesprek nuttig blijft zonder herhaalde verzoeken.

Waar komen verzamelde gegevens terecht?

Open het gesprek in Inbox. Standaardcontactgegevens verschijnen in de bezoekersvelden; de overige verzamelde waarden blijven aan het gesprek gekoppeld en kunnen via Export Gathered Data worden geëxporteerd.

Onder Where to send data laat Email new leads elke beheerder van de Agent weten wanneer voor het eerst een e-mailadres of telefoonnummer is vastgelegd. Alleen een naam leidt niet tot een e-mail. Preview en Simulation versturen deze meldingen niet, dus controleer je eigen beheerdersmailbox met een gecontroleerde test op de geïnstalleerde widget voordat je op e-mailbezorging vertrouwt. In de lokale handleiding blijft externe e-mailbezorging uitgeschakeld.

De documentatie van Smart Data Gathering beschrijft het verzamelen, meldingen en exports. Leg op je eigen site uit waarom je de informatie vraagt en plaats een link naar je privacyverklaring in de widget. De handleiding voor gegevensbescherming bij chatbots helpt je de bredere gegevensstroom te beoordelen.

Stap 4: Hoe laat je een medewerker de chat overnemen?

Human Handoff draagt een gesprek over aan je team; een medewerker neemt het daarna over in Inbox en antwoordt aan dezelfde bezoeker.

Bereid de overdracht voor voordat je de widget publiceert. Iemand die om een ontwerper vraagt, moet niet eerst de offerteaanvraag hoeven af te ronden, en de Agent mag niet suggereren dat er buiten bemande uren iemand online is.

1. Schakel in Actions & MCPs de optie Human Handoff in en open Edit Action.
2. Laat de standaardregels Media Message, User Frustration, Customer Support Suggestion en Lack Of Knowledge aan staan; laat Irrelevant Advice uit. De Main Prompt legt al uit wanneer de Agent een ontwerper moet aanbieden. Het geteste voorbeeld gebruikt deze standaardregels zonder eigen regels toe te voegen.
3. Configureer de berichten en beschikbaarheid hieronder en sla op. Laat Email notifications uit voor de leeroefening en controleer de overdracht rechtstreeks in Inbox.

Gebruik uren waarop een medewerker Inbox daadwerkelijk in de gaten houdt. Het fictieve rooster is geen belofte van een onmiddellijk antwoord.

Vraag tijdens bemande uren vanaf de website Can I speak to a designer?. Geef een eventuele overdrachtsbevestiging waar de Agent om vraagt. Open in Inbox het gesprek en selecteer Assign to me als het nog niet is toegewezen, of Take over wanneer die knop verschijnt. Stuur als medewerker een antwoord en controleer of de bezoeker het ontvangt. Gebruik Reassign to AI wanneer de AI weer moet antwoorden.

Controleer het eigenaarschap en het bezorgde antwoord van de medewerker, niet alleen het aanbod van de Agent om over te dragen.

Herhaal dit in een nieuw gesprek buiten de ingestelde uren. De Agent moet de beschikbaarheid uitleggen en de vermelde vervolgroute aanbieden. Als je het rooster tijdelijk wijzigt voor deze controle, herstel dan daarna het echte rooster. De documentatie van Human Handoff legt de instellingen en de werkwijze in Inbox uit.

De handleiding voor het overdragen van chatbotgesprekken aan een medewerker bevat afzonderlijke controles voor wie verantwoordelijk is voor het gesprek, het teruggeven van het gesprek aan AI en fouten buiten werktijd.

Stap 5: Hoe laat je de widget bij je website passen?

Stel de vormgeving en vaste teksten in onder Channels → Your Website. Maak de begroeting specifiek genoeg om uit te leggen wat de bezoeker kan vragen.

Vormgeving

1. Open Appearance. Kies voor Kestrel een Custom-thema met een witte achtergrond, een donkergroene kop en accentkleur (#315448) en witte tekst in de kop. Behoud de standaardtekstgrootte en afgeronde bedieningselementen.
2. Klik onder Branding → AI Agent Avatar op het uploadpictogram van de avatar, kies website/kestrel-avatar.png uit de kit en selecteer Upload in het bijsnijdvenster.
3. Stel Widget window max width in op 400px en Widget window max height op 520px. Kies Small voor de grootte van de chatknop, plaats deze rechts en gebruik Ask about your kitchen als label. Het label is beschikbaar bij de kleine chatknop. Controleer in de preview de positie ten opzichte van een eventuele cookiebanner of andere zwevende bedieningselementen op je site.
4. Laat Auto-open Widget uit. De widget bij elke paginalaadbeurt openen onderbreekt het browsen, vooral op een telefoon.

Controleer de preview terwijl je kleuren kiest. De test op de echte website blijft nodig omdat de chatknop ruimte deelt met de bedieningselementen van je site.

Tekstinhoud

Open Text Content en gebruik deze waarden:

Gespreksstarters moeten nuttige taken starten. De disclaimer vertelt bezoekers voor welke beslissingen nog een ontwerper nodig is.

De Agent kan antwoorden in de taal van de bezoeker. Het vertalen van de vaste begroeting en widgetlabels is een aparte instelling onder Other languages, beschikbaar bij betaalde abonnementen. Test voor een meertalige site zowel het antwoord als de vaste interfacetekst; de handleiding voor meertalige chatbots legt dat onderscheid uit.

Het kan een paar minuten duren voordat wijzigingen in de vormgeving bezoekerssessies met gecachte instellingen bereiken. Laad opnieuw voordat je concludeert dat een opgeslagen wijziging niet is gelukt. Hide Quickchat AI Branding vereist Professional of hoger; de handleiding voor white-label-instellingen behandelt de overige onderdelen die je moet controleren.

Stap 6: Hoe installeer je de chatbot op je website?

Installeer de Widget in de gedeelde lay-out van de site of gebruik de ondersteunde platformintegratie. De zwevende Widget moet draaien in de pagina die de bezoeker bekijkt.

1. Open Channels → Your Website → Install.
2. Schakel Widget & Embed access in voor de openbare widget.
3. Kies de installatiemethode voor je website en kopieer de snippet of Scenario ID die voor deze Agent wordt getoond.
4. Publiceer de wijziging, open de openbare site en stel een vraag waarvan je weet dat het antwoord in de Knowledge Base staat.

Kopieer vanuit het Install-scherm van deze Agent. De Scenario ID is een openbare widgetidentifier, geen geheime API-sleutel.

Elke website: plak de Widget-snippet vóór de afsluitende body-tag

Kies Install manually with code en kopieer de Widget-snippet. De huidige loader heeft deze vorm:

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

Vervang YOUR_SCENARIO_ID door de waarde uit Install. Plak de volledige snippet één keer, direct vóór </body> in de gedeelde lay-out, of gebruik het footerveld van de websitebouwer dat voor de hele site geldt. Deze loader voegt een script in de body van de pagina in; plaatsing in de head voordat de body bestaat kan daardoor voorkomen dat hij laadt.

De locatie is van belang. Een HTML-blok op basis van een iframe is een aparte pagina en is ongeschikt voor deze zwevende Widget.

De aparte optie Embed plaatst een chat in een container binnen een pagina. Gebruik de gegenereerde snippet als je een chatsectie in de pagina wilt. Een HTML-blok dat code rechtstreeks in de pagina invoegt kan dat ondersteunen; een blok van een websitebouwer dat code in een iframe isoleert is een ander geval. Zie de documentatie van het Website-kanaal.

WordPress: installeer de officiële plugin

1. Open in WordPress Plugins → Add New, zoek naar Quickchat AI Agent en kies Install Now en Activate.
2. Open Settings → Quickchat AI Agent.
3. Plak de Scenario ID uit het Install-scherm van Quickchat AI en selecteer Save Changes.
4. Open een openbare pagina en controleer de widget. Gebruik óf de plugin óf een handmatige snippet, zodat je de loader niet twee keer installeert.

Je hebt een WordPress-installatie en abonnement nodig die plugins toestaan. De handleiding voor een WordPress-chatbot toont de plugininterface en controles die specifiek voor WordPress gelden.

Squarespace: gebruik code-injectie in de footer

1. Open het paneel Code Injection van de site. Gebruik de zoekfunctie voor instellingen in het dashboard als de navigatie in je account anders is.
2. Plak de volledige Widget-snippet in Footer en sla op.
3. Open de gepubliceerde pagina in een apart browsertabblad en test een antwoord.

Squarespace biedt Code Injection bij Core, Plus, Advanced en sommige oudere abonnementen. Footer-injectie plaatst de code op de hele site vóór </body>. Gebruik die plek voor de zwevende widget; een iframe-blok op paginaniveau is niet gelijkwaardig. Deze eigen code geldt niet voor de afrekenpagina’s van Squarespace.

Wix: gebruik Custom Code op de positie Body - end

1. Open in het dashboard van de site Settings → Custom Code en daarna + Add Custom Code.
2. Plak de Widget-snippet en geef deze de naam Quickchat AI widget.
3. Pas deze toe op All pages, kies Body - end en daarna Apply.
4. Test de gepubliceerde site, ook bij het navigeren naar een andere pagina.

Wix vereist voor eigen code een gepubliceerde site met een gekoppeld domein. Gebruik voor deze zwevende widget de instelling Custom Code die voor de hele site geldt.

Webflow: gebruik footercode en publiceer

1. Open Site settings → Custom code.
2. Plak de Widget-snippet in Footer code en kies Save changes.
3. Gebruik Publish voor het bedoelde domein en test daarna die gepubliceerde URL.

De instellingen voor eigen code van Webflow vereisen een geschikt betaald Workspace-abonnement of een actief Site-abonnement. Alleen de instelling opslaan publiceert deze nog niet.

Shopify: kies de snippet van de bestaande Agent of de Shopify-app

Voeg voor de Kestrel-Agent die je al hebt gebouwd de Widget-snippet direct vóór </body> toe in Online Store → Themes → Edit code → layout/theme.liquid, sla op en controleer de winkel. Maak vóór het bewerken een back-up van het thema en controleer de installatie opnieuw na een themawijziging. Deze route toont de Agent die je hebt geselecteerd; ze configureert geen Actions voor producten of bestellingen.

Voor een Agent die op een webwinkel is gericht, koppelt de configuratie van de Quickchat AI Shopify-app de winkel via een eigen onboarding. Gebruik na die koppeling Enable Widget in Shopify Theme Editor, of open Online Store → Themes → Edit theme → App embeds. Schakel Quickchat AI Widget in en sla op. De documentatie van Shopify over app-embeds legt de themabediening uit; schakel de app-embed opnieuw in wanneer je het gepubliceerde thema wisselt.

De bovenstaande routes voor websitebouwers zijn gecontroleerd aan de hand van officiële documentatie. De screenshots van het uitgewerkte voorbeeld tonen de Kestrel-voorbeeldwebsite en de echte lokale widget; het zijn geen screenshots van ingelogde accounts bij elke websitebouwer.

Controleer de snippet voordat je problemen met de Agent onderzoekt

Deze optionele controles werken met de waarden die je opgeeft:

• Controleer een Widget-snippet. Controleer geplakte code aan de hand van de opgegeven Scenario ID. Dit haalt je website niet op.
• Vergelijk implementatiemethoden. Controleer je opgegeven kanalen, websitetoegang en vereiste functies aan de hand van de configuratieopties van Quickchat AI. Dit inspecteert je website of account niet.

In een geschikte browser zijn deze controles ook beschikbaar als sitetools. De links openen de standaardformulieren.

Stap 7: Hoe test je de chatbot voordat bezoekers dat doen?

Test het antwoord, de opgeslagen gegevens en het bezorgde antwoord afzonderlijk. AI Preview en Simulation Testing helpen het gedrag te beoordelen; de gepubliceerde website bewijst dat de bezoeker de geïnstalleerde widget kan gebruiken.

Voer onafhankelijke vragen uit in Simulation Testing

Open Testing → Create Dataset, geef deze de naam Kestrel Kitchens: website launch checks en kies Paste messages. Voeg de onderstaande vragen over duur, prijs en financiering toe, met tussen de vragen een regel die --- bevat. Met alleen een regeleinde blijft de tekst één testbericht. Stel Evaluation criteria in om de feiten en beknoptheid van de antwoorden te controleren en selecteer Run → Start Run. De kit bevat de exacte berichten en criteria.

Elke rij in de dataset begint een apart gesprek. Gebruik Simulation voor die onafhankelijke vragen; voer de controles voor een offerteaanvraag en menselijke overname met meerdere berichten uit in één gesprek in AI Preview of op de website. Controleer het Action-log en de ontvanger afzonderlijk, want een beoordelaar van gesprekstekst kan externe bezorging niet verifiëren.

Open een voltooide run en controleer de antwoorden. Dit prijsantwoord behoudt de indicatieve prijsklasse; de antwoordscore bewijst geen bezorging aan een ander systeem.

Gebruik tussen onafhankelijke tests een nieuw gesprek. De pagina opnieuw laden kan een bestaand gesprek hervatten, dus gebruik de knop voor een nieuwe chat in de widget wanneer je een schone test nodig hebt.

Controleer de website op een telefoon

Op schermen smaller dan 768 CSS-pixels gebruikt de geopende widget een schermvullende lay-out. Controleer of je deze kunt openen, kunt typen met het toetsenbord in beeld, door het gesprek kunt scrollen en de widget kunt sluiten om terug te keren naar de site.

Sluit af met een echt persoon die vanuit Inbox antwoordt. Een goed AI-antwoord bewijst niet dat de route naar menselijke ondersteuning werkt. Herhaal een kleine selectie van deze controles na wijzigingen in bronnen, prompts, Actions of het sitethema.

Stap 8: Hoe verstuur je een volledige aanvraag naar je CRM?

Een optionele API Action kan de opgeslagen velden naar een HTTP-ontvanger sturen zodra het gesprek alle vereiste informatie bevat. De basisversie van de websitechatbot is al bruikbaar zonder deze uitbreiding.

Het belangrijke onderscheid is dat tussen een contactgegeven is vastgelegd en deze aanvraag is volledig. Quickchat AI stelt lead_captured in wanneer het een standaardcontactveld voor het eerst vastlegt, waaronder een naam. Die vlag alleen bewijst niet dat een e-mail, postcode of projecttype aanwezig is.

Het platform controleert elke voorwaarde. Het model verzamelt de informatie; de voorwaarden bepalen wanneer het verzoek mag worden uitgevoerd.

Bereid de ontvanger voor

Gebruik een CRM- of automatiseringseindpunt dat je beheert en dat de onderstaande JSON-body accepteert. De kit bevat een kleine lokale demonstratieontvanger voor lezers die het verzoek willen bekijken voordat ze een CRM koppelen. De configuratie-instructies maken een geheim token en leggen uit hoe je een tijdelijk HTTPS-eindpunt beschikbaar maakt. Stuur alleen fictieve testgegevens naar de demonstratieontvanger.

Volg voor een beheerde integratie in plaats daarvan de handleiding voor rapportage in Google Sheets of de handleiding voor een eigen CRM. Schakel niet twee workflows in die allebei dezelfde lead aanmaken.

Configureer één automatische API Action

1. Open Actions & MCPs → Custom Actions → Add Action → API Action. Kies Create manually als de bouwer op basis van een beschrijving opent.
2. Stel API Action Name in op Send quote enquiry.
3. Laat What to ask the user first leeg. Deze Action leest de velden die Smart Data Gathering al heeft opgeslagen; ze vraagt het model niet om een tweede set parameters in te vullen.
4. Selecteer onder API Endpoint de optie POST en voer de HTTPS-URL /enquiries van je ontvanger in.
5. Voeg de onderstaande headers, body en voorwaarden toe, sla op en activeer de Action.

Voer het token alleen in bij de headerinstelling van de Action. Houd het buiten de prompt, websitesnippet en het gesprek met de bezoeker. De README van de demonstratieontvanger legt uit hoe je het genereert; gebruik voor een echte integratie de gedocumenteerde authenticatie van je CRM.

Selecteer in het tabblad Body de optie JSON en voer in:

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

Gebruik Add AI Data om de bijbehorende ingebouwde waarden en metadatawaarden in te voegen. conversation_id identificeert het gesprek. De andere waarden komen uit de opgeslagen velden; de Engelse contactnamen worden gekoppeld aan visitor_name en visitor_email, terwijl Project type wordt omgezet in project_type. De documentatie over variabelen legt deze koppelingen uit.

Kies onder When to run de optie When metadata matches. Voeg in Run when alle vijf rijen toe; de metadatavoorwaarden worden gecombineerd met AND:

Bij deze tekstvelden wijst is true zowel lege waarden als tekst die als onwaar wordt geïnterpreteerd af. exists controleert alleen of een sleutel aanwezig is; een opgeslagen lege tekenreeks kan aan die voorwaarde voldoen. De onderstaande tests laten zien waarom de strengere voorwaarde nodig is. Dit controleert of er bruikbare tekst is aangeleverd, niet of de identiteit van de bezoeker of de gegevens van het pand onafhankelijk zijn geverifieerd.

Gebruik deze 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 eerste twee van vijf opgeslagen voorwaarden. Voeg elke rij uit de tabel toe; When metadata matches controleert ze na een AI-beurt zonder dat de Agent de Action kiest.

De Action wordt één keer per gesprek geprobeerd wanneer aan alle voorwaarden is voldaan. Ze wordt niet opnieuw uitgevoerd wanneer de bezoeker later de optionele gewenste startperiode doorgeeft, en een mislukt verzonden verzoek wordt in dat gesprek niet automatisch opnieuw geprobeerd. Houd de termijn in Inbox voor de ontwerper, of bouw een expliciete integratie voor aanmaken en bijwerken als je CRM latere wijzigingen nodig heeft.

Het verzoek wordt na de AI-beurt uitgevoerd en het antwoord erop wordt niet in de chat geplaatst. Daarom bevestigt de Main Prompt de gegevens van de bezoeker zonder te beweren dat een CRM ze heeft geaccepteerd. Controleer de bezorging in het Action-log en bij de ontvanger. De documentatie over automatische Actions beschrijft dit uitvoeringsgedrag.

Test eerst gedeeltelijke gegevens en daarna de volledige aanvraag

De eerste versie gebruikte exists voor de verplichte tekstvelden. Sam gaf een naam op en daarna een e-mail in het volgende bericht. Smart Data Gathering had al lege waarden voor postcode en projecttype aangemaakt, dus die sleutels bestonden en de Action verstuurde een onvolledig verzoek. Daarmee was ook de enige poging voor het gesprek verbruikt.

De correctie bestond uit het wijzigen van de vier voorwaarden voor tekstvelden naar is true, terwijl de rest van de configuratie hetzelfde bleef. Herhaal de test in een nieuw gesprek en geef in de tweede beurt alleen een e-mail op. De Action moet wachten op de resterende projectgegevens.

Dit is één waargenomen gesprek, geen slagingspercentage voor productie. Reproduceer het met een nieuw gesprek, controleer de opgeslagen velden na elke beurt en controleer het verzoek bij je eigen eindpunt.

De daadwerkelijke Action-aanroep gaf HTTP 201 terug. Open de details om het verzoek te bekijken; het opgeslagen record hieronder laat zien wat de ontvanger heeft opgeslagen.

Eén daadwerkelijk opgeslagen record van de geauthenticeerde demo-ontvanger. Dit is een aanvraag, geen bevestigde offerte of boeking.

De demonstratie gebruikte een lokale ontvanger en legde daadwerkelijke HTTP-bezorging vast. Een gehoste Quickchat AI Agent heeft een openbaar bereikbaar HTTPS-eindpunt nodig; een localhost-URL op je computer is niet bereikbaar vanuit de dienst.

Als er niets binnenkomt, controleer dan View logs op de Action en de opgeslagen metadata van het gesprek. Ontbrekende waarden, een uitgeschakelde Action en een HTTP-fout vereisen verschillende oplossingen. Corrigeer de configuratie en gebruik een nieuw gesprek om de automatische trigger opnieuw te testen; dezelfde chat vragen om opnieuw te proberen zet een eenmalige poging per gesprek niet terug.

Waarom ontbreekt de chatbot of toont hij oude instellingen?

Controleer de gepubliceerde pagina, de installatielocatie en de toegang tot de Agent voordat je de prompt wijzigt. Een laadprobleem in de browser staat los van een probleem met de antwoordkwaliteit.

Als de browser een geblokkeerde bron meldt, controleer dan de exacte Content Security Policy-fout of blokkeerfout. Schakel de beveiligingen van je site niet volledig uit. Test de openbare pagina via HTTPS en gebruik de kanaaldocumentatie voor de vereiste configuratie.

Wat kost een websitechatbot?

Het abonnement en gebruikstegoed betalen de AI-dienst; je websiteabonnement en optionele integraties zijn aparte kosten.

Een AI-credit is geen gesprek. Een gesprek kan meerdere AI-antwoorden bevatten, en verschillende modelkeuzes kunnen verschillende aantallen credits kosten. Neem Preview en Simulation mee in het testbudget. Gebruik de actuele prijzen en tegoeden en de handleiding voor chatbotkosten om je volume te schatten.

Kunnen ChatGPT of Claude helpen de chatbot in te stellen?

Met de koppeling voor accountbeheer van Quickchat AI kan een geschikte assistent ondersteunde Agent-instellingen configureren en tests voorbereiden vanuit deze bestanden.

Koppel je eigen account via Quickchat AI in ChatGPT of Quickchat AI in Claude en volg daarbij de handleiding Manage with AI. De ondersteunde tools omvatten kennis, Main Prompt, gespreksstarters, Human Handoff, HTTP Actions, testen en de installatiesnippet.

Voltooi Smart Data Gathering en de gedetailleerde widgetinstellingen voor Appearance in het dashboard. Je moet ook externe accounts autoriseren en de snippet in de instellingen van je website installeren. De accountkoppeling dient om je Agent te beheren; dat staat los van een Agent als MCP-tool beschikbaar maken.

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.

Veelgestelde vragen

Hoe voeg ik een AI-chatbot toe aan mijn website?

Maak een Agent in Quickchat AI, voeg je bedrijfskennis toe, configureer Main Prompt, Smart Data Gathering en Human Handoff en installeer daarna de Widget met een plugin of de meegeleverde snippet. Test op de gepubliceerde site een antwoord vanuit de bron, vastgelegde contactgegevens en de ontvangst van een antwoord van een medewerker.

Kan ik een eigen ChatGPT aan mijn website toevoegen?

Je kunt een assistent in de stijl van ChatGPT toevoegen die op je eigen pagina’s is getraind. Deze handleiding plaatst een Quickchat AI Agent via de websitewidget op je site, zodat bezoekers er kunnen chatten zonder in te loggen op ChatGPT. Kennis, instructies en integraties beheer je in Quickchat AI.

Kan ik gratis een AI-chatbot aan mijn website toevoegen?

Het Free-abonnement van Quickchat AI is bedoeld voor persoonlijk, niet-commercieel leren en bevat 50 AI-credits per maand. Voor een bedrijfswebsite of inzet voor verkoop en ondersteuning aan klanten heb je een abonnement nodig dat commercieel gebruik toestaat. Abonnementen voor websitebouwers staan daar los van, en ook testen verbruikt AI-credits.

Moet ik programmeren of een API-sleutel opgeven?

De basisconfiguratie gebruikt dashboardinstellingen en een plugin, app-embed of meegeleverd script. De websitesnippet bevat een openbare Scenario ID, geen geheime API-sleutel. Voor het koppelen van een optionele CRM Action zijn een geschikt eindpunt en de bijbehorende authenticatie nodig; bewaar die inloggegevens in de Action-instellingen.

Kan een websitechatbot leads en offerteaanvragen verzamelen?

Ja. Smart Data Gathering vraagt tijdens het gesprek om gekozen velden en slaat ze op in Inbox. Email new leads kan beheerders van de Agent een melding sturen nadat een e-mailadres of telefoonnummer is vastgelegd. Een API Action kan de vereiste opgeslagen velden naar een ingestelde ontvanger sturen; alleen een vastgelegde naam maakt een aanvraag nog niet volledig.

Kan een medewerker de chat overnemen?

Ja. Configureer Human Handoff met bemande uren en een bericht voor buiten werktijd. Selecteer in Inbox Assign to me voor een niet-toegewezen gesprek, of Take over wanneer die knop verschijnt, en antwoord daarna aan de bezoeker. Reassign to AI geeft het gesprek terug aan de Agent.

Werkt dit op WordPress, Shopify, Squarespace, Wix en Webflow?

Elk platform heeft een installatieroute. Gebruik de officiële WordPress-plugin, de Shopify-app-embed na het koppelen van de winkel-Agent, of de passende snippet voor de footer of het einde van de body op de hele site voor een bestaande Agent. Pluginrechten en abonnementsvereisten voor eigen code verschillen per websitebouwer.

Waarom verschijnt mijn chatbot niet op mijn website?

Controleer de gepubliceerde pagina, de juiste Scenario ID en de plaatsing van de snippet aan het einde van de body van de pagina. Verwijder verouderde dubbele installaties en vermijd blokken op basis van een iframe voor de zwevende Widget. Als deze wel opent maar niet kan antwoorden, controleer dan Widget & Embed access en de beschikbare AI-credits.

Vertraagt de chatbot mijn website?

De widgetloader downloadt asynchroon, maar voegt wel JavaScript en netwerkverzoeken toe. Vergelijk de prestaties bij laden en interactie vóór en na installatie op representatieve pagina’s en op een telefoon. Asynchroon laden bewijst niet dat er geen invloed op de prestaties is.

Werkt de websitechatbot op telefoons?

De geopende widget gebruikt onder 768 CSS-pixels een schermvullende lay-out. Test de chatknop, het toetsenbord, scrollen en de sluitknop op een telefoon. Laat Auto-open Widget uit wanneer automatisch openen het browsen zou onderbreken.

Kan de chatbot antwoorden in de talen van mijn bezoekers?

De Agent kan antwoorden in de taal van de bezoeker. Het vertalen van de vaste begroeting, gespreksstarters en widgetlabels is een aparte instelling bij betaalde abonnementen. Test zowel de feiten in het antwoord als de interfacetekst voor elke taal die je wilt ondersteunen.