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

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

In dieser Anleitung zeigen wir Ihnen, wie Sie das Widget zu Ihrer Framer-Website hinzufügen. Sie erfahren, wie Sie Widgets für die gesamte Website oder einzelne Seiten konfigurieren und häufige Probleme beheben.

Bevor Sie beginnen

Stellen Sie vor dem Start sicher, dass Folgendes vorhanden ist:

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. Kenntnisse in Framer: Grundkenntnisse zu Framers Website-Einstellungen und Embed Elements

Schritt-für-Schritt-Anleitung

Schritt 1: ElevenLabs-Widget vorbereiten

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 umfasst:
4. • Ein < script >-Snippet zum Laden der Widget-Funktionen.
   • Ein < div >-Snippet, das festlegt, wo das Widget angezeigt wird.

Schritt 2: Script in Framers Website-Einstellungen einfügen

1. Öffnen Sie Ihr Framer-Projekt.
2. Klicken Sie oben rechts auf Project Settings.
3. Öffnen Sie den 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. Dadurch wird das erforderliche Script für Ihre Website geladen.

Schritt 3: Widget zu einer bestimmten Seite hinzufügen

1. Öffnen Sie in Ihrem Framer-Projekt die Seite, auf der das Widget erscheinen soll.
2. Fügen Sie im Menü Insert über den Bereich Utilities ein Embed Element hinzu.
3. Wählen Sie das Embed Element auf Ihrer Arbeitsfläche aus, um seine Einstellungen zu öffnen.
4. Ändern Sie Type zu HTML.
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 Größe und Ausrichtung 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 im Browser und prüfen Sie, ob das Widget angezeigt wird und korrekt funktioniert.
3. • Hinweis: Benutzerdefinierter Code wird in Framers Preview-Modus nicht angezeigt. Sie müssen die Website veröffentlichen.

Häufige Probleme und Fehlerbehebung

Falls die Integration nicht funktioniert, helfen Ihnen 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 unter Site Settings eingefügt ist und sich das < div >-Snippet im Embed Element befindet.

Problem 2: Widget nur teilweise sichtbar

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

Problem 3: Script-Fehler

• Ursache: Konflikte zwischen Scripts oder blockierte externe Ressourcen.
• Lösung: Öffnen Sie die Browserkonsole und suchen Sie nach JavaScript-Fehlern. Stellen Sie sicher, dass Framer externe Scripts laden darf.

Erweiterte Tipps

Sie benötigen weitergehende Anpassungsoptionen? Diese Tipps helfen Ihnen. 

• Widget anpassen: Verwenden Sie benutzerdefiniertes CSS, um das Widget zu gestalten und nahtlos in das Design Ihrer Website einzubinden.
• Tests auf verschiedenen Geräten: Mit Framers Tools für responsives Design können Sie das Widget einfach in Ansichten für Mobilgeräte, Tablets und Desktops testen und die korrekte Skalierung sicherstellen.
• Widgets zu bestimmten Seiten hinzufügen: Wenn das Widget nur auf bestimmten Seiten erscheinen soll, fügen Sie das < div >-Snippet in ein Embed Element auf den gewünschten Seiten ein und stellen Sie sicher, dass das < script >-Snippet in den Site Settings vorhanden ist.

Abschließende Hinweise 

Mit dieser Anleitung erweitern Sie Ihre Framer-Website um dynamische, KI-gestützte Interaktionen, die auf die Bedürfnisse Ihrer Zielgruppe zugeschnitten sind. Veröffentlichen Sie Ihre Änderungen, testen Sie die Einrichtung und lassen Sie Ihre Conversational AI schon heute mit Besuchern interagieren. Wenn Sie weitere Hilfe benötigen, kontaktieren Sie den ElevenLabs-Support.

Registrieren Sie sich noch heute für KI-Voice-Agents, um loszulegen.