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

Das ElevenLabs Conversational AI Widget ermöglicht es Ihnen, Ihre Framer-Website mit interaktiven, KI-gesteuerten Gesprächen zu bereichern. Egal, ob Sie Kundenengagement steigern oder Ihren Kundensupport verbessern möchten, Conversational AI kann helfen.

In diesem Leitfaden führen wir Sie durch die Schritte, um das Widget zu Ihrer Framer-Website hinzuzufügen. Sie lernen, wie Sie siteweite oder seitenbezogene Widgets konfigurieren und häufige Probleme beheben.

Bevor Sie beginnen

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

1. Framer-Konto: Zugriff auf ein Framer-Projekt mit der Möglichkeit, benutzerdefinierten Code hinzuzufügen (verfügbar in kostenpflichtigen Plänen).
2. ElevenLabs-Konto: Konfigurieren Sie Ihren Conversational AI-Agenten und kopieren Sie dessen Einbettungscode (einschließlich der < script > und < div > Snippets).
3. Vertrautheit mit Framer: Grundlegendes Verständnis der Framer-Site-Einstellungen und Einbettungselemente

Schritt-für-Schritt-Anleitung

Schritt 1: Bereiten Sie Ihr ElevenLabs-Widget vor

1. Melden Sie sich bei Ihrem ElevenLabs-Konto an.
2. Navigieren Sie zum Conversational AI-Bereich.
3. Konfigurieren Sie Ihren KI-Agenten und kopieren Sie den bereitgestellten Einbettungscode, der Folgendes enthält:
4. • Ein < script > Snippet, um die Funktionalität des Widgets zu laden.
   • Ein < div > Snippet, um zu definieren, wo das Widget erscheinen wird.

Schritt 2: Fügen Sie das Skript zu den Framer-Site-Einstellungen hinzu

1. Öffnen Sie Ihr Framer-Projekt.
2. Klicken Sie in der oberen rechten Ecke auf Projekteinstellungen.
3. Navigieren Sie zum Tab Allgemein und scrollen Sie nach unten zum Abschnitt Benutzerdefinierter Code.
4. Fügen Sie das < script > Snippet aus Ihrem ElevenLabs-Einbettungscode in das Feld Ende des < body > Tags ein.
5. Speichern Sie Ihre Änderungen. Dieser Schritt stellt sicher, dass das erforderliche Skript für Ihre Website geladen wird.

Schritt 3: Fügen Sie das Widget zu einer bestimmten Seite hinzu

1. Gehen Sie in Ihrem Framer-Projekt zu der Seite, auf der das Widget erscheinen soll.
2. Fügen Sie ein Einbettungselement aus dem Abschnitt Dienstprogramme des Einfügen-Menüs hinzu.
3. Wählen Sie das Einbettungselement auf Ihrer Leinwand aus, um auf dessen Einstellungen zuzugreifen.
4. Wechseln Sie den Typ zu HTML.
5. Fügen Sie das < div > Snippet aus dem ElevenLabs-Einbettungscode in das HTML-Feld ein.
6. Positionieren und dimensionieren Sie das Einbettungselement auf Ihrer Leinwand nach Bedarf.

Schritt 4: Veröffentlichen und testen

1. Klicken Sie auf Veröffentlichen, um Ihre Änderungen live zu schalten.
2. Öffnen Sie Ihre Website in einem Browser, um zu überprüfen, ob das Widget korrekt angezeigt wird und funktioniert.
3. • Hinweis: Benutzerdefinierter Code wird im Framer-Vorschau-Modus nicht angezeigt – er muss veröffentlicht werden, um sichtbar zu sein.

Häufige Probleme und Fehlerbehebung

Wenn Sie Schwierigkeiten haben, die Integration zum Laufen zu bringen, keine Sorge – sehen Sie sich die folgenden Tipps zur Fehlerbehebung an.

Problem 1: Widget wird nicht angezeigt

• Ursache: Fehlendes oder falsch platziertes < script > oder < div > Snippet.
• Lösung: Stellen Sie sicher, dass das < script > Snippet im Feld Ende des < body > Tags in den Site-Einstellungen hinzugefügt ist und das < div > Snippet im Einbettungselement.

Problem 2: Widget nur teilweise sichtbar

• Ursache: Einbettungselement ist falsch dimensioniert oder positioniert.
• Lösung: Passen Sie die Abmessungen und die Ausrichtung des Einbettungselements im Framer-Editor an.

Problem 3: Skriptfehler

• Ursache: Konfliktierende Skripte oder blockierte externe Ressourcen.
• Lösung: Öffnen Sie die Browser-Konsole, um nach JavaScript-Fehlern zu suchen. Stellen Sie sicher, dass Framer Berechtigungen hat, externe Skripte zu laden.

Erweiterte Tipps

Suchen Sie nach fortgeschritteneren Anpassungsoptionen? Diese Tipps sollten helfen.

• Anpassen des Widgets: Verwenden Sie benutzerdefiniertes CSS, um das Widget zu gestalten und nahtlos in das Design Ihrer Website zu integrieren.
• Testen auf verschiedenen Geräten: Framers Tools für responsives Design erleichtern das Testen des Widgets auf mobilen Geräten, Tablets und Desktops, um eine ordnungsgemäße Skalierung sicherzustellen.
• Hinzufügen von Widgets zu bestimmten Seiten: Um das Widget nur auf bestimmten Seiten einzuschließen, fügen Sie das < div > Snippet zu einem Einbettungselement auf den gewünschten Seiten hinzu und stellen Sie sicher, dass das < script > Snippet in den Site-Einstellungen vorhanden ist.

Abschließende Gedanken

Indem Sie diesem Leitfaden folgen, können Sie Ihre Framer-Website mit dynamischen, KI-gesteuerten Interaktionen bereichern, die auf die Bedürfnisse Ihres Publikums zugeschnitten sind. Veröffentlichen Sie Ihre Änderungen, testen Sie Ihre Einrichtung und lassen Sie Ihre Conversational AI noch heute Besucher ansprechen. Für weitere Unterstützung kontaktieren Sie ElevenLabs Support.

Registrieren Sie sich noch heute für Conversational AI, um loszulegen.