LeitfädenNo-Code

ElevenAgents in Webflow

Erfahren Sie, wie Sie einen ElevenLabs-Agenten in Webflow bereitstellen

Dieses Tutorial zeigt Ihnen, wie Sie Ihren ElevenLabs-Agents-Agenten zu Ihrer Webflow-Website hinzufügen.

Voraussetzungen

  • Ein ElevenLabs-Agents-Agent, erstellt nach diesem Leitfaden
  • Ein Webflow-Konto mit Core-, Growth-, Agency- oder Freelancer-Workspace (oder Site Plan)
  • Grundkenntnisse mit dem Webflow Designer

Anleitung

1

Embed-Code abrufen

Öffnen Sie das ElevenLabs-Dashboard und suchen Sie das Embed-Widget Ihres Agenten.

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

Widget zu Ihrer Seite hinzufügen

  1. Öffnen Sie Ihr Webflow-Projekt im Designer
  2. Ziehen Sie ein Embed-Element an die gewünschte Stelle
  3. Fügen Sie das Snippet <elevenlabs-convai agent-id="YOUR_AGENT_ID"></elevenlabs-convai> in den Code-Editor des Embed-Elements ein
  4. Speichern & schließen
3

Skript global hinzufügen

  1. Gehen Sie zu Project Settings > Custom Code
  2. Fügen Sie das Snippet <script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script> in den Bereich Footer Code ein
  3. Änderungen speichern
  4. Veröffentlichen Sie Ihre Website, um die Änderungen zu sehen

Hinweis: Das Widget ist erst nach der Veröffentlichung Ihrer Website sichtbar, nicht im Designer.

Fehlerbehebung

Wenn das Widget nicht angezeigt wird, prüfen Sie Folgendes:

  • Das <script>-Snippet befindet sich im Bereich Footer Code
  • Das <elevenlabs-convai>-Snippet ist korrekt in einem Embed-Element platziert
  • Sie haben Ihre Website nach den Änderungen veröffentlicht

Nächste Schritte

Nachdem Sie Ihren ElevenLabs-Agenten zu Webflow hinzugefügt haben, können Sie:

  1. Das Widget im ElevenLabs-Dashboard an Ihre Marke anpassen
  2. Weitere Sprachen hinzufügen
  3. Erweiterte Funktionen wie Tools und Wissensdatenbank hinzufügen