Om een Agentkit-chatbot in te sluiten, open je de pagina Channels → Website embed van je agent, schakel je Chat widget in en kopieer je de volledige gegenereerde code. Plak beide scripttags in een sitebrede footer of paginasjabloon, publiceer, laad daarna de openbare pagina en stuur een testbericht. De gegenereerde code bevat al je agent-ID en de geconfigureerde widget-URL. Vervang die niet door een fragment dat je uit een artikel hebt gekopieerd.
Wil je de chat binnen een paginasectie, schakel dan het kanaal Iframe in en kopieer in plaats daarvan de gegenereerde iframe-code. Het iframe en de zwevende widget zijn aparte kanalen, dus controleer de schakelaar van het kanaal dat je gebruikt.
Kies waar de chat moet verschijnen
| Doel | Gebruik | Waar je het vindt |
|---|---|---|
| Een zwevende chatbubbel op de hele site | Chat widget | Channels → Website embed → Chat widget |
| Een chatpaneel binnen een support- of contactpagina | Iframe | Channels → Website embed → Iframe |
| Een zwevende bubbel in een React- of Next.js-app | Chat widget | Gebruik het gegenereerde script in de layout of het HTML-sjabloon van de app |
| Een sitebrede bubbel in WordPress | Chat widget | Plaats beide gegenereerde tags in een footer-codeveld |
Een React-app heeft voor deze installatie geen apart Agentkit React-pakket nodig. Voor een plaatsingsvoorbeeld in React of Next.js volg je de React-integratiegids. De iframe-gids laat zien hoe je een inline chatpaneel de juiste afmetingen geeft.
Installeer de zwevende widget
- Maak een agent, voeg een bron toe waarvan je de antwoorden kunt controleren en probeer een paar vragen in de Playground. Begin je vanaf nul, maak dan een Agentkit-account aan.
- Open de pagina Channels → Website embed van de agent. Selecteer Chat widget en schakel dat kanaal in.
- Kopieer de volledige code die daar wordt getoond. Die bevat een klein bootstrap-script, gevolgd door het asynchrone widgetscript. Houd beide tags en hun gegenereerde
data-chatbot- ensrc-waarden bij elkaar. - Plak de code in de gedeelde footer of het HTML-sjabloon van de site, vóór de afsluitende
</body>-tag. Voeg hem één keer per pagina toe. Wil je de widget op slechts één pagina, gebruik dan het codegebied van die pagina. - Publiceer de site. Open de openbare URL in een nieuw browservenster, klik op de bubbel en stuur een vraag waarvan je het antwoord kunt vergelijken met een goedgekeurde bron.
De widget-URL hangt af van de hostingconfiguratie van Agentkit. Kopieer daarom de actuele code uit Website embed. De JavaScript-widgetgids bevat de actuele installatiestappen en de Embed SDK-gids legt uit wat de bootstrap doet.
React en Next.js
Voeg het script toe aan het HTML-sjabloon of een gedeelde layout van de app, zodat het laadt op de pagina's waar je de bubbel wilt. Houd één kopie van de widget op elke gerenderde pagina. De React-integratiegids behandelt de plaatsing in de layout voor React en Next.js. Kopieer de actuele URL en het agent-ID uit Channels → Website embed; een pakketinstallatie maakt geen deel uit van deze installatie.
WordPress
Voor een sitebrede installatie plak je beide gegenereerde scripttags in het veld Footer van het scherm Header & Footer van WPCode. Sla op, leeg eventuele sitecache en bekijk daarna een openbare pagina. WordPress kan scripts uit een Custom HTML-blok verwijderen als je account geen rechten heeft om ze te publiceren, dus controleer de gerenderde paginabron als de bubbel ontbreekt. Volg de WordPress-installatiegids voor het exacte menupad en de controles.
Sluit de chat in binnen een pagina
Kies Iframe op dezelfde Website embed-pagina, schakel het kanaal in en kopieer het gegenereerde iframe. Plak het waar de inline chat moet verschijnen. De URL ervan verwijst naar de gehoste iframe-pagina van je agent. Het inline paneel blijft in die paginasectie; het voegt geen zwevende bubbel toe aan de rest van de site. Geef het iframe voldoende hoogte in je layout, gebruik Visit om de gehoste chatpagina te bekijken en test daarna het iframe op je gepubliceerde pagina. Het iframe stelt de window.agentkit-SDK van de bovenliggende pagina niet beschikbaar, dus gebruik de scriptwidget als je die browseropdrachten nodig hebt. Zie de iframe-instructies.
Controleer het resultaat vóór de lancering
Open de gepubliceerde pagina in een nieuw browservenster en noteer vier uitkomsten:
- Verschijnt de bubbel of het inline paneel op de verwachte plek?
- Gaat die open en accepteert die een bericht?
- Komt het antwoord overeen met de bron die je voor de test hebt gebruikt?
- Kan een bezoeker nog steeds je normale contactroute bereiken als de agent geen antwoord kan geven?
Als er niets verschijnt, controleer dan eerst of het kanaal is ingeschakeld en bekijk de gerenderde paginabron op beide gegenereerde widgettags of het iframe. Controleer of de script-URL absoluut is en laadt in het Network-paneel van de browser. Een contenteditor of cache kan de code hebben verwijderd of vertraagd. Als de interface verschijnt maar een bericht mislukt, controleer dan de instellingen van de agent, de toegestane domeinen en de status van de bron. De gids voor domeinbeperkingen legt uit hoe een lijst met toegestane domeinen invloed heeft op insluitingen.
Bewaar de testvraag en het waargenomen antwoord in je lanceringsnotities. Een widget installeren bewijst dat die laadt; het bewijst niet dat elk antwoord juist is. Controleer de betrokken vragen opnieuw na het wijzigen van bronnen of instellingen.
