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

Möchten Sie Ihre Ghost-Website auf die nächste Stufe heben? ElevenLabs’ Conversational AI verwandelt Kundenbindung. Durch die Integration von ElevenLabs’ Conversational AI in Ihre Ghost-Plattform können Sie interaktive, lebensechte Kundensupport-Gespräche anbieten, die Ihre Zielgruppe näher an Ihre Marke bringen.

Bevor Sie beginnen

Stellen Sie sicher, dass Sie Folgendes haben, bevor Sie starten:

1. Eine Ghost-Website: Sie benötigen einen kostenpflichtigen Plan oder eine selbst gehostete Ghost-Instanz. Benutzerdefiniertes JavaScript wird im kostenlosen Plan von Ghost nicht unterstützt.
2. Zugang zum Ghost-Admin-Panel: Sie benötigen Zugriff auf die Code Injection-Einstellungen oder den Editor.
3. Ein ElevenLabs-Konto: Konfigurieren Sie einen Conversational AI-Agenten und kopieren Sie dessen JavaScript-Einbettungscode.

Schritt-für-Schritt-Anleitung

Option 1: Hinzufügen des Widgets global mit Code Injection

Wenn Sie möchten, dass das Widget auf allen Seiten Ihrer Website erscheint, verwenden Sie die Code Injection-Funktion von Ghost.

Schritt 1: Bereiten Sie Ihr Widget vor

1. Melden Sie sich bei Ihrem ElevenLabs-Konto an.
2. Navigieren Sie zum Conversational AI-Bereich und konfigurieren Sie Ihren Agenten.
3. Kopieren Sie den bereitgestellten JavaScript-Einbettungscode.

Schritt 2: Zugriff auf die Code Injection-Einstellungen

1. Melden Sie sich beim Ghost-Admin-Panel an.
2. Navigieren Sie zu Einstellungen > Code Injection.

Schritt 3: Einbetten des JavaScript-Codes

1. Fügen Sie den kopierten JavaScript-Code in das Site Footer-Feld ein.
2. Speichern Sie Ihre Änderungen.

Schritt 4: Testen der Integration

1. Öffnen Sie Ihre Ghost-Website, um sicherzustellen, dass das Widget erscheint und wie erwartet funktioniert.
2. Wenn es nicht angezeigt wird, überprüfen Sie die Platzierung des Codes und Ihre ElevenLabs-Konfiguration.

Option 2: Hinzufügen des Widgets zu bestimmten Seiten oder Beiträgen mit dem Pluszeichen

Wenn Sie bevorzugen, dass das Widget nur auf bestimmten Seiten oder Beiträgen erscheint, können Sie es direkt im Inhalt mit dem Pluszeichen im Ghost-Editor einbetten.

Schritt 1: Bereiten Sie Ihr Widget vor

1. Kopieren Sie den JavaScript-Einbettungscode aus Ihrem ElevenLabs-Konto.

Schritt 2: Bearbeiten Sie einen Beitrag oder eine Seite in Ghost

1. Öffnen Sie den Ghost-Editor für die Seite oder den Beitrag, auf dem Sie das Widget hinzufügen möchten.
2. Klicken Sie auf das Pluszeichen (+), um das Blockmenü zu öffnen.

Schritt 3: Einfügen eines HTML-Blocks

1. Wählen Sie HTML aus den Blockoptionen.
2. Fügen Sie den JavaScript-Code in den HTML-Block ein.

Schritt 4: Veröffentlichen und testen

1. Speichern und veröffentlichen Sie die Seite oder den Beitrag.
2. Öffnen Sie die Seite, um zu bestätigen, dass das Widget angezeigt wird und wie erwartet funktioniert.

Häufige Probleme und Fehlerbehebung

Funktioniert die Integration nicht wie erwartet? Befolgen Sie die unten stehenden Schritte, um die Probleme zu lösen, mit denen Sie konfrontiert sind.

Problem 1: Widget lädt nicht

• Ursache: JavaScript-Code ist falsch hinzugefügt oder unvollständig.
• Lösung: Überprüfen Sie die Platzierung des Codes und bestätigen Sie, dass Ihr ElevenLabs-Agent korrekt konfiguriert ist.

Problem 2: Skriptkonflikte

• Ursache: Andere benutzerdefinierte Skripte in den Code Injection-Einstellungen können mit dem Widget in Konflikt stehen.
• Lösung: Deaktivieren Sie vorübergehend andere Skripte, um auf Konflikte zu testen. Fügen Sie sie einzeln wieder hinzu, um das Problem zu identifizieren.

Erweiterte Tipps

Suchen Sie nach weiteren Möglichkeiten, das Widget anzupassen? Schauen Sie sich die folgenden Tipps an.

• Anpassen der Widget-Platzierung: Verwenden Sie CSS, um das Erscheinungsbild oder die Position des Widgets anzupassen, wenn es über Code Injection oder den HTML-Block hinzugefügt wird. Wenn Sie möchten, dass das Widget an einem konsistenten Ort erscheint (z. B. im Footer oder in der Seitenleiste), bearbeiten Sie Ihre Ghost-Theme-Dateien. Fügen Sie den JavaScript-Einbettungscode in die default.hbs-Datei ein und laden Sie Ihr Theme erneut hoch.
• Mobile Reaktionsfähigkeit: Testen Sie das Widget auf mobilen Geräten, um sicherzustellen, dass es korrekt skaliert und funktioniert. Verwenden Sie die responsive Vorschau von Ghost oder testen Sie direkt auf physischen Geräten.
• Cross-Browser-Tests: Überprüfen Sie, ob das Widget in allen gängigen Browsern funktioniert, einschließlich Chrome, Firefox, Safari und Edge, um Konsistenz für alle Benutzer sicherzustellen.
• Debugging von JavaScript-Problemen: Verwenden Sie die Entwickler-Tools des Browsers (z. B. Chrome DevTools), um Fehler in der Konsole zu überprüfen. Beheben Sie Probleme wie fehlende Abhängigkeiten oder Skriptkonflikte.

Abschließende Gedanken

Die Integration des ElevenLabs Conversational AI-Widgets in Ghost ist einfach und flexibel und ermöglicht es Ihnen, die Interaktivität Ihrer Website mit minimalem Aufwand zu verbessern. Wenn Sie auf Probleme stoßen, überprüfen Sie die Schritte, testen Sie gründlich oder kontaktieren Sie ElevenLabs Support bei Bedarf.

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