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

Möchten Sie Ihr Kundenerlebnis verbessern? Conversational AI kann helfen. Durch die Integration von ElevenLabs’ Conversational AI in Ihre Webflow-Website können Besucher natürliche Gespräche führen, als ob sie tatsächlich mit einem Teammitglied sprechen würden.

In diesem Leitfaden zeigen wir Ihnen, wie Sie das ElevenLabs Conversational AI-Widget zu Ihrer Webflow-Website hinzufügen und das Widget mit benutzerdefiniertem HTML und JavaScript 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 AI-Agenten in ElevenLabs und kopieren Sie den bereitgestellten Einbettungscode (der < script > und < div > Snippets enthält).
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 wird.

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 Elements-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 angezeigt. 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-Ausrichtung

• Ursache: Falsche Platzierung oder Gestaltung des Embed-Elements.
• Lösung: Verwenden Sie Webflows Style-Panel, um die Dimensionen und 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, sollten Sie Folgendes wissen.

• 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 Responsive-Design-Tools, 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 unkompliziert. Egal, ob Sie das Engagement steigern 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 Webflow-Community-Foren für zusätzliche Anleitungen zu durchsuchen.

Wenn Sie noch nicht angemeldet sind, melden Sie sich noch heute bei ElevenLabs an, um den Prozess zu starten.

FAQs