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

ElevenLabs’ Conversational AI ist ein leistungsstarkes Kundensupport-Tool, mit dem Sie interaktive, KI-gestützte Erlebnisse schaffen, die das Engagement steigern. Wenn Sie eine WordPress-Website haben, können Sie benutzerdefiniertes HTML und JavaScript sowie dynamische Funktionen wie ElevenLabs’ Conversational AI einfach integrieren.

In diesem Leitfaden zeigen wir Ihnen, wie Sie das Conversational-AI-Widget mit benutzerdefinierten HTML-Blöcken für einzelne Seiten und per Code-Injection für eine globale Funktionalität zu Ihrer WordPress-Website hinzufügen.

Bevor Sie beginnen

Stellen Sie vor dem Start sicher, dass Sie über Folgendes verfügen:

1. WordPress-Tarif: WordPress.com-Nutzer benötigen einen Business- oder Commerce-Tarif, um benutzerdefiniertes JavaScript hinzuzufügen. Bei selbstgehostetem WordPress können Sie Code ohne diese Einschränkungen hinzufügen.
2. ElevenLabs-Konto: Konfigurieren Sie Ihren Conversational-AI-KI-Sprachagenten in ElevenLabs und kopieren Sie den Einbettungscode, der < script >- und < div >-Snippets enthält.
3. Grundkenntnisse in WordPress: Erfahrung mit dem Hinzufügen von Blöcken, Bearbeiten von Seiten oder Verwenden 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 Bereich Conversational AI.
3. Konfigurieren Sie Ihren KI-Agenten und kopieren Sie den Einbettungscode. Er enthält:
4. • Ein < script >-Snippet zum Laden der Widget-Funktionen.
   • Ein < div >-Snippet, das festlegt, wo das Widget erscheint.

Schritt 2: Fügen Sie das Widget mit benutzerdefinierten HTML-Blöcken zu einer bestimmten Seite 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. Gehen Sie zu Seiten und erstellen Sie eine neue Seite oder bearbeiten Sie eine vorhandene.
3. Klicken Sie auf das Symbol +, um einen neuen Block hinzuzufügen.
4. Suchen Sie in den Blockoptionen nach Benutzerdefiniertes HTML und wählen Sie es aus.
5. Fügen Sie das < div >-Snippet aus Ihrem ElevenLabs-Einbettungscode in den Block ein.
6. Klicken Sie auf Vorschau, um zu prüfen, ob das Widget korrekt dargestellt wird.
7. Veröffentlichen oder aktualisieren Sie die Seite, um die Änderungen zu übernehmen.

Schritt 3: Fügen Sie das Skript über ein Plugin oder die Theme-Einstellungen global hinzu

Damit das Widget korrekt funktioniert, müssen Sie das < script >-Snippet global einbinden.

Option A: Plugin verwenden (für Nicht-Entwickler empfohlen)

1. Installieren und aktivieren Sie ein Plugin wie Header Footer Code Manager.
2. Gehen 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: Skript direkt zu Ihrem Theme hinzufügen

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

Schritt 4: Veröffentlichen und testen

1. Rufen Sie die Seite auf, auf der Sie das Widget hinzugefügt haben, und prüfen Sie, ob es angezeigt wird und korrekt funktioniert.
2. Testen Sie das Widget auf mehreren Geräten und in verschiedenen Browsern, damit es reibungslos funktioniert.

Häufige Probleme und Fehlerbehebung

Sie bekommen das Widget nicht zum Laufen? Diese Tipps können helfen. 

Problem 1: Widget wird nicht angezeigt

• Ursache: < script >- oder < div >-Snippets fehlen oder sind falsch platziert.
• Lösung: Prüfen Sie, ob < script > global hinzugefügt wurde und < div > auf der Seite platziert ist.

Problem 2: Widget falsch ausgerichtet

• Ursache: Blockausrichtung oder fehlendes Styling.
• Lösung: Verwenden Sie die Werkzeuge zur Blockausrichtung von WordPress oder fügen Sie benutzerdefiniertes CSS hinzu, um das Widget richtig zu positionieren.

Problem 3: Plugin-Konflikte

• Ursache: Andere Plugins beeinträchtigen die Ausführung von JavaScript.
• Lösung: Deaktivieren Sie Plugins einzeln, um den Konflikt zu identifizieren.

Erweiterte Tipps

Diese Tipps helfen Ihnen dabei, das Widget wie gewünscht einzurichten. 

• Widget anpassen: Gestalten Sie das Widget im Bereich WordPress-Anpassen > Zusätzliches CSS, damit es zum Design Ihrer Website passt.
• Geräteübergreifend testen: Testen Sie das Widget auf Desktop-, Tablet- und Mobilgeräten, um ein einheitliches Nutzererlebnis sicherzustellen.
• Widgets für bestimmte Seiten: Soll das Widget nur auf bestimmten Seiten erscheinen, fügen Sie das < script >-Snippet nicht global hinzu. Binden Sie es stattdessen über ein Plugin oder einen Block ein, der diese Seiten anspricht.

Fazit

Das Hinzufügen des ElevenLabs-Conversational-AI-Widgets zu Ihrer WordPress-Website ist eine effektive Möglichkeit, Besucher durch KI-gestützte Interaktionen einzubinden. Ob Sie es auf einer einzelnen Seite oder auf Ihrer gesamten Website einbetten: WordPress bietet die Tools für eine nahtlose Integration.

Folgen Sie den hier beschriebenen Schritten, testen Sie Ihre Implementierung gründlich und nehmen Sie bei Bedarf Anpassungen vor. Bei Problemen wenden Sie sich gerne an den ElevenLabs-Support .

Oder registrieren Sie sich noch heute für die ElevenLabs Agents Platform und starten Sie den Prozess.