Het toevoegen van een ChatLab-chatbot aan je Webflow-website zorgt ervoor dat bezoekers direct op je site kunnen communiceren met je AI-assistent. Deze handleiding doorloopt de stappen om je embedcode op te halen uit ChatLab en deze in Webflow te plakken.
Stap 1 - Kopieer de embedcode uit ChatLab
- Log in op ChatLab en selecteer de chatbot die je wilt insluiten
- Klik op het tabblad Deploy (Publiceren) en selecteer vervolgens Webflow in het platformpaneel aan de rechterkant
- Kies tussen Widget (chat-pop-up die wordt geopend via een chaticoontje) of Iframe (altijd zichtbare chat ingesloten op de pagina). Zie Wat is het verschil tussen een widget en een iframe? voor een vergelijking
- Klik op Copy to clipboard (Kopiëren naar klembord)
Stap 2 - Voeg de code toe aan Webflow
Door de code toe te voegen via Site Settings (Site-instellingen) wordt de chatbot op elke pagina van je Webflow-site geplaatst.
- Open je project in het Webflow Dashboard
- Ga naar Site Settings > Custom Code (Aangepaste code)
- Plak de gekopieerde code in het veld Head Code (Head-code)
- Klik op Save Changes (Wijzigingen opslaan)
- Klik op Publish (Publiceren) van je site om de wijzigingen door te voeren
Alleen aan één pagina toevoegen
Als je de chatbot op een specifieke pagina wilt plaatsen in plaats van op de hele site:
- Open de pagina in de Webflow Designer
- Klik op het tandwielicoon om Page Settings (Pagina-instellingen) te openen
- Scrol omlaag naar het gedeelte Custom Code
- Plak de code in het veld Head Code
- Sla je site op en publiceer deze
De installatie controleren
Open na het publiceren je Webflow-site in een browser. Je zou het chaticoontje in de hoek van de pagina moeten zien verschijnen (bij de widget-modus) of het chatvenster ingebed op de pagina (bij de iframe-modus). Klik op het icoontje om de chat te openen en stuur een testbericht om te controleren of alles werkt.