Wix-Chatbot-Integration: Schritt-für-Schritt-Anleitung

Wix hat eine integrierte Chat-Funktion, aber dabei handelt es sich um ein einfaches Live-Chat-Tool, das einen Menschen am anderen Ende erfordert. Ist niemand online, erhalten Besucher ein Kontaktformular. Das reicht nicht aus, wenn jemand um 23 Uhr auf Ihrer Website surft und überlegt, ob er Ihre Dienstleistung bucht oder Ihr Produkt kauft.

Ein KI-Chatbot, der mit den Inhalten Ihrer Website trainiert wurde, beantwortet diese Fragen sofort und ohne menschliches Zutun. Diese Anleitung behandelt zwei Methoden, um einen Chatbot zu Wix hinzuzufügen, führt Sie Schritt für Schritt durch die Einrichtung und erklärt, wie Sie die besten Ergebnisse erzielen.

Wix-Live-Chat vs. KI-Chatbot

Bevor wir zur Installation kommen, lohnt es sich zu verstehen, warum sich ein dedizierter KI-Chatbot von dem unterscheidet, was Wix von Haus aus bietet.

Wix Chat eignet sich, wenn Sie Echtzeit-Gespräche mit echten Menschen führen möchten. Aber die meisten kleinen Unternehmen können nicht den ganzen Tag online sein. Ein KI-Chatbot schließt diese Lücken und übernimmt die wiederkehrenden Fragen, die den Großteil der Besucheranfragen ausmachen.

Sie können beides zusammen nutzen: Der KI-Chatbot übernimmt häufige Fragen automatisch, und Wix Chat steht für die Fälle bereit, in denen der menschliche Kontakt gefragt ist.

Was Sie vor dem Start benötigen

1. Einen trainierten Chatbot auf Agentkit.

Kostenlos registrieren, einen Chatbot erstellen und ihn mit den Inhalten Ihrer Wix-Website trainieren. Der kostenlose Plan bietet Ihnen 1 Chatbot und 50 Nachrichten pro Monat.

Fügen Sie die URL Ihrer Wix-Website als Trainingsquelle hinzu. Der Crawler indexiert Ihre Seiten automatisch. Fügen Sie anschließend Q&A-Paare für Ihre wichtigsten Themen hinzu (Preise, Öffnungszeiten, Buchungsprozess, Rückgaberichtlinie).

Detaillierte Hinweise zum Training finden Sie unter So trainieren Sie einen Chatbot mit Ihren Website-Inhalten.

2. Einen Wix-Premium-Plan.

Um Wix benutzerdefinierten Code hinzuzufügen, benötigen Sie einen Premium-Plan (jede Stufe). Kostenlose Wix-Websites unterstützen keine benutzerdefinierten HTML-Embeds oder Velo.

Methode 1: HTML-Embed (empfohlen)

Dies ist die einfachste Methode und funktioniert für alle Wix-Nutzer mit einem Premium-Plan. Sie fügen das Chatbot-Skript über ein HTML-Embed-Element im Wix-Editor hinzu.

Schritt 1: Embed-Code abrufen

Gehen Sie im Agentkit-Dashboard zu den Einstellungen Ihres Chatbots und dann zu Veröffentlichen. Sie sehen zwei Embed-Optionen. Verwenden Sie für Wix den iFrame-Embed-Code:

<iframe
  src="https://cdn.agentkit.ai/embed/your-chatbot-id"
  style="width: 100%; height: 600px; border: none;"
  allow="clipboard-write">
</iframe>

Sie können auch das JavaScript-Widget verwenden, aber das HTML-Embed-Element von Wix verarbeitet iFrames zuverlässiger als Script-Tags. Die iFrame-Methode ist der empfohlene Ansatz für Wix.

Schritt 2: HTML-Embed zu Ihrer Seite hinzufügen

1. Öffnen Sie den Wix-Editor für Ihre Website.
2. Klicken Sie auf die Schaltfläche Hinzufügen (das blaue „+“-Symbol) in der linken Symbolleiste.
3. Wählen Sie Code einbetten und dann HTML einbetten.
4. Ein HTML-Element erscheint auf Ihrer Seite. Klicken Sie darauf und wählen Sie Code eingeben.
5. Wechseln Sie zum Tab Code (nicht zum Tab URL).
6. Fügen Sie den iFrame-Code aus Schritt 1 ein.
7. Klicken Sie auf Aktualisieren.
8. Passen Sie Größe und Position des Elements so an, dass der Chatbot dort erscheint, wo Sie ihn haben möchten.

