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

Met de ElevenLabs Conversational AI-widget kun je je Framer-website uitbreiden met interactieve, AI-gestuurde gesprekken. Of je nu de klantbetrokkenheid wilt vergroten of je klantenservice wilt verbeteren, Conversational AI kan helpen. 

In deze handleiding nemen we je stap voor stap mee bij het toevoegen van de widget aan je Framer-website. Je leert hoe je widgets voor de hele site of voor specifieke pagina's configureert en veelvoorkomende problemen oplost.

Voordat je begint

Zorg voordat je begint dat je het volgende hebt:

1. Framer-account: Toegang tot een Framer-project waarin je custom code kunt toevoegen (beschikbaar met betaalde abonnementen).
2. ElevenLabs-account: Configureer je Conversational AI-agent en kopieer de bijbehorende embed code (inclusief de < script >- en < div >-snippets).
3. Bekendheid met Framer: Basiskennis van de Site Settings en Embed Elements van Framer

Stapsgewijze handleiding

Stap 1: Bereid je ElevenLabs-widget voor

1. Log in op je ElevenLabs-account.
2. Ga naar het gedeelte Conversational AI.
3. Configureer je AI-agent en kopieer de meegeleverde 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 het script toe aan de site-instellingen van Framer

1. Open je Framer-project.
2. Klik rechtsboven op Project Settings.
3. Ga naar het tabblad General en scrol omlaag naar het gedeelte Custom Code.
4. Plak de < script >-snippet uit je ElevenLabs-embedcode in het veld End of < body > tag.
5. Sla je wijzigingen op. Zo zorg je ervoor dat het vereiste script voor je site wordt geladen.

Stap 3: Voeg de widget toe aan een specifieke pagina

1. Ga in je Framer-project naar de pagina waarop je de widget wilt weergeven.
2. Voeg een Embed Element toe vanuit het gedeelte Utilities in het menu Insert.
3. Selecteer het Embed Element op je canvas om de instellingen te openen.
4. Wijzig Type in HTML.
5. Plak de < div >-snippet uit de ElevenLabs-embedcode in het HTML-veld.
6. Plaats het Embed Element op je canvas en pas de grootte naar wens aan.

Stap 4: Publiceer en test

1. Klik op Publish om je wijzigingen live te zetten.
2. Open je website in een browser om te controleren of de widget wordt weergegeven en correct werkt.
3. • Let op: Custom code wordt niet weergegeven in de Preview-modus van Framer. Je moet je site publiceren om deze te bekijken.

Veelvoorkomende problemen oplossen

Lukt het niet om de integratie werkend te krijgen? Geen zorgen: bekijk hieronder deze tips voor probleemoplossing. 

Probleem 1: Widget wordt niet weergegeven

• Oorzaak: < script >- of < div >-snippet ontbreekt of staat op de verkeerde plaats.
• Oplossing: Zorg dat de < script >-snippet is toegevoegd aan het veld End of < body > tag in Site Settings en dat de < div >-snippet in het Embed Element staat.

Probleem 2: Widget is slechts gedeeltelijk zichtbaar

• Oorzaak: De grootte of positie van het Embed Element is niet correct.
• Oplossing: Pas de afmetingen en uitlijning van het Embed Element aan in de Framer Editor.

Probleem 3: Scriptfouten

• Oorzaak: Conflicterende scripts of geblokkeerde externe resources.
• Oplossing: Open de browserconsole om te controleren op JavaScript-fouten. Zorg dat Framer toestemming heeft om externe scripts te laden.

Geavanceerde tips

Zoek je meer geavanceerde aanpassingsopties? Deze tips helpen je verder. 

• De widget aanpassen: Gebruik custom CSS om de widget vorm te geven en naadloos te laten aansluiten op het ontwerp van je website.
• Testen op verschillende apparaten: Met de responsive ontwerptools van Framer kun je de widget eenvoudig testen in mobiele, tablet- en desktopweergaven, zodat deze correct schaalt.
• Widgets toevoegen aan specifieke pagina's: Als je de widget alleen op specifieke pagina's wilt opnemen, voeg je de < div >-snippet toe aan een Embed Element op de gewenste pagina's en zorg je dat de < script >-snippet aanwezig is in Site Settings.

Tot slot 

Met deze handleiding kun je je Framer-site uitbreiden met dynamische, AI-gestuurde interacties die zijn afgestemd op de behoeften van je doelgroep. Publiceer je wijzigingen, test je configuratie en laat je conversational AI vandaag nog bezoekers te woord staan. Neem voor verdere hulp contact op met ElevenLabs support.

Registreren voor AI Voice Agents om vandaag nog aan de slag te gaan.