Skip to navigation
HandleidingenNo-code

ElevenAgents in Webflow

Leer hoe je een ElevenLabs-agent in Webflow implementeert

In deze tutorial leer je hoe je je ElevenLabs Agents-agent toevoegt aan je Webflow-website.

Vereisten

  • Een ElevenLabs Agents-agent die je volgens deze handleiding hebt gemaakt
  • Een Webflow-account met een Core-, Growth-, Agency- of Freelancer Workspace (of Site Plan)
  • Basiskennis van de Designer van Webflow

Handleiding

1

Haal je embedcode op

Ga naar het ElevenLabs-dashboard en zoek de embedwidget van je agent.

<elevenlabs-convai agent-id="YOUR_AGENT_ID"></elevenlabs-convai>
<script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script>
2

Voeg de widget toe aan je pagina

  1. Open je Webflow-project in Designer
  2. Sleep een Embed Element naar de gewenste locatie
  3. Plak het fragment <elevenlabs-convai agent-id="YOUR_AGENT_ID"></elevenlabs-convai> in de code-editor van het Embed Element
  4. Kies Save & Close
3

Voeg het script globaal toe

  1. Ga naar Project Settings > Custom Code
  2. Plak het fragment <script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script> in het gedeelte Footer Code
  3. Kies Save Changes
  4. Publiceer je site om de wijzigingen te zien

Opmerking: de widget is pas zichtbaar nadat je je site hebt gepubliceerd, niet in de Designer.

Problemen oplossen

Als de widget niet verschijnt, controleer dan het volgende:

  • Het fragment <script> staat in het gedeelte Footer Code
  • Het fragment <elevenlabs-convai> staat correct in een Embed Element
  • Je hebt je site gepubliceerd nadat je wijzigingen hebt aangebracht

Volgende stappen

Nu je je ElevenLabs-agent hebt toegevoegd aan Webflow, kun je:

  1. De widget in het ElevenLabs-dashboard aanpassen aan je merk
  2. Extra talen toevoegen
  3. Geavanceerde functionaliteit toevoegen, zoals tools en een kennisbank