Schritt 3: Website-weit einrichten (optional)

Die HTML-Embed-Methode fügt den Chatbot nur einer einzelnen Seite hinzu. Wenn Sie den Chatbot auf jeder Seite haben möchten, haben Sie zwei Möglichkeiten:

Option A: Zu Kopf- oder Fußzeile der Website hinzufügen.

1. Klicken Sie im Wix-Editor auf den Bereich Kopfzeile oder Fußzeile Ihrer Seite.
2. Fügen Sie das HTML-Embed-Element zur Kopf- oder Fußzeile hinzu.
3. Da Kopf- und Fußzeile auf allen Seiten erscheinen, ist der Chatbot website-weit verfügbar.

Option B: Die Funktion „Custom Element“ des Wix App Market nutzen.

1. Gehen Sie zu Hinzufügen dann Code einbetten dann Custom Element.
2. Konfigurieren Sie es so, dass Ihr Chatbot-Skript auf allen Seiten geladen wird.

Option A ist für die meisten Nutzer einfacher.

Schritt 4: Veröffentlichen und überprüfen

1. Klicken Sie oben rechts im Wix-Editor auf Veröffentlichen.
2. Besuchen Sie Ihre Live-Website (nicht die Editor-Vorschau).
3. Bestätigen Sie, dass der Chatbot erscheint und auf Testnachrichten antwortet.
4. Prüfen Sie das Layout auch auf Mobilgeräten.

Methode 2: Velo by Wix (für Entwickler)

Velo ist die integrierte Entwicklungsplattform von Wix. Wenn Sie mit JavaScript vertraut sind, gibt Ihnen Velo mehr Kontrolle darüber, wann und wie der Chatbot geladen wird.

Wann Sie Velo verwenden sollten

• Sie möchten, dass der Chatbot bedingt geladen wird (z. B. nur für angemeldete Mitglieder oder nur auf bestimmten Seiten).
• Sie müssen dynamische Daten an den Chatbot übergeben (z. B. den Namen des Besuchers oder die Mitgliedschaftsstufe).
• Sie möchten Chatbot-Aktionen programmatisch auslösen.

Schritt 1: Velo aktivieren

1. Klicken Sie im Wix-Editor in der oberen Menüleiste auf Dev-Modus.
2. Klicken Sie auf Dev-Modus aktivieren.
3. Das Code-Panel erscheint am unteren Rand des Editors.

Schritt 2: Skript über den Seitencode hinzufügen

1. Wählen Sie die Seite aus, auf der der Chatbot erscheinen soll.
2. Im Code-Panel unten sehen Sie eine Datei für die Seite (z. B. Home.js).
3. Fügen Sie folgenden Code hinzu, um das Agentkit-Widget dynamisch zu laden:

$w.onReady(function () {
  const script = document.createElement('script');
  script.src = 'https://cdn.agentkit.ai/widget.js';
  script.setAttribute('data-chatbot', 'your-chatbot-id');
  script.async = true;
  document.body.appendChild(script);
});

4. Speichern und veröffentlichen.

Schritt 3: Website-weites Laden über masterPage.js

Um den Chatbot auf jeder Seite zu laden:

1. Öffnen Sie im Code-Panel masterPage.js (diese Datei läuft auf allen Seiten).
2. Fügen Sie denselben Code zum Laden des Skripts innerhalb der onReady-Funktion hinzu.
3. Speichern und veröffentlichen.

Beispiel für bedingtes Laden

Wenn Sie den Chatbot nur auf bestimmten Seiten anzeigen möchten:

// masterPage.js
import wixLocation from 'wix-location';

$w.onReady(function () {
  const path = wixLocation.path;
  const chatbotPages = ['services', 'pricing', 'contact', 'faq'];

  if (chatbotPages.some(page => path.includes(page))) {
    const script = document.createElement('script');
    script.src = 'https://cdn.agentkit.ai/widget.js';
    script.setAttribute('data-chatbot', 'your-chatbot-id');
    script.async = true;
    document.body.appendChild(script);
  }
});

Dadurch wird der Chatbot nur auf Ihren Seiten Services, Pricing, Contact und FAQ geladen.

Chatbot-Optionen für Wix im Vergleich

Mehrere Chatbot-Tools funktionieren mit Wix. Hier sehen Sie, wie die wichtigsten Optionen im Vergleich abschneiden.

Wenn Sie KI-gestützte Antworten wollen, die mit Ihren eigenen Inhalten trainiert sind und die flexibelsten Embedding-Optionen bieten, ist Agentkit die stärkste Wahl. Wenn Sie einen regelbasierten Flow-Builder ohne KI benötigen, ist Joonbot genau dafür gebaut. Und wenn Sie nur einfachen Mensch-zu-Mensch-Chat brauchen, ist Wix Chat bereits in Ihrem Plan enthalten.

Den Chatbot für Ihre Wix-Website anpassen

Sobald der Chatbot live ist, konfigurieren Sie diese Einstellungen im Agentkit-Dashboard, um die besten Ergebnisse zu erzielen.

Markenfarben und Position

Passen Sie in den Einstellungen Ihres Chatbots das Erscheinungsbild des Widgets an:

• Primärfarbe: Passen Sie sie an die Akzentfarbe Ihrer Wix-Website an.
• Position: Unten rechts ist die Standardeinstellung und funktioniert für die meisten Websites. Wechseln Sie zu unten links, wenn Ihre Wix-Website unten rechts ein anderes Element hat, das sich damit überschneidet.
• Willkommensnachricht: Schreiben Sie etwas, das speziell zu Ihrem Unternehmen passt. „Hallo! Ich kann Fragen zu unseren Leistungen, Preisen und Verfügbarkeiten beantworten“ ist besser als „Wie kann ich helfen?“.

Domain-Beschränkung

Fügen Sie Ihre Wix-Domain zur Liste der erlaubten Domains hinzu. Dazu gehören sowohl Ihre eigene Domain (z. B. ihrunternehmen.com) als auch die Standard-Wix-URL (z. B. ihrunternehmen.wixsite.com/ihreseite). Die Domain-Beschränkung verhindert die unbefugte Nutzung Ihres Chatbots.

Individuelle Anweisungen

Fügen Sie Anweisungen hinzu, die das Verhalten des Chatbots für Ihr spezifisches Unternehmen prägen:

• „Erwähnen Sie bei Preisfragen immer die kostenlose Beratungsoption.“
• „Empfehlen Sie bei Fragen zur Verfügbarkeit, über die Buchungsseite zu buchen.“
• „Versprechen Sie niemals konkrete Liefertermine. Verweisen Sie stattdessen darauf, dass Interessenten Sie für aktuelle Zeitrahmen kontaktieren können.“
• „Wenn eine Frage nicht beantwortet werden kann, bieten Sie an, die E-Mail-Adresse für eine Rückmeldung zu erfassen.“

Lead-Erfassung

Aktivieren Sie die Aktion „Leads erfassen“, um E-Mail-Adressen von interessierten Besuchern zu sammeln. Das ist besonders wertvoll für Dienstleistungsunternehmen auf Wix, bei denen die Umwandlung eines Besuchers in einen Lead das Hauptziel ist.

Erfasste Leads erscheinen in Ihrem Agentkit-Dashboard. Verbinden Sie sie über Zapier mit Ihrem E-Mail-Marketing-Tool oder CRM. Weitere Details finden Sie im Integrationsleitfaden.

Trainingstipps für Wix-Websites

Wix-Websites verwenden oft visuelle Layouts, Animationen und interaktive Elemente, die einschränken können, was ein Web-Crawler erfassen kann. So maximieren Sie das Wissen Ihres Chatbots.

Den Crawl mit Q&A-Paaren ergänzen

Testen Sie den Chatbot nach dem Training mit Ihrer URL im Playground. Erstellen Sie für jede Frage, die er schlecht beantwortet, ein Q&A-Paar mit der idealen Antwort. Häufige Themen, die Sie abdecken sollten:

Ergänzende Dokumente hochladen

Wenn Sie PDFs, Speisekarten, Broschüren oder Servicekataloge haben, laden Sie diese als Dokumentenquellen hoch. Sie geben dem Chatbot detaillierte Informationen, die möglicherweise gar nicht auf Ihrer Website stehen.

Trainingsdaten aktuell halten

Wenn Sie Ihre Wix-Website aktualisieren, trainieren Sie den Chatbot neu. Im Standard-Plan ($119.99/Monat) oder höher übernimmt das automatische Retraining dies automatisch. Im Free- oder Hobby-Plan lösen Sie nach größeren Inhaltsänderungen ein manuelles Retraining über das Agentkit-Dashboard aus.

Fehlerbehebung

Der Chatbot erscheint nach der Veröffentlichung nicht

• Prüfen Sie Ihren Wix-Plan. Für benutzerdefinierten Code ist ein Premium-Plan erforderlich.
• Sehen Sie sich die Live-Website an, nicht den Editor. Die Wix-Editor-Vorschau führt benutzerdefinierte Skripte nicht immer aus.
• Leeren Sie Ihren Browser-Cache oder verwenden Sie ein Inkognito-Fenster.
• Prüfen Sie den HTML-Embed-Code. Stellen Sie sicher, dass Sie das vollständige iFrame- oder Script-Tag ohne zusätzliche Zeichen eingefügt haben.

Das HTML-Embed-Element zeigt eine leere Fläche

• Vergrößern Sie die Höhe des HTML-Embed-Elements. Die Standardgröße ist möglicherweise zu klein, um die Chat-Oberfläche darzustellen.
• Stellen Sie sicher, dass die src-URL des iFrames korrekt ist und Ihre Chatbot-ID enthält.
• Prüfen Sie die Browser-Konsole (F12) auf blockierte Inhalte.

Der Chatbot funktioniert auf dem Desktop, aber nicht auf Mobilgeräten

Wix übernimmt responsives Design automatisch, aber HTML-Embed-Elemente benötigen für Mobilgeräte manchmal eine manuelle Anpassung. Im Wix-Editor:

1. Wechseln Sie zur mobilen Editor-Ansicht.
2. Suchen Sie das HTML-Embed-Element.
3. Passen Sie Größe und Position für Mobilgeräte an.
4. Veröffentlichen und testen.

Wenn Sie das JavaScript-Widget über Velo (Methode 2) verwenden, ist das Widget standardmäßig responsiv und sollte ohne Anpassung auf allen Bildschirmgrößen funktionieren.

Der Chatbot antwortet ungenau

Das ist ein Trainingsproblem, kein Embed-Problem. Gehen Sie ins Agentkit-Dashboard und:

1. Prüfen Sie, welche Seiten erfolgreich gecrawlt wurden.
2. Fügen Sie Q&A-Paare für Themen mit schlechten Antworten hinzu.
3. Testen Sie im Playground, bis die Antworten zufriedenstellend sind.
4. Fügen Sie individuelle Anweisungen hinzu, um Tonfall und Verhalten des Chatbots zu steuern.

Preisüberlegungen

So ordnet sich die Agentkit-Preisgestaltung typischen Wix-Anwendungsfällen zu.

Die jährliche Abrechnung spart bei allen kostenpflichtigen Plänen etwa 20 %.

Nächste Schritte

Ihre Wix-Website hat jetzt einen KI-Chatbot, der Besucherfragen rund um die Uhr beantwortet. Das sollten Sie als Nächstes angehen:

1. Trainingsdaten verfeinern, basierend auf der ersten Woche der Gespräche. Achten Sie auf Muster in den Besucherfragen und schließen Sie Lücken in Ihrem Training.
2. Lead-Erfassung aktivieren, um Gespräche in Kontakte zu verwandeln. Hier zahlt sich der Chatbot aus.
3. Ihre Tools verbinden über Zapier oder Webhooks. Leiten Sie Leads an Google Sheets, Mailchimp, HubSpot oder was auch immer Ihr Team nutzt. Weitere Details finden Sie im Integrationsleitfaden.
4. Die Squarespace-Anleitung lesen, wenn Sie Websites auf anderen Plattformen betreiben: Chatbot zu Squarespace hinzufügen.
5. Alle Embedding-Optionen erkunden im vollständigen Embedding-Leitfaden.

Erstellen Sie Ihren Chatbot kostenlos →

Keine Kreditkarte erforderlich.