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

Möchten Sie Ihren Kundensupport und Ihr Engagement steigern, indem Sie ElevenLabs’ Conversational AI zu Ihrer Wix-Website hinzufügen? Dann sind Sie hier richtig. Diese Anleitung führt Sie Schritt für Schritt durch den gesamten Prozess und hilft Ihnen, typische Fehler zu vermeiden.

Bevor Sie beginnen

Stellen Sie vor Beginn sicher, dass Sie Folgendes haben:

1. Wix-Premium-Konto: Das Einbetten von individuellem JavaScript ist nur in Premium-Tarifen verfügbar.
2. ElevenLabs-Konto: Sie benötigen ein ElevenLabs-Konto, um Conversational-KI-Sprachagenten zu erstellen. Hier registrieren.
3. Zugriff auf den Wix Editor mit aktiviertem Dev Mode: Sie benötigen den Dev Mode, um individuellen Code zu Ihrer Website hinzuzufügen.

Schritt-für-Schritt-Anleitung

Schritt 1: Ihr ElevenLabs-Widget vorbereiten

1. Melden Sie sich bei Ihrem ElevenLabs-Konto an.
2. Navigieren Sie zum Bereich Conversational AI.
3. Richten Sie Ihren Conversational Agent ein und kopieren Sie den bereitgestellten JavaScript-Einbettungscode.

Schritt 2: Dev Mode in Wix aktivieren

1. Öffnen Sie Ihre Wix-Website im Editor.
2. Klicken Sie im oberen Menü auf Dev Mode, um erweiterte Funktionen wie das Hinzufügen von individuellem Code zu aktivieren.

Hinweis: Wenn Dev Mode nicht angezeigt wird, verwenden Sie den vollständigen Wix Editor und nicht Wix ADI (Artificial Design Intelligence).

Schritt 3: JavaScript-Einbettungscode hinzufügen

1. Gehen Sie im Wix Editor zu Einstellungen > Custom Code.
2. Klicken Sie auf + Add Custom Code.
3. Fügen Sie den JavaScript-Code von ElevenLabs in das dafür vorgesehene Feld ein.
4. Wählen Sie unter Apply Code To die Option All Pages aus – oder eine bestimmte Seite für das Widget.
5. Speichern und veröffentlichen Sie Ihre Änderungen.

Häufige Probleme und Fehlerbehebung

Treten Probleme beim Hinzufügen eines Conversational-AI-Widgets zu Ihrer Wix-Website auf? Mit diesen einfachen Schritten lösen Sie das Problem.

Problem 1: Widget trennt die Verbindung oder wird nicht geladen

• Ursache: Falsche Allowlist-Konfiguration oder ein kostenloser Wix-Tarif.
• Lösung: Stellen Sie sicher, dass Ihre Website-URL entweder aus der Allowlist entfernt wurde oder im ElevenLabs-Dashboard richtig konfiguriert ist.

Problem 2: JavaScript funktioniert nicht

• Ursache: JavaScript-Code wurde nicht korrekt hinzugefügt.
• Lösung: Prüfen Sie noch einmal, ob das JavaScript in das richtige Feld unter Custom Code eingefügt wurde.

Problem 3: Kostenloser Wix-Tarif

• Ursache: Das Einbetten von individuellem JavaScript wird in kostenlosen Wix-Tarifen nicht unterstützt.
• Lösung: Wechseln Sie zu einem Wix-Premium-Tarif.

Erweiterte Tipps

Für die bestmögliche Erfahrung Ihrer Website-Besucher beachten Sie diese erweiterten Best Practices. 

Allowlist anpassen

Wenn Ihr Widget nach dem Einbetten des Codes noch immer nicht funktioniert, gehen Sie wie folgt vor:

1. Melden Sie sich bei Ihrem ElevenLabs-Konto an.
2. Öffnen Sie die Allowlist-Einstellungen für Ihren Conversational-AI-Agenten.
3. Stellen Sie sicher, dass die Domain Ihrer Website korrekt hinzugefügt wurde. Bestehen die Probleme weiter, entfernen Sie Ihre Domain aus der Allowlist und testen Sie erneut.

Testen auf einer Live-Domain

Im Vorschaumodus von Wix funktioniert das Widget möglicherweise nicht korrekt. Veröffentlichen Sie Ihre Website und testen Sie sie auf der Live-Domain, um sicherzustellen, dass alles wie erwartet funktioniert.

Browserübergreifende Kompatibilität testen

Sobald Ihr Widget live ist, testen Sie es in mehreren Browsern wie Chrome, Firefox, Edge und Safari. Einige Funktionen können sich je nach Verarbeitung von JavaScript in den Browsern unterschiedlich verhalten.

1. Öffnen Sie Ihre Website in jedem Browser.
2. Interagieren Sie mit dem Widget und prüfen Sie seine Reaktionsfähigkeit.
3. Achten Sie auf Probleme wie fehlerhaftes Styling oder Funktionsfehler. Treten Probleme auf, überprüfen Sie Ihren JavaScript-Code oder wenden Sie sich an den ElevenLabs-Support.

Mobile Optimierung

Prüfen Sie, ob das Widget auf Mobilgeräten reibungslos funktioniert, da viele Nutzer Websites über Smartphones oder Tablets aufrufen.

1. Verwenden Sie den Mobile Editor von Wix, um das mobile Layout Ihrer Website in der Vorschau anzuzeigen.
2. Testen Sie das Widget auf physischen Geräten, um Funktionalität und Benutzerfreundlichkeit zu bestätigen.
3. Prüfen Sie auf überlappende Elemente oder Formatierungsprobleme. Falls Anpassungen erforderlich sind, optimieren Sie Position und Größe mit den mobilen Design-Tools von Wix.

Tipps zum JavaScript-Debugging

Wenn Ihr Widget nicht wie erwartet funktioniert, helfen die Entwicklertools des Browsers bei der Fehlersuche.

1. Öffnen Sie Ihre Website in einem Browser, empfohlen wird Chrome.
2. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle der Seite und wählen Sie „Untersuchen“, um DevTools zu öffnen.
3. Wechseln Sie zum Tab Console und suchen Sie nach Fehlermeldungen zum Widget.
4. Wenn Fehler angezeigt werden, vergleichen Sie den JavaScript-Einbettungscode und stellen Sie sicher, dass alle erforderlichen URLs zur Allowlist hinzugefügt wurden. So können Sie auch fehlende Abhängigkeiten oder andere Probleme erkennen, die die Funktion des Widgets verhindern.

Fazit

Die Integration des ElevenLabs-Conversational-AI-Widgets in Wix erfordert eine sorgfältige Einrichtung. Mit den richtigen Schritten ist es jedoch schnell einsatzbereit. Stellen Sie sicher, dass Sie einen Wix-Premium-Tarif haben, befolgen Sie die obigen Schritte und beheben Sie häufige Probleme bei Bedarf. Bei weiteren Problemen wenden Sie sich an den ElevenLabs-Support .

Oder registrieren Sie sich noch heute für die Conversational-KI-Agenten-Plattform.