So fügen Sie das ElevenLabs Conversational AI-Widget zu Ihrer Webflow-Website hinzu

Möchten Sie Ihr Kundenerlebnis verbessern? Konversations-KI kann helfen. Wenn Sie die Konversations-KI von ElevenLabs zu Ihrer Webflow-Website hinzufügen, können Besucher natürliche Gespräche führen, als würden sie tatsächlich mit einem Mitglied Ihres Teams sprechen. 

In diesem Leitfaden zeigen wir Ihnen, wie Sie das ElevenLabs-Widget für Konversations-KI zu Ihrer Webflow-Website hinzufügen und es mit benutzerdefiniertem HTML und JavaScript integrieren.

Bevor Sie beginnen

Stellen Sie vor dem Start sicher, dass Sie Folgendes haben:

1. Webflow-Konto: Sie benötigen einen aktiven Core-, Growth-, Agency- oder Freelancer-Workspace oder einen Site Plan, um auf das Embed Element zuzugreifen.
2. ElevenLabs-Konto: Konfigurieren Sie Ihren Conversational KI-Sprachagenten in ElevenLabs und kopieren Sie den bereitgestellten Embed-Code. Er enthält < script >- und < div >-Snippets.
3. Kenntnisse des Webflow Designers: Grundkenntnisse zum Hinzufügen und Bearbeiten von Embed Elements in Webflow sind hilfreich.

Schritt-für-Schritt-Anleitung

Schritt 1: Bereiten Sie Ihr ElevenLabs-Widget vor

1. Melden Sie sich bei Ihrem ElevenLabs-Konto an.
2. Öffnen Sie den Bereich Konversations-KI.
3. Kopieren Sie den Embed-Code. Er enthält:
4. • Ein < script >-Snippet zum Laden der Widget-Funktionen.
   • Ein < div >-Snippet, das festlegt, wo das Widget auf der Seite erscheint.

Schritt 2: Fügen Sie das Widget zu einer Webflow-Seite hinzu

Verwenden Sie das Embed Element, um das Widget auf einer bestimmten Seite anzuzeigen.

1. Öffnen Sie Ihr Webflow-Projekt im Designer.
2. Navigieren Sie zu der Seite, auf der das Widget erscheinen soll.
3. Ziehen Sie das Embed Element aus dem Elements Panel an die gewünschte Stelle auf der Seite.
4. Fügen Sie im Code-Editor des Embed Elements das < div >-Snippet aus dem ElevenLabs-Embed-Code ein.
5. Klicken Sie auf Save & Close, um die Änderungen zu übernehmen.

Hinweis: Das Embed Element dient im Designer als Platzhalter für Ihr Widget. Das eigentliche Widget wird erst angezeigt, wenn die Website veröffentlicht ist.

Schritt 3: Fügen Sie das Skript global hinzu

Damit das Widget korrekt funktioniert, müssen Sie das < script >-Snippet global auf Ihrer Website einbinden.

1. Öffnen Sie Ihr Webflow Dashboard und dann die Project Settings.
2. Navigieren Sie zum Tab Custom Code.
3. Fügen Sie das < script >-Snippet in den Bereich Footer Code ein. So wird das Skript auf allen Seiten geladen, auf denen das Widget verwendet wird.
4. Klicken Sie auf Save Changes.

Schritt 4: Veröffentlichen und testen

1. Veröffentlichen Sie Ihre Website auf der Staging-Domain von Webflow oder auf Ihrer eigenen Domain.
2. Öffnen Sie Ihre Website in einem Browser und prüfen Sie, ob das Widget wie erwartet erscheint und funktioniert.

Wichtig: Benutzerdefinierter Code wird im Webflow Designer nicht gerendert. Sie müssen Ihre Website veröffentlichen, um das Widget live zu sehen.

Häufige Probleme und Fehlerbehebung

Haben Sie Probleme beim Einrichten der Integration? Keine Sorge – die folgenden Tipps helfen Ihnen weiter.

1. Widget wird nicht angezeigt

• Ursache: < script >- oder < div >-Snippets fehlen oder sind falsch platziert.
• Lösung: Stellen Sie sicher, dass sich das < script >-Snippet im Bereich Footer Code befindet und das < div >-Snippet korrekt in einem Embed Element platziert ist.

2. Widget ist falsch ausgerichtet

• Ursache: Das Embed Element ist falsch platziert oder formatiert.
• Lösung: Passen Sie Größe und Ausrichtung des Embed Elements im Style Panel von Webflow an.

3. Fehler

• Ursache: Konflikte mit anderen Skripten oder Browserbeschränkungen.
• Lösung: Nutzen Sie die Entwicklerkonsole des Browsers, um JavaScript-Fehler zu identifizieren und zu beheben.

Erweiterte Tipps

Wenn Sie das Widget anpassen, auf verschiedenen Geräten testen oder auf mehreren Seiten verwenden möchten, sollten Sie Folgendes wissen.

• Widget anpassen: Passen Sie das Erscheinungsbild des Widgets, etwa Größe, Ausrichtung oder Farben, über das Style Panel von Webflow oder mit benutzerdefiniertem CSS an.
• Auf verschiedenen Geräten testen: Nutzen Sie die Tools für responsives Design von Webflow, um sicherzustellen, dass das Widget auf Desktop-, Tablet- und Mobilgeräten reibungslos funktioniert.
• Widget wiederverwenden: Speichern Sie das Embed Element als Component, wenn Sie das Widget auf mehreren Seiten verwenden möchten. Das sorgt für ein einheitliches Design und erleichtert die Verwaltung.

Fazit

Die Integration des ElevenLabs-Widgets für Konversations-KI in Webflow ist dank der Funktionen Embed Element und Custom Code der Plattform unkompliziert. Ob Sie die Interaktion auf einer einzelnen Seite oder auf Ihrer gesamten Website steigern möchten: Folgen Sie den oben genannten Schritten, um zu beginnen.

Wenn Sie weitere Hilfe benötigen, wenden Sie sich an den ElevenLabs-Support oder besuchen Sie die Community-Foren von Webflow für weitere Unterstützung. 

Falls noch nicht geschehen, registrieren Sie sich noch heute für die ElevenLabs KI-Agenten-Plattform, um den Prozess zu starten. 

FAQs