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

Wil je je klantervaring verbeteren? Conversational AI kan helpen. Door Conversational AI van ElevenLabs aan je Webflow-website toe te voegen, kunnen bezoekers natuurlijke gesprekken voeren alsof ze echt met iemand uit je team praten. 

In deze handleiding leggen we uit hoe je de ElevenLabs Conversational AI-widget aan je Webflow-website toevoegt en de widget integreert met aangepaste HTML en JavaScript.

Voordat je begint

Controleer voordat je begint of je het volgende hebt:

1. Webflow-account: Je hebt een actieve Core-, Growth-, Agency- of Freelancer Workspace, of een Site Plan nodig om toegang te krijgen tot het Embed Element.
2. ElevenLabs-account: Configureer je Conversational AI-stemagent in ElevenLabs en kopieer de meegeleverde embedcode (met < script >- en < div >-snippets).
3. Bekendheid met de Designer van Webflow: Basiskennis van het toevoegen en bewerken van Embed Elements in Webflow is handig.

Stapsgewijze handleiding

Stap 1: Bereid je ElevenLabs-widget voor

1. Log in op je ElevenLabs-account.
2. Ga naar de sectie Conversational AI.
3. Kopieer de embedcode, met daarin:
4. • Een < script >-snippet om de functionaliteit van de widget te laden.
   • Een < div >-snippet om te bepalen waar de widget op de pagina verschijnt.

Stap 2: Voeg de widget toe aan een Webflow-pagina

Gebruik het Embed Element om de widget op een specifieke pagina weer te geven.

1. Open je Webflow-project in de Designer.
2. Ga naar de pagina waarop je de widget wilt weergeven.
3. Sleep vanuit het Elements Panel het Embed Element naar de gewenste plek op de pagina.
4. Plak in de code-editor van het Embed Element het < div >-snippet uit de embedcode van ElevenLabs.
5. Klik op Save & Close om de wijzigingen toe te passen.

Opmerking: Het Embed Element fungeert in de Designer als tijdelijke aanduiding voor je widget. De daadwerkelijke widget wordt pas weergegeven wanneer de site is gepubliceerd.

Stap 3: Voeg het script globaal toe

Om ervoor te zorgen dat de widget goed werkt, moet je het < script >-snippet globaal op je site opnemen.

1. Ga naar je Webflow Dashboard en open de Project Settings.
2. Ga naar het tabblad Custom Code.
3. Plak het < script >-snippet in de sectie Footer Code. Zo wordt het script geladen op alle pagina's waarop de widget wordt gebruikt.
4. Klik op Save Changes.

Stap 4: Publiceer en test

1. Publiceer je site op het stagingdomein van Webflow of op je eigen domein.
2. Open je site in een browser om te controleren of de widget verschijnt en werkt zoals verwacht.

Belangrijk: Aangepaste code wordt niet weergegeven in de Designer van Webflow. Publiceer je site om de widget live te zien.

Veelvoorkomende problemen en oplossingen

Heb je problemen met het instellen van de integratie? Geen zorgen — de onderstaande tips helpen je verder.

1. Widget wordt niet weergegeven

• Oorzaak: Ontbrekende of verkeerd geplaatste < script >- of < div >-snippets.
• Oplossing: Zorg dat het < script >-snippet in de sectie Footer Code staat en dat het < div >-snippet correct in een Embed Element is geplaatst.

2. Widget staat niet goed uitgelijnd

• Oorzaak: Onjuiste plaatsing of styling van het Embed Element.
• Oplossing: Gebruik het Style Panel van Webflow om de afmetingen en uitlijning van het Embed Element aan te passen.

3. Fouten

• Oorzaak: Conflicten met andere scripts of browserbeperkingen.
• Oplossing: Gebruik de developer console van de browser om JavaScript-fouten te identificeren en op te lossen.

Geavanceerde tips

Wil je de widget aanpassen, op verschillende apparaten testen of op meerdere pagina's hergebruiken? Dit is wat je moet weten.

• De widget aanpassen: Gebruik het Style Panel van Webflow of aangepaste CSS om het uiterlijk van de widget aan te passen, zoals de grootte, uitlijning of kleuren.
• Testen op verschillende apparaten: Gebruik de responsive design-tools van Webflow om ervoor te zorgen dat de widget probleemloos werkt op desktop, tablet en mobiele apparaten.
• De widget hergebruiken: Sla het Embed Element op als Component als je de widget op meerdere pagina's wilt gebruiken. Zo blijft de styling consistent en is het beheer eenvoudiger.

Tot slot

De ElevenLabs Conversational AI-widget integreren in Webflow is eenvoudig dankzij de functies Embed Element en Custom Code van het platform. Of je nu de betrokkenheid op één pagina of op je hele site wilt verbeteren, volg de bovenstaande stappen om aan de slag te gaan.

Neem voor verdere hulp gerust contact op met ElevenLabs support of bekijk de communityforums van Webflow voor extra advies. 

Heb je dat nog niet gedaan? Registreer je vandaag voor het ElevenLabs AI Agents Platform om het proces te starten. 

Veelgestelde vragen