De ElevenLabs Conversational AI-widget toevoegen aan je Wix-website

Wil je je klantenservice en betrokkenheid verbeteren door ElevenLabs’ Conversational AI toe te voegen aan je Wix-website? Dan ben je hier aan het juiste adres. Deze handleiding neemt je stap voor stap mee door het hele proces en helpt je veelvoorkomende valkuilen te vermijden.

Voordat je begint

Zorg voordat je begint dat je het volgende hebt:

1. Wix Premium-account: Het insluiten van aangepaste JavaScript is alleen beschikbaar bij Premium-abonnementen.
2. ElevenLabs-account: Je hebt een ElevenLabs-account nodig om Conversational AI-stemagents te maken. Registreer je hier.
3. Toegang tot Wix Editor met Dev Mode ingeschakeld: Je hebt Dev Mode nodig om aangepaste code aan je site toe te voegen.

Stapsgewijze handleiding

Stap 1: Je ElevenLabs-widget voorbereiden

1. Log in op je ElevenLabs-account.
2. Ga naar de sectie Conversational AI.
3. Stel je conversatieagent in en kopieer de meegeleverde JavaScript-embedcode.

Stap 2: Dev Mode inschakelen in Wix

1. Open je Wix-site in de Editor.
2. Klik in het bovenste menu op Dev Mode om geavanceerde functies, zoals het toevoegen van aangepaste code, in te schakelen.

Opmerking: Als Dev Mode niet zichtbaar is, controleer dan of je de volledige Wix Editor gebruikt en niet Wix ADI (Artificial Design Intelligence).

Stap 3: De JavaScript-embedcode toevoegen

1. Ga in de Wix Editor naar Settings > Custom Code.
2. Klik op + Add Custom Code.
3. Plak de JavaScript-code van ElevenLabs in het daarvoor bestemde veld.
4. Selecteer onder Apply Code To de optie All Pages (of kies een specifieke pagina voor de widget).
5. Sla je wijzigingen op en publiceer ze.

Veelvoorkomende problemen oplossen

Heb je een probleem ondervonden bij het toevoegen van een Conversational AI-widget aan je Wix-website? Volg deze eenvoudige stappen om het op te lossen.

Probleem 1: Widget verbreekt de verbinding of laadt niet

• Oorzaak: Onjuiste Allowlist-configuratie of gebruik van een gratis Wix-abonnement.
• Oplossing: Zorg dat de URL van je site uit de Allowlist is verwijderd of correct is geconfigureerd in het ElevenLabs-dashboard.

Probleem 2: JavaScript werkt niet

• Oorzaak: JavaScript-code is niet correct toegevoegd.
• Oplossing: Controleer nogmaals of de JavaScript in het juiste veld onder Custom Code is geplakt.

Probleem 3: Gratis Wix-abonnement

• Oorzaak: Het insluiten van aangepaste JavaScript wordt niet ondersteund bij gratis Wix-abonnementen.
• Oplossing: Upgrade naar een Wix Premium-abonnement.

Geavanceerde tips

Wil je de best mogelijke ervaring creëren voor de bezoekers van je website? Bekijk dan deze geavanceerde best practices. 

De Allowlist aanpassen

Werkt je widget nog steeds niet nadat je de code hebt ingesloten? Volg dan deze stappen:

1. Log in op je ElevenLabs-account.
2. Ga naar de Allowlist-instellingen van je Conversational AI-agent.
3. Zorg dat het domein van je website correct is toegevoegd. Blijven de problemen bestaan? Probeer dan je domein uit de Allowlist te verwijderen en test opnieuw.

Testen op een live domein

De widget werkt mogelijk niet correct in de previewmodus van Wix. Publiceer je site en test deze op het live domein om te controleren of alles naar verwachting werkt.

Compatibiliteit testen in verschillende browsers

Test je widget zodra deze live staat in meerdere browsers, zoals Chrome, Firefox, Edge en Safari. Sommige functies kunnen zich per browser anders gedragen door verschillen in de verwerking van JavaScript.

1. Open je website in elke browser.
2. Gebruik de widget en controleer of deze goed reageert.
3. Let op problemen zoals kapotte opmaak of fouten in de functionaliteit. Ontstaan er problemen, controleer dan je JavaScript-code of neem contact op met ElevenLabs support voor hulp.

Mobiele responsiviteit

Controleer of de widget probleemloos werkt op mobiele apparaten, aangezien veel gebruikers websites via smartphones of tablets bezoeken.

1. Gebruik de Mobile Editor van Wix om de mobiele lay-out van je site te bekijken.
2. Test de widget op fysieke apparaten om de functionaliteit en het gebruiksgemak te bevestigen.
3. Controleer op overlappende elementen of opmaakproblemen. Zijn aanpassingen nodig, gebruik dan de mobiele ontwerptools van Wix om de plaatsing en grootte te optimaliseren.

Tips voor JavaScript-debugging

Werkt je widget niet zoals verwacht? Met ontwikkelaarstools in je browser kun je problemen opsporen.

1. Open je site in een browser (Chrome aanbevolen).
2. Klik met de rechtermuisknop ergens op de pagina en selecteer Inspect om DevTools te openen.
3. Ga naar het tabblad Console en zoek naar foutmeldingen die betrekking hebben op de widget.
4. Zie je fouten? Controleer dan de JavaScript-embedcode en zorg dat alle benodigde URL's aan de Allowlist zijn toegevoegd. Met deze methode kun je ook ontbrekende afhankelijkheden of andere problemen opsporen die verhinderen dat de widget correct werkt.

Tot slot

De ElevenLabs Conversational AI-widget integreren in Wix vereist een zorgvuldige configuratie, maar met de juiste stappen kun je deze snel aan de praat krijgen. Zorg dat je een Wix Premium-abonnement hebt, volg de bovenstaande stappen en los veelvoorkomende problemen op wanneer nodig. Loop je tegen verdere problemen aan, neem dan contact op met ElevenLabs support voor hulp.

Of, als je dat nog niet hebt gedaan, registreer je vandaag voor het Conversational AI Agents-platform.