Om een Agentkit-chatbot aan Webflow toe te voegen, kopieer je beide gegenereerde scripttags uit Channels → Website embed → Chat widget. Plaats ze in het sitebrede veld Footer code van Webflow of in het veld Before </body> van één pagina en publiceer daarna. Controleer de gepubliceerde pagina en stel een vraag waarvan je het antwoord al kent.
De huidige code van Agentkit bevat een kleine queue-bootstrap gevolgd door de widget-loader, met je chatbot-ID en de huidige script-URL. Kopieer hem als één geheel vanuit je eigen dashboard.
Controleer je toegang voordat je begint
De regels voor custom code van Webflow vereisen een Core-, Growth-, Agency- of Freelancer-Workspace, of een actief Site-plan. Een Site manager of Designer moet de code toevoegen. Als je geen custom code kunt toevoegen, controleer dan het plan en je rol voordat je de chatbot wijzigt. Webflow garandeert niet dat custom code van derden werkt en biedt er geen directe probleemoplossing voor.
Je hebt ook een Agentkit-chatbot nodig waarvoor Chat widget is ingeschakeld. Maak er een aan, voeg een actuele websitebron of goedgekeurde Q&A-antwoorden toe en test een paar vragen in de playground. Controleer de antwoorden voordat je bezoekers uitnodigt.
Als je een Webflow-URL als websitebron toevoegt, controleer dan wat Agentkit daadwerkelijk heeft geïndexeerd. Een crawl of sitemap kan meerdere pagina's ontdekken, maar uitgesloten paden, ontoegankelijke inhoud en extractiefouten kunnen hiaten achterlaten. De handleiding voor websitebronnen legt uit hoe je de crawl inspecteert en inperkt. Voeg een exacte Q&A-bron toe voor een beleidsantwoord dat een doordachte formulering nodig heeft.
Plaats de code op één plek in Webflow
Voor een widget op elke pagina:
- Open de pagina Channels → Website embed → Chat widget van je chatbot in Agentkit. Schakel het kanaal in en kopieer het volledige gegenereerde codeblok, inclusief beide scripttags.
- Open in Webflow Site settings → Custom code. Plak de code in Footer code, die Webflow invoegt vóór de sluitende
</body>-tag. - Sla de wijzigingen op en publiceer naar het domein dat je wilt testen. Alleen het veld opslaan werkt de bezoekerssite niet bij.
Voor een widget op één pagina laat je Site settings leeg. Open in de Webflow Designer de Page settings → Custom code → Before </body> tag van de pagina, plak beide tags, sla op en publiceer. Herhaal dit alleen op pagina's die de widget nodig hebben. Webflow voegt paginacode in na sitecode, dus houd het fragment op één plek om wijzigingen en probleemoplossing eenvoudiger te maken.
De Webflow-installatiehandleiding bevat een kortere versie van deze stappen.
Controleer de gepubliceerde pagina
Open het gepubliceerde *.webflow.io-domein of je eigen domein in een nieuw tabblad. Volgens Webflow kan custom code in de Designer-preview worden uitgevoerd, maar bezoekers ontvangen een opgeslagen wijziging pas nadat je publiceert. Test het daadwerkelijke domein dat bezoekers gebruiken.
Gebruik deze acceptatiecontrole voordat je verkeer uitnodigt:
| Controle | Verwacht resultaat |
|---|---|
| Paginabron | De queue-bootstrap-tag en de widget-loader-tag uit de gegenereerde code, op één plek geïnstalleerd |
| Widget | De launcher opent op de gepubliceerde desktop- en mobiele pagina's waar je hem hebt geplaatst |
| Bekend antwoord | Een vraag over goedgekeurde inhoud geeft het bedoelde antwoord |
| Domein | De staging- en eigen domeinen die je test zijn toegestaan als je domeinbeperkingen hebt ingeschakeld |
Een dienstverlenende site kan bijvoorbeeld de vraag "Bieden jullie afspraken op zaterdag aan?" testen tegen een goedgekeurde pagina met openingstijden. Als het antwoord ontbreekt of onjuist is, corrigeer dan de bron of voeg een exact Q&A-antwoord toe en herhaal de test. De aanwezigheid van een chatballon bewijst alleen dat de widget is weergegeven.
Als de launcher ontbreekt, controleer dan de bron van de gepubliceerde pagina op beide tags, bevestig dat Chat widget is ingeschakeld en controleer de mislukte netwerkverzoeken in de browser. Als je geen custom code kunt toevoegen, ga dan terug naar de plan- en rolvereisten van Webflow. Als je het fragment zowel in Site settings als in Page settings hebt geplakt, verwijder dan één kopie en publiceer opnieuw. Als de launcher opent maar het antwoord mislukt, controleer dan de bronnen en toegestane domeinen van de chatbot voordat je de Webflow-code wijzigt.
Bekijk na een geslaagde installatie de eerste echte vragen en corrigeer hiaten in de bronnen. Controleer opnieuw wanneer je een Webflow-pagina wijzigt of wisselt tussen staging en je eigen domein. Voor een paneel binnen de pagina-inhoud in plaats van een zwevende launcher gebruik je het aparte iframe-kanaal van Agentkit.
