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

Möchten Sie Ihr Kundenerlebnis verbessern? Konversationelle KI kann helfen. Durch das Hinzufügen von ElevenLabs’ Conversational AI zu Ihrer Webflow-Website können Besucher natürliche Gespräche führen, als ob sie tatsächlich mit einem Mitglied Ihres Teams sprechen würden.

In diesem Leitfaden führen wir Sie durch den Prozess, das ElevenLabs Conversational AI-Widget zu Ihrer Webflow-Website hinzuzufügen und das Widget mithilfe von benutzerdefiniertem HTML und JavaScript zu integrieren.

Bevor Sie beginnen

Stellen Sie sicher, dass Sie Folgendes haben:

1. Webflow-Konto: Sie benötigen ein aktives Core-, Growth-, Agency- oder Freelancer-Workspace oder einen Site-Plan, um auf das Embed-Element zuzugreifen.
2. ElevenLabs-Konto: Konfigurieren Sie Ihren Conversational
3. Vertrautheit mit Webflows Designer: Grundlegendes Verständnis, wie man Embed-Elemente in Webflow hinzufügt und bearbeitet, ist hilfreich.

Schritt-für-Schritt-Anleitung

Schritt 1: Bereiten Sie Ihr ElevenLabs-Widget vor

1. Melden Sie sich bei Ihrem ElevenLabs-Konto an.
2. Gehen Sie zum Conversational AI-Bereich.
3. Kopieren Sie den Einbettungscode, der Folgendes enthält:
4. • Ein < script >-Snippet zum Laden der Widget-Funktionalität.
   • Ein < div >-Snippet, um zu definieren, wo das Widget auf der Seite erscheinen soll.

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

Um das Widget auf einer bestimmten Seite anzuzeigen, verwenden Sie das Embed-Element.

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

Hinweis: Das Embed-Element dient als Platzhalter für Ihr Widget im Designer. Das tatsächliche Widget wird erst angezeigt, wenn die Seite veröffentlicht ist.

Schritt 3: Fügen Sie das Skript global hinzu

Um sicherzustellen, dass das Widget korrekt funktioniert, müssen Sie das < script >-Snippet global auf Ihrer Website einfügen.

1. Gehen Sie zu Ihrem Webflow-Dashboard und öffnen Sie die Projekteinstellungen.
2. Navigieren Sie zum Tab Benutzerdefinierter Code.
3. Fügen Sie das < script >-Snippet in den Footer-Code-Bereich ein. Dies stellt sicher, dass das Skript auf allen Seiten geladen wird, auf denen das Widget verwendet wird.
4. Klicken Sie auf Änderungen speichern.

Schritt 4: Veröffentlichen und testen

1. Veröffentlichen Sie Ihre Website auf Webflows Staging-Domain oder Ihrer benutzerdefinierten Domain.
2. Öffnen Sie Ihre Website in einem Browser, um zu überprüfen, 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 bei der Einrichtung der Integration? Keine Sorge – die folgenden Tipps sollten helfen.

1. Widget wird nicht angezeigt

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

2. Widget-Fehlausrichtung

• Ursache: Falsche Platzierung oder Formatierung des Embed-Elements.
• Lösung: Verwenden Sie Webflows Style-Panel, um die Dimensionen und die Ausrichtung des Embed-Elements anzupassen.

3. Fehler

• Ursache: Konflikte mit anderen Skripten oder Browser-Einschränkungen.
• Lösung: Verwenden 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 wiederverwenden möchten, finden Sie hier, was Sie wissen müssen.

• Anpassen des Widgets: Verwenden Sie Webflows Style-Panel oder benutzerdefiniertes CSS, um das Erscheinungsbild des Widgets anzupassen, z. B. Größe, Ausrichtung oder Farben.
• Testen auf verschiedenen Geräten: Verwenden Sie Webflows Tools für responsives Design, um sicherzustellen, dass das Widget nahtlos auf Desktop-, Tablet- und Mobilgeräten funktioniert.
• Wiederverwendung des Widgets: Speichern Sie das Embed-Element als Komponente, wenn Sie das Widget auf mehreren Seiten verwenden möchten. Dies ermöglicht eine konsistente Gestaltung und einfachere Verwaltung.

Abschließende Gedanken

Die Integration des ElevenLabs Conversational AI-Widgets in Webflow ist dank der Embed-Element- und Benutzerdefinierter Code-Funktionen der Plattform einfach. Egal, ob Sie das Engagement verbessern auf einer einzelnen Seite oder auf Ihrer gesamten Website verbessern möchten, folgen Sie den obigen Schritten, um loszulegen.

Für weitere Unterstützung zögern Sie nicht, sich an den ElevenLabs Support zu wenden oder die Community-Foren von Webflow für zusätzliche Anleitungen zu durchsuchen.

Wenn Sie es noch nicht getan haben, melden Sie sich an für die ElevenLabs

Häufige Fragen