Een chatbot toevoegen aan Wix: stap-voor-stap handleiding

Wix heeft een ingebouwde chatfunctie, maar dat is een basale livechat-tool waarvoor iemand aan de andere kant moet zitten. Als er niemand online is, krijgen bezoekers een contactformulier te zien. Dat is niet genoeg wanneer iemand om 23:00 uur op je site rondkijkt en moet beslissen of hij je dienst boekt of je product koopt.

Een AI-chatbot die getraind is op je sitecontent beantwoordt die vragen direct, zonder tussenkomst van een mens. Deze gids behandelt twee manieren om een chatbot aan Wix toe te voegen, loopt de installatie van begin tot eind door en legt uit hoe je het beste resultaat behaalt.

Ingebouwde Wix Chat versus AI-chatbot

Voordat we bij de installatie komen, is het goed om te begrijpen waarom een specifiek daarvoor gebouwde AI-chatbot anders is dan wat Wix standaard biedt.

Wix Chat werkt goed als je realtime gesprekken met mensen wilt. Maar de meeste eigenaren van kleine bedrijven kunnen niet de hele dag online zijn. Een AI-chatbot vult die gaten op en handelt de terugkerende vragen af die het grootste deel van de bezoekersvragen uitmaken.

Je kunt beide samen gebruiken: de AI-chatbot handelt veelgestelde vragen automatisch af, en Wix Chat is er voor de gevallen waarin een persoonlijke aanpak nodig is.

Wat je nodig hebt voordat je begint

1. Een getrainde chatbot op Agentkit.

Meld je gratis aan, maak een chatbot en train hem op je Wix-sitecontent. Het gratis abonnement geeft je 1 chatbot en 50 berichten per maand.

Voeg de URL van je Wix-site toe als trainingsbron. De crawler indexeert je pagina's automatisch. Voeg daarna Q&A-paren toe voor je belangrijkste onderwerpen (prijzen, openingstijden, boekingsproces, retourbeleid).

Voor gedetailleerde trainingsinstructies, zie Hoe je een chatbot traint op je websitecontent.

2. Een Wix Premium-abonnement.

Voor het toevoegen van custom code aan Wix heb je een Premium-abonnement nodig (elk niveau). Gratis Wix-sites ondersteunen geen custom HTML-embeds of Velo.

Methode 1: HTML-embed (aanbevolen)

Dit is de eenvoudigste methode en werkt voor alle Wix-gebruikers met een Premium-abonnement. Je voegt het chatbotscript toe met een HTML-embed-element in de Wix Editor.

Stap 1: haal je embedcode op

Ga in het Agentkit-dashboard naar het tabblad Publiceren van je chatbot. Je ziet twee embed-opties. Gebruik voor Wix de iframe-embedcode:

<iframe
  src="https://cdn.agentkit.ai/embed/your-chatbot-id"
  style="width: 100%; height: 600px; border: none;"
  allow="clipboard-write">
</iframe>

Je kunt ook de JavaScript-widget gebruiken, maar het HTML-embed-element van Wix verwerkt iframes betrouwbaarder dan scripttags. De iframe-methode is de aanbevolen aanpak voor Wix.

Stap 2: voeg de HTML-embed toe aan je pagina

1. Open de Wix Editor van je site.
2. Klik op de knop Add (het blauwe "+"-icoon) in de linker werkbalk.
3. Selecteer Embed Code en dan Embed HTML.
4. Er verschijnt een HTML-element op je pagina. Klik erop en selecteer Enter Code.
5. Schakel over naar het tabblad Code (niet het tabblad URL).
6. Plak de iframe-code uit stap 1.
7. Klik op Update.
8. Vergroot of verklein het element en plaats het op de plek waar je de chatbot op de pagina wilt tonen.

Stap 3: maak het site-breed (optioneel)

De HTML-embed-methode voegt de chatbot toe aan één pagina. Wil je de chatbot op elke pagina, dan heb je twee opties:

Optie A: toevoegen aan de header of footer van de site.

1. Klik in de Wix Editor op de sectie Header of Footer van je pagina.
2. Voeg het HTML-embed-element toe aan de header of footer.
3. Omdat de header en footer op alle pagina's verschijnen, is de chatbot site-breed beschikbaar.

Optie B: gebruik de functie "Custom Element" van de Wix App Market.

1. Ga naar Add en dan Embed Code en dan Custom Element.
2. Configureer het zo dat je chatbotscript op alle pagina's laadt.

Optie A is eenvoudiger voor de meeste gebruikers.

Stap 4: publiceer en controleer

