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

ElevenLabs’ Conversational AI is een krachtige tool voor klantenservice waarmee je interactieve AI-gestuurde ervaringen creëert die de betrokkenheid vergroten. Heb je een WordPress-website, dan kun je eenvoudig aangepaste HTML en JavaScript integreren, waaronder dynamische functies zoals ElevenLabs’ Conversational AI.

In deze handleiding laten we je zien hoe je de Conversational AI-widget aan je WordPress-site toevoegt met Custom HTML Blocks voor specifieke pagina's en Code Injection voor globale functionaliteit.

Voordat je begint

Controleer voordat je begint of je het volgende hebt:

1. WordPress-abonnement: Voor gebruikers van WordPress.com is een Business- of Commerce-abonnement vereist om aangepaste JavaScript toe te voegen. Gebruikers van zelfgehoste WordPress kunnen zonder deze beperkingen code toevoegen.
2. ElevenLabs-account: Configureer je Conversational AI-stemagent in ElevenLabs en kopieer de embedcode, die < script >- en < div >-snippets bevat.
3. Basiskennis van WordPress: Het is handig als je bekend bent met het toevoegen van blokken, het bewerken van pagina's of het gebruik van plugins.

Stapsgewijze handleiding

Stap 1: Bereid je ElevenLabs-widget voor

1. Log in op je ElevenLabs-account.
2. Ga naar de sectie Conversational AI.
3. Configureer je AI-agent en kopieer de embedcode, die het volgende bevat:
4. • Een < script >-snippet om de functionaliteit van de widget te laden.
   • Een < div >-snippet om te bepalen waar de widget wordt weergegeven.

Stap 2: Voeg de widget toe aan een specifieke pagina met Custom HTML Blocks

Gebruik het Custom HTML Block van WordPress om de widget op een specifieke pagina weer te geven.

1. Log in op je WordPress-dashboard.
2. Ga naar Pagina's en maak een nieuwe pagina of bewerk een bestaande pagina.
3. Klik op het pictogram + om een nieuw blok toe te voegen.
4. Zoek naar Custom HTML en selecteer dit in de blokopties.
5. Plak de < div >-snippet uit je ElevenLabs-embedcode in het blok.
6. Klik op Preview om te controleren of de widget correct wordt weergegeven.
7. Publiceer of update de pagina om de wijzigingen live te zetten.

Stap 3: Voeg het script globaal toe met een plugin of thema-instellingen

Om te zorgen dat de widget goed werkt, moet je de < script >-snippet globaal toevoegen.

Optie A: Een plugin gebruiken (aanbevolen voor niet-ontwikkelaars)

1. Installeer en activeer een plugin zoals Header Footer Code Manager.
2. Ga naar de plugininstellingen en maak een nieuwe codesnippet.
3. Plak de < script >-snippet in de sectie Footer.
4. Stel in dat de snippet op All Pages wordt uitgevoerd.
5. Sla je wijzigingen op.

Optie B: Het script rechtstreeks aan je thema toevoegen

1. Ga in je WordPress-dashboard naar Appearance > Theme Editor.
2. Open het bestand footer.php van je actieve thema.
3. Plak de < script >-snippet vlak voor de afsluitende tag < /body >.
4. Sla het bestand op.

Stap 4: Publiceer en test

1. Ga naar de pagina waaraan je de widget hebt toegevoegd om te controleren of deze correct wordt weergegeven en werkt.
2. Test de widget op meerdere apparaten en in verschillende browsers om te zorgen dat alles probleemloos werkt.

Veelvoorkomende problemen oplossen

Lukt het niet om de widget aan de praat te krijgen? Deze tips kunnen helpen. 

Probleem 1: Widget wordt niet weergegeven

• Oorzaak: Ontbrekende of verkeerd geplaatste < script >- of < div >-snippets.
• Oplossing: Controleer nogmaals of het < script > globaal is toegevoegd en de < div > op de pagina staat.

Probleem 2: Widget is niet goed uitgelijnd

• Oorzaak: Blokuitlijning of ontbrekende styling.
• Oplossing: Gebruik de hulpmiddelen voor blokuitlijning van WordPress of voeg aangepaste CSS toe om de widget correct te positioneren.

Probleem 3: Conflicten tussen plugins

• Oorzaak: Andere plugins verstoren de uitvoering van JavaScript.
• Oplossing: Deactiveer plugins één voor één om het conflict te achterhalen.

Geavanceerde tips

Bekijk deze tips voor extra hulp om de widget te laten werken zoals je wilt. 

• De widget aanpassen: Gebruik de sectie Customize > Additional CSS van WordPress om de widget te stylen, zodat deze bij het ontwerp van je site past.
• Testen op verschillende apparaten: Test de widget op desktop-, tablet- en mobiele apparaten voor een consistente gebruikerservaring.
• Widgets voor specifieke pagina's: Wil je dat de widget alleen op specifieke pagina's wordt weergegeven? Voeg de < script >-snippet dan niet globaal toe. Neem deze in plaats daarvan op in een plugin of blok dat op die pagina's is gericht.

Tot slot

Door de ElevenLabs Conversational AI-widget aan je WordPress-website toe te voegen, betrek je bezoekers met AI-gestuurde interacties. Of je deze nu op één pagina of op je hele site insluit, WordPress biedt de tools die je nodig hebt voor een naadloze integratie.

Volg de stappen die hier worden beschreven, test je implementatie grondig en pas deze waar nodig aan. Als je problemen ondervindt, neem dan gerust contact op met ElevenLabs support voor hulp.

Of registreer je vandaag nog voor het ElevenLabs Agents Platform om het proces te starten.