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

Mit dem ElevenLabs-Conversational AI-Widget erweitern Sie Ihre Framer-Website um interaktive, KI-gestützte Gespräche. Ob Sie die Kundenbindung steigern oder Ihren Kundensupport verbessern möchten: Conversational AI hilft Ihnen dabei. 

In diesem Leitfaden erfahren Sie, wie Sie das Widget zu Ihrer Framer-Website hinzufügen. Sie lernen, Widgets für die gesamte Website oder einzelne Seiten zu konfigurieren und häufige Probleme zu beheben.

Bevor Sie beginnen

Stellen Sie vor dem Start Folgendes sicher:

1. Framer-Konto: Zugriff auf ein Framer-Projekt, in dem Sie benutzerdefinierten Code hinzufügen können (verfügbar in kostenpflichtigen Tarifen).
2. ElevenLabs-Konto: Konfigurieren Sie Ihren Conversational-AI-Agenten und kopieren Sie den Einbettungs- code (einschließlich der Snippets < script > und < div >).
3. Grundkenntnisse in Framer: Grundlegendes Verständnis der Site Settings und Embed Elements von Framer

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 Bereich Conversational AI.
3. Konfigurieren Sie Ihren KI-Agenten und kopieren Sie den bereitgestellten Einbettungscode. Er enthält:
4. • Ein < script >-Snippet zum Laden der Widget-Funktionen.
   • Ein < div >-Snippet, das festlegt, wo das Widget angezeigt wird.

Schritt 2: Fügen Sie das Skript zu den Site Settings von Framer hinzu

1. Öffnen Sie Ihr Framer-Projekt.
2. Klicken Sie oben rechts auf Project Settings.
3. Wechseln Sie zum Tab General und scrollen Sie zum Bereich Custom Code.
4. Fügen Sie das < script >-Snippet aus Ihrem ElevenLabs-Einbettungscode in das Feld End of < body > tag ein.
5. Speichern Sie Ihre Änderungen. So wird das erforderliche Skript für Ihre Website geladen.

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

1. Öffnen Sie in Ihrem Framer-Projekt die Seite, auf der das Widget angezeigt werden soll.
2. Fügen Sie über den Bereich Utilities im Menü Insert ein Embed Element hinzu.
3. Wählen Sie das Embed Element auf Ihrer Arbeitsfläche aus, um seine Einstellungen zu öffnen.
4. Stellen Sie Type auf HTML um.
5. Fügen Sie das < div >-Snippet aus dem ElevenLabs-Einbettungscode in das HTML-Feld ein.
6. Positionieren Sie das Embed Element auf Ihrer Arbeitsfläche und passen Sie seine Größe nach Bedarf an.

Schritt 4: Veröffentlichen und testen

1. Klicken Sie auf Publish, um Ihre Änderungen zu veröffentlichen.
2. Öffnen Sie Ihre Website in einem Browser, um zu prüfen, ob das Widget angezeigt wird und korrekt funktioniert.
3. • Hinweis: Benutzerdefinierter Code wird im Preview-Modus von Framer nicht angezeigt. Sie müssen die Website veröffentlichen.

Häufige Probleme und Fehlerbehebung

Die Integration funktioniert nicht? Prüfen Sie diese Tipps zur Fehlerbehebung. 

Problem 1: Widget wird nicht angezeigt

• Ursache: Das < script >- oder < div >-Snippet fehlt oder wurde falsch platziert.
• Lösung: Stellen Sie sicher, dass das < script >-Snippet im Feld End of < body > tag in den Site Settings und das < div >-Snippet im Embed Element eingefügt ist.

Problem 2: Widget ist nur teilweise sichtbar

• Ursache: Das Embed Element hat eine falsche Größe oder Position.
• Lösung: Passen Sie die Abmessungen und Ausrichtung des Embed Elements im Framer Editor an.

Problem 3: Skriptfehler

• Ursache: Konfligierende Skripte oder blockierte externe Ressourcen.
• Lösung: Öffnen Sie die Browserkonsole und prüfen Sie sie auf JavaScript-Fehler. Stellen Sie sicher, dass Framer externe Skripte laden darf.

Erweiterte Tipps

Sie suchen nach erweiterten Anpassungsoptionen? Diese Tipps helfen Ihnen weiter. 

• Widget anpassen: Nutzen Sie eigenes CSS, um das Widget zu gestalten und nahtlos in das Design Ihrer Website zu integrieren.
• Auf verschiedenen Geräten testen: Mit den responsiven Design-Tools von Framer können Sie das Widget einfach in der Mobil-, Tablet- und Desktopansicht testen und die richtige Skalierung sicherstellen.
• Widgets auf bestimmten Seiten hinzufügen: Um das Widget nur auf bestimmten Seiten einzubinden, fügen Sie das < div >-Snippet auf den gewünschten Seiten in ein Embed Element ein und stellen Sie sicher, dass das < script >-Snippet in den Site Settings vorhanden ist.

Abschließende Hinweise 

Mit diesem Leitfaden erweitern Sie Ihre Framer-Website um dynamische, KI-gestützte Interaktionen, abgestimmt auf die Bedürfnisse Ihrer Zielgruppe. Veröffentlichen Sie Ihre Änderungen, testen Sie Ihre Einrichtung und lassen Sie Ihre Conversational AI noch heute mit Besuchern interagieren. Für weitere Unterstützung kontaktieren Sie den ElevenLabs-Support.

Registrieren Sie sich für KI-Sprachagenten und legen Sie noch heute los.