WebChatAgent Logo

Een AI Chatbot toevoegen aan Webflow

Webflow

Voeg binnen enkele minuten een AI-chatbot toe aan je Webflow-site met de Custom Code-functie van Webflow. Je plakt een kort fragment eenmalig, publiceert, en het chatbubbeltje verschijnt op je live site. Gebruik de sitebrede methode voor elke pagina, of gebruik de methode per pagina als je hem maar op één pagina wilt tonen.

Methode 1: Sitebreed (Alle pagina's)

  1. Open Site Settings : Klik in de Webflow Designer op het tandwielpictogram of ga naar Site Settings > Custom Code.
  2. Plak in Footer Code : Plak het volgende in het onderdeel Footer Code:
<script src="https://webchatagent.com/widget/web-chat-agent.js" async></script>
<web-chat-agent chatbot-id="YOUR_ID"></web-chat-agent>
  1. Vervang YOUR_ID door je daadwerkelijke Chatbot-ID uit het WebChatAgent-dashboard.
  2. Opslaan en publiceren : Klik op Opslaan en publiceer (Publish) je site. De Chatwidget verschijnt op elke pagina.

Methode 2: Alleen op een enkele pagina

  1. Selecteer in de Webflow Designer de pagina waar je de chatbot wilt plaatsen.
  2. Open Page Settings (tandwielpictogram naast de paginanaam).
  3. Scrol omlaag naar Custom Code > Before </body> tag.
  4. Plak hetzelfde codefragment van hierboven.
  5. Opslaan en publiceren.

Methode 3: Embed-element

Voor meer controle over de plaatsing:

  1. Sleep een Embed-element vanuit het componentenpaneel naar je pagina.
  2. Plak het codefragment in de embed-editor.
  3. De Widget wordt weergegeven als een zwevende chatbubbel, ongeacht waar het embed-element is geplaatst.

Je Chatbot-ID vinden

Log in op je WebChatAgent-dashboard, open je assistent en ga naar Kanalen → Chatwidget. Vouw Installatiedetails tonen uit en klik op Code kopiëren. Het fragment bevat al je Chatbot-ID, dus je kunt het geheel plakken in plaats van het ID over te typen.

Probleemoplossing

  • Widget niet zichtbaar in Designer? : Aangepaste code wordt alleen weergegeven op de gepubliceerde site, niet in de voorvertoning van de Webflow Designer. Publiceer je site en bekijk deze live.
  • Widget staat niet op alle pagina's? : Controleer of je Site Settings > Custom Code (Methode 1) hebt gebruikt en geen code op paginaniveau.
  • Webflow-hosting verplicht? : Aangepaste code werkt zowel op door Webflow gehoste sites als bij geëxporteerde code. Als je je site exporteert, wordt de code meegenomen in de export.