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

ElevenLabs’ Conversational AI ist ein leistungsstarkes Kundensupport Tool zur Erstellung interaktiver, KI-gesteuerter Erlebnisse, die Engagement steigern. Wenn Sie eine WordPress-Website haben, können Sie benutzerdefiniertes HTML und JavaScript einfach integrieren, einschließlich dynamischer Funktionen wie ElevenLabs’ Conversational AI.

In diesem Leitfaden zeigen wir Ihnen, wie Sie das Conversational AI-Widget zu Ihrer WordPress-Seite hinzufügen, indem Sie benutzerdefinierte HTML-Blöcke für bestimmte Seiten und Code-Injektion für globale Funktionen verwenden.

Bevor Sie beginnen

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

1. WordPress-Plan: Für WordPress.com-Nutzer ist ein Business- oder Commerce-Plan erforderlich, um benutzerdefiniertes JavaScript hinzuzufügen. Selbst gehostete WordPress-Nutzer können Code ohne diese Einschränkungen hinzufügen.
2. ElevenLabs-Konto: Konfigurieren Sie Ihren Conversational AI-Agenten in ElevenLabs und kopieren Sie den Einbettungscode, der < script > und < div > Snippets enthält.
3. Grundlegende WordPress-Kenntnisse: Vertrautheit mit dem Hinzufügen von Blöcken, Bearbeiten von Seiten oder der Verwendung von Plugins 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. Konfigurieren Sie Ihren KI-Agenten und kopieren Sie den 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 Widget zu einer bestimmten Seite mit benutzerdefinierten HTML-Blöcken hinzu

Um das Widget auf einer bestimmten Seite anzuzeigen, verwenden Sie den benutzerdefinierten HTML-Block von WordPress.

1. Melden Sie sich bei Ihrem WordPress-Dashboard an.
2. Navigieren Sie zu Seiten und erstellen Sie entweder eine neue Seite oder bearbeiten Sie eine bestehende.
3. Klicken Sie auf das + Symbol, um einen neuen Block hinzuzufügen.
4. Suchen Sie nach benutzerdefiniertem HTML und wählen Sie es aus den Blockoptionen aus.
5. Fügen Sie das < div > Snippet aus Ihrem ElevenLabs-Einbettungscode in den Block ein.
6. Klicken Sie auf Vorschau, um zu bestätigen, dass das Widget korrekt gerendert wird.
7. Veröffentlichen oder aktualisieren Sie die Seite, um die Änderungen live zu schalten.

Schritt 3: Fügen Sie das Skript global mit einem Plugin oder Theme-Einstellungen hinzu

Um sicherzustellen, dass das Widget ordnungsgemäß funktioniert, müssen Sie das < script > Snippet global einfügen.

Option A: Verwendung eines Plugins (empfohlen für Nicht-Entwickler)

1. Installieren und aktivieren Sie ein Plugin wie Header Footer Code Manager.
2. Navigieren Sie zu den Plugin-Einstellungen und erstellen Sie ein neues Code-Snippet.
3. Fügen Sie das < script > Snippet in den Footer-Bereich ein.
4. Legen Sie fest, dass das Snippet auf allen Seiten ausgeführt wird.
5. Speichern Sie Ihre Änderungen.

Option B: Hinzufügen des Skripts direkt zu Ihrem Theme

1. Gehen Sie zu Design > Theme-Editor in Ihrem WordPress-Dashboard.
2. Öffnen Sie die footer.php-Datei Ihres aktiven Themes.
3. Fügen Sie das < script > Snippet direkt vor dem schließenden < /body > Tag ein.
4. Speichern Sie die Datei.

Schritt 4: Veröffentlichen und testen

1. Besuchen Sie die Seite, auf der Sie das Widget hinzugefügt haben, um zu bestätigen, dass es korrekt angezeigt wird und funktioniert.
2. Testen Sie das Widget auf mehreren Geräten und Browsern, um sicherzustellen, dass es nahtlos funktioniert.

Häufige Probleme und Fehlerbehebung

Haben Sie Schwierigkeiten, das Widget zum Laufen zu bringen? Diese Tipps könnten helfen.

Problem 1: Widget wird nicht angezeigt

• Ursache: Fehlende oder falsch platzierte < script > oder < div > Snippets.
• Lösung: Überprüfen Sie, ob das < script > global hinzugefügt und das < div > auf der Seite platziert ist.

Problem 2: Widget falsch ausgerichtet

• Ursache: Blockausrichtung oder fehlende Formatierung.
• Lösung: Verwenden Sie die Blockausrichtungswerkzeuge von WordPress oder fügen Sie benutzerdefiniertes CSS hinzu, um das Widget korrekt zu positionieren.

Problem 3: Plugin-Konflikte

• Ursache: Andere Plugins stören die JavaScript-Ausführung.
• Lösung: Deaktivieren Sie Plugins nacheinander, um den Konflikt zu identifizieren.

Erweiterte Tipps

Sehen Sie sich diese Tipps an, um weitere Hilfe zu erhalten, damit das Widget wie gewünscht funktioniert. 

• Anpassen des Widgets: Verwenden Sie den Bereich Design > Zusätzliches CSS von WordPress, um das Widget zu gestalten und sicherzustellen, dass es zum Design Ihrer Website passt.
• Testen auf verschiedenen Geräten: Testen Sie das Widget auf Desktop-, Tablet- und Mobilgeräten, um ein konsistentes Benutzererlebnis sicherzustellen.
• Seiten-spezifische Widgets: Wenn Sie möchten, dass das Widget nur auf bestimmten Seiten erscheint, vermeiden Sie es, das < script > Snippet global hinzuzufügen. Fügen Sie es stattdessen in ein Plugin oder einen Block ein, der diese Seiten anspricht.

Abschließende Gedanken

Das Hinzufügen des ElevenLabs Conversational AI-Widgets zu Ihrer WordPress-Website ist eine effektive Möglichkeit, Besucher mit KI-gesteuerten Interaktionen zu binden. Egal, ob Sie es auf einer einzelnen Seite oder auf Ihrer gesamten Website einbetten, WordPress bietet die Werkzeuge, die Sie für eine nahtlose Integration benötigen.

Befolgen Sie die hier beschriebenen Schritte, testen Sie Ihre Implementierung gründlich und nehmen Sie bei Bedarf Anpassungen vor. Wenn Sie auf Probleme stoßen, zögern Sie nicht, den ElevenLabs Support um Unterstützung zu bitten.

Oder, falls Sie es noch nicht getan haben, melden Sie sich noch heute bei ElevenLabs an, um den Prozess zu starten.