Het toevoegen van een ChatLab-chatbot aan je Webflow-website zorgt ervoor dat bezoekers direct op je site met je AI-assistent kunnen communiceren. Deze handleiding legt stap voor stap uit hoe je de embedcode uit ChatLab haalt en in Webflow plakt.
Voordat je begint
Voordat je begint, maak je chatbot aan en controleer je of je Webflow-site of -workspace toegang biedt tot custom code. Bekijk hiervoor de vereisten voor custom code van Webflow. Je hebt ook toestemming nodig om de website te bewerken en te publiceren.
Stap 1 - Kopieer de embedcode uit ChatLab
- Log in op ChatLab en selecteer de chatbot die je wilt insluiten
- Klik op het tabblad Deploy (Implementeren) en kies vervolgens Webflow in het platformoverzicht aan de rechterkant
- Kies Widget voor de onderstaande headerinstallatie. Kies voor een altijd zichtbare chat Iframe en volg de onderstaande instructies voor iframes. Bekijk Wat is het verschil tussen widget en 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 in 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
- Plak de gekopieerde code in het veld 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 liever op een specifieke pagina wilt dan 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 op en publiceer je site
Een altijd zichtbare iframe toevoegen
Plaats in de Webflow Designer een Code Embed-element op de plek waar je de chatbot wilt hebben, plak het Iframe-fragment uit ChatLab en stel de breedte en hoogte in voor je lay-out. Sla op en publiceer de site. De iframe hoort thuis in de paginacontent, niet in Head Code.
De installatie controleren
Open na het publiceren je Webflow-site in een browser. Je zou het chaticoon in de hoek van de pagina moeten zien verschijnen (bij de widget-modus) of het chatvenster ingesloten op de pagina (bij de iframe-modus). Klik op het icoon om de chat te openen en verstuur een testbericht om te controleren of alles werkt.