1. Klik op Publish rechtsboven in de Wix Editor.
2. Bezoek je live site (niet de editor-preview).
3. Controleer of de chatbot verschijnt en reageert op testberichten.
4. Controleer op mobiel of de layout klopt.

Methode 2: Velo by Wix (voor developers)

Velo is het ingebouwde ontwikkelplatform van Wix. Ben je bekend met JavaScript, dan geeft Velo je meer controle over wanneer en hoe de chatbot laadt.

Wanneer gebruik je Velo

• Je wilt dat de chatbot voorwaardelijk laadt (bijv. alleen voor ingelogde leden, alleen op bepaalde pagina's).
• Je moet dynamische gegevens doorgeven aan de chatbot (bijv. de naam van de bezoeker of het lidmaatschapsniveau).
• Je wilt chatbotacties programmatisch activeren.

Stap 1: schakel Velo in

1. Klik in de Wix Editor op Dev Mode in de bovenste menubalk.
2. Klik op Turn on Dev Mode.
3. Het codepaneel verschijnt onderaan de editor.

Stap 2: voeg het script toe via de paginacode

1. Selecteer de pagina waar je de chatbot wilt.
2. In het codepaneel onderaan zie je een bestand voor de pagina (bijv. Home.js).
3. Voeg de volgende code toe om de Agentkit-widget dynamisch te laden:

$w.onReady(function () {
  const script = document.createElement('script');
  script.src = 'https://cdn.agentkit.ai/widget.js';
  script.setAttribute('data-chatbot', 'your-chatbot-id');
  script.async = true;
  document.body.appendChild(script);
});

4. Sla op en publiceer.

Stap 3: site-breed laden via masterPage.js

Om de chatbot op elke pagina te laden:

1. Open in het codepaneel masterPage.js (dit draait op alle pagina's).
2. Voeg dezelfde code voor het laden van het script toe binnen de onReady-functie.
3. Sla op en publiceer.

Voorbeeld van voorwaardelijk laden

Wil je de chatbot alleen op bepaalde pagina's:

// masterPage.js
import wixLocation from 'wix-location';

$w.onReady(function () {
  const path = wixLocation.path;
  const chatbotPages = ['services', 'pricing', 'contact', 'faq'];

  if (chatbotPages.some(page => path.includes(page))) {
    const script = document.createElement('script');
    script.src = 'https://cdn.agentkit.ai/widget.js';
    script.setAttribute('data-chatbot', 'your-chatbot-id');
    script.async = true;
    document.body.appendChild(script);
  }
});

Dit laadt de chatbot alleen op je pagina's Services, Pricing, Contact en FAQ.

Chatbotopties voor Wix vergelijken

Er zijn verschillende chatbottools die met Wix werken. Hier zie je hoe de belangrijkste opties zich tot elkaar verhouden.

Wil je AI-gestuurde antwoorden die getraind zijn op je eigen content, met de meest flexibele embedopties, dan is Agentkit de sterkste keuze. Heb je een regelgebaseerde flow-builder zonder AI nodig, dan is Joonbot daar speciaal voor gebouwd. En heb je alleen basale mens-tot-mens chat nodig, dan is Wix Chat al inbegrepen bij je abonnement.

De chatbot aanpassen voor je Wix-site

Zodra de chatbot live staat, configureer je deze instellingen in het Agentkit-dashboard voor het beste resultaat.

Merkkleuren en positie

Pas via het tabblad Ontwerp van je chatbot het uiterlijk van de widget aan:

• Primaire kleur: stem af op de accentkleur van je Wix-site.
• Positie: rechtsonder is de standaard en werkt voor de meeste sites. Schakel over naar linksonder als je Wix-site rechtsonder al een conflicterend element heeft.
• Welkomstbericht: schrijf iets specifieks voor je bedrijf. "Hoi! Ik kan vragen beantwoorden over onze diensten, prijzen en beschikbaarheid" is beter dan "Waarmee kan ik helpen?"

Domeinbeperking

Voeg je Wix-domein toe aan de lijst met toegestane domeinen. Dit omvat zowel je custom domain (bijv. jouwbedrijf.com) als de standaard Wix-URL (bijv. jouwbedrijf.wixsite.com/jouwsite). Domeinbeperking voorkomt ongeautoriseerd gebruik van je chatbot.

Aangepaste instructies

Voeg instructies toe die het gedrag van de chatbot afstemmen op jouw specifieke bedrijf:

• "Als iemand naar de prijzen vraagt, noem dan altijd de gratis kennismakingsoptie."
• "Stel bij vragen over beschikbaarheid voor om te boeken via de planningspagina."
• "Beloof nooit specifieke levertijden. Zeg dat ze contact moeten opnemen voor actuele doorlooptijden."
• "Als iemand een vraag stelt die je niet kunt beantwoorden, bied dan aan om hun e-mailadres te noteren voor opvolging."

Leads vastleggen

Schakel de actie Leads verzamelen in om e-mailadressen van betrokken bezoekers vast te leggen. Dit is vooral waardevol voor dienstverlenende bedrijven op Wix, waar het omzetten van een bezoeker in een lead het primaire doel is.

Vastgelegde leads verschijnen in je Agentkit-dashboard. Koppel ze aan je e-mailmarketing of CRM via Zapier. Zie de integratiegids voor meer informatie.

Trainingstips voor Wix-sites

Wix-sites gebruiken vaak visuele layouts, animaties en interactieve elementen die kunnen beperken wat een webcrawler eruit haalt. Hier lees je hoe je de kennis van je chatbot maximaliseert.

Vul de crawl aan met Q&A-paren

Test de chatbot in de Playground nadat je hem op je URL hebt getraind. Maak voor elke vraag die slecht beantwoord wordt een Q&A-paar met het ideale antwoord. Veelvoorkomende onderwerpen om te behandelen:

Upload aanvullende documenten

Heb je PDF's, menu's, brochures of dienstencatalogi, upload ze dan als documentbronnen. Deze geven de chatbot gedetailleerde informatie die mogelijk helemaal niet op je website staat.

Houd trainingsdata actueel

Train de chatbot opnieuw wanneer je je Wix-site bijwerkt. Bij het Standard-abonnement ($119.99/mnd) of hoger regelt Automatisch hertrainen dit vanzelf. Bij het Free- of Hobby-abonnement start je na belangrijke contentwijzigingen handmatig een nieuwe training vanuit het Agentkit-dashboard.

Problemen oplossen

De chatbot verschijnt niet na het publiceren

• Controleer je Wix-abonnement. Voor custom code heb je een Premium-abonnement nodig.
• Bekijk de live site, niet de editor. De preview van de Wix Editor voert custom scripts niet altijd uit.
• Wis je browsercache of gebruik een incognitovenster.
• Controleer de HTML-embedcode. Zorg dat je de volledige iframe- of scripttag hebt geplakt, zonder extra tekens.

Het HTML-embed-element toont een lege ruimte

• Vergroot de hoogte van het HTML-embed-element. De standaardgrootte kan te klein zijn om de chatinterface weer te geven.
• Controleer of de iframe-src-URL correct is en je chatbot-ID bevat.
• Controleer je browserconsole (F12) op foutmeldingen over geblokkeerde content.

De chatbot werkt op desktop maar niet op mobiel

Wix handelt responsive design automatisch af, maar HTML-embed-elementen hebben soms handmatige aanpassing nodig voor mobiel. In de Wix Editor:

1. Schakel over naar de mobiele editorweergave.
2. Zoek het HTML-embed-element.
3. Pas de grootte en positie aan voor mobiel.
4. Publiceer en test.

Gebruik je de JavaScript-widget via Velo (methode 2), dan is de widget standaard responsive en zou hij zonder aanpassing op alle schermformaten moeten werken.

De chatbot geeft onnauwkeurige antwoorden

Dit is een trainingskwestie, geen embedkwestie. Ga naar het Agentkit-dashboard en:

1. Controleer welke pagina's succesvol zijn gecrawld.
2. Voeg Q&A-paren toe voor onderwerpen met slechte antwoorden.
3. Test in de Playground totdat de antwoorden bevredigend zijn.
4. Voeg aangepaste instructies toe om de toon en het gedrag van de chatbot te sturen.

Overwegingen rond prijzen

Hier zie je hoe de prijzen van Agentkit zich verhouden tot typische Wix-toepassingen.

Met jaarlijkse facturering bespaar je ongeveer 20% op alle betaalde abonnementen.

Volgende stappen

Je Wix-site heeft nu een AI-chatbot die dag en nacht bezoekersvragen afhandelt. Hier is waar je je vervolgens op moet richten:

1. Verfijn je trainingsdata op basis van de eerste week gesprekken. Zoek naar patronen in wat bezoekers vragen en vul de gaten in je training op.
2. Schakel leads verzamelen in om gesprekken om te zetten in contacten. Hier verdient de chatbot zichzelf terug.
3. Koppel je tools via Zapier of webhooks. Stuur leads naar Google Sheets, Mailchimp, HubSpot, of wat je team ook gebruikt. Zie de integratiegids.
4. Lees de Squarespace-gids als je sites op andere platforms beheert: Een chatbot toevoegen aan Squarespace.
5. Verken alle embedopties in de complete embedgids.

Bouw gratis je chatbot →

Geen creditcard nodig.