HILFEZENTRUM

Web-Chat-Plugin mit KI

Fügen Sie Ihrer Website einen intelligenten Chat hinzu, der Besucher automatisch mit der gleichen KI wie WhatsApp betreut.

Was ist das Chat-Plugin?

Das Chat-Plugin ermöglicht die Hinzufügung eines KI-Assistenten auf jeder Webseite. Die Besucher können direkt mit der KI chatten, ohne WhatsApp zu benötigen, und Sie können sie mit denselben Integrationen und Funktionen betreuen, die Sie bereits eingerichtet haben.

  • Automatische Antworten mit KI, die auf Ihr Unternehmen trainiert ist
  • Zugang zur Suche nach Produkten, Kunden und benutzerdefinierten Funktionen
  • Mehrsprachige Unterstützung mit automatischer Übersetzung
  • 10 anpassbare Design-Themen
  • Schwebender Modus (Taste in der Ecke) oder eingebettet (innerhalb eines Divs)

Wie man das Plugin aktiviert

  1. Öffne das Dashboard von WAzion
  2. Im Seitenmenü klicken Sie auf „Plugins“ → „Chat“
  3. Schalte den Schalter „Plugin aktiv“ ein
  4. Fügen Sie Ihre Domain unter „Autorisierte Domains“ hinzu (z.B. mitienda.com)
  5. Kopiere den Integrationscode und füge ihn auf deiner Webseite ein

Integrationscode

Kopiere diesen Code und füge ihn direkt vor dem Schließen des </body>-Tags deiner Webseite ein:

<!-- WAzion Chat Web -->
<script>
(function(w,d,s,t){if(w.WazionPlugin)return;w.WazionPlugin={token:t};
var js=d.createElement(s);js.async=true;
js.src='https://www.wazion.com/plugins/chat/embed.js';
js.dataset.token=t;d.body.appendChild(js);
})(window,document,'script','TU_TOKEN_AQUI');
</script>

Das Token wird automatisch generiert, sobald das Plugin aktiviert wird. Sie finden es im Abschnitt der Chateinstellungen.

Eingebetteter Modus (optional)

Wenn du den Chat lieber in einen bestimmten Container einfügen möchtest anstatt als schwebenden Button, umschließe den Code mit einem div:

<div id="mi-chat" style="height: 500px;">
  <script>
  (function(w,d,s,t){if(w.WazionPlugin)return;w.WazionPlugin={token:t};
  var js=d.createElement(s);js.async=true;
  js.src='https://www.wazion.com/plugins/chat/embed.js';
  js.dataset.token=t;d.body.appendChild(js);
  })(window,document,'script','TU_TOKEN_AQUI');
  </script>
</div>

Der Chat wird innerhalb des Div-Containers gerendert und nicht als schwebender Button.

Installationsanleitung für Shopify

Folge diesen Schritten, um den Chat auf allen Seiten deines Shopify-Shops hinzuzufügen.

1

Greife auf den Themeneditor zu

In deinem Shopify-Administrationsbereich:

  1. Gehe zu Online-Shop im linken Seitenmenü
  2. Klicke auf Themen
  3. In deinem aktuellen Thema klicke auf die Schaltfläche ... (drei Punkte)
  4. Wählen Sie Code bearbeiten aus
2

Suche die Datei theme.liquid

Im linken Seitenbereich des Editors:

  1. Suche den Ordner Layout
  2. Klicke auf theme.liquid

Hinweis: theme.liquid ist die Hauptdatei, die auf allen Seiten deines Shops geladen wird.

3

Finde das </body>-Tag

Im Code-Editor:

  1. Verwenden Sie Strg+F (Windows) oder Befehl+F (Mac), um zu suchen
  2. Schreibe </body> und drücke Enter
  3. Das Etikett findest du nahe dem Ende der Datei.
4

Fügen Sie den Chat-Code ein

Fügen Sie den folgenden Code DIREKT VOR </body> ein:

<!-- WAzion Chat Web -->
<script>
(function(w,d,s,t){if(w.WazionPlugin)return;w.WazionPlugin={token:t};
var js=d.createElement(s);js.async=true;
js.src='https://www.wazion.com/plugins/chat/embed.js';
js.dataset.token=t;d.body.appendChild(js);
})(window,document,'script','TU_TOKEN_AQUI');
</script>
<!-- /WAzion Chat Web -->
</body>

Wichtig: Ersetze TU_TOKEN_AQUI durch den Token, der in deinem WAzion-Dashboard angezeigt wird.

5

Änderungen speichern

Klicken Sie auf die Schaltfläche Speichern in der oberen rechten Ecke des Editors.

6

Überprüfe die Installation

Besuche deinen Shop in einem Inkognito-Fenster. Du solltest den Chat-Button in der Ecke des Bildschirms sehen.

Alternativmethode: Benutzerdefinierte Pixel (Shopify Plus)

Wenn du Shopify Plus hast, kannst du benutzerdefinierte Pixel verwenden:

  1. Gehe zu EinstellungenKundendatenschutzBenutzerdefinierte Pixel
  2. Klicke auf Custom Pixel hinzufügen
  3. Gib ihm einen Namen (z.B.: “WAzion Chat“)
  4. Im Codefeld einfügen:
analytics.subscribe("page_viewed", (event) => {
  if (window.WazionPlugin) return;
  window.WazionPlugin = {token: 'TU_TOKEN_AQUI'};
  const js = document.createElement('script');
  js.async = true;
  js.src = 'https://www.wazion.com/plugins/chat/embed.js';
  js.dataset.token = 'TU_TOKEN_AQUI';
  document.body.appendChild(js);
});

Installationsanleitung für WordPress

Option 1: Mit Plugin (empfohlen)

Verwenden Sie ein Plugin, um Code in die Fußzeile einzufügen:

  1. Installiere das Plugin Insert Headers and Footers (von WPCode) oder ein ähnliches
  2. Gehe zu Code SnippetsHeader & Footer
  3. Im Abschnitt Footer den Chat-Code einfügen:
<script src="https://www.wazion.com/plugins/chat/embed.js"
        data-token="TU_TOKEN_AQUI"></script>

Speichere die Änderungen und der Chat wird auf allen Seiten angezeigt.

Option 2: Bearbeitung der functions.php

Hinweis: Diese Methode erfordert grundlegende PHP-Kenntnisse. Erstellen Sie vorher eine Sicherungskopie.

  1. Gehe zu DesignTheme-Datei-Editor
  2. Wähle functions.php in der Dateiliste aus
  3. Fügen Sie diesen Code am Ende der Datei ein:
// WAzion Chat Web
function wazion_chat_script() {
    echo '<script src="https://www.wazion.com/plugins/chat/embed.js"
          data-token="TU_TOKEN_AQUI"></script>';
}
add_action('wp_footer', 'wazion_chat_script');

Leitfaden für HTML-Sites/sonstige

Für jede Website (statisches HTML, React, Vue, Angular, usw.):

Grundstruktur

Füge den Code direkt vor in deine HTML-Datei ein:

<!DOCTYPE html>
<html>
<head>
    <title>Mi sitio web</title>
</head>
<body>
    <!-- Tu contenido aquí -->

    <!-- WAzion Chat Web - Pegar AQUÍ, antes de </body> -->
    <script src="https://www.wazion.com/plugins/chat/embed.js"
            data-token="TU_TOKEN_AQUI"></script>
</body>
</html>

Für SPA-Anwendungen (React, Vue, Angular)

Du kannst das Skript dynamisch laden:

// En tu componente principal o App.js
useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://www.wazion.com/plugins/chat/embed.js';
  script.dataset.token = 'TU_TOKEN_AQUI';
  script.async = true;
  document.body.appendChild(script);

  return () => document.body.removeChild(script);
}, []);

Fehlerbehebung

Der Chat erscheint nicht

  • Überprüfen Sie, ob das Plugin im Dashboard aktiviert ist
  • Stelle sicher, dass deine Domain auf der Liste der autorisierten Domains steht.
  • Öffne die Browser-Konsole (F12) und suche nach Fehlern
  • Teste in einem Inkognito-Fenster, um den Cache auszuschließen

Fehler “Nicht autorisierte Domain

  • Fügen Sie Ihre genaue Domain zur Liste der autorisierten Domains hinzu (ohne http:// oder /).
  • Wenn du www verwendest, füge sowohl “midominio.com“ als auch “www.midominio.com“ hinzu.
  • Für die lokale Entwicklung füge “localhost“ hinzu oder verwende vorübergehend “*

Der Chat erscheint, antwortet aber nicht.

  • Überprüfe, ob du Guthaben auf deinem Konto hast.
  • Überprüfe, ob das Token korrekt ist
  • Überprüfe, ob du das Rate-Limit erreicht hast

Einstellungen Optionen

Autorisierte Domains

Liste der Domains, auf denen der Chat funktionieren kann. Aus Sicherheitsgründen ist die Nutzung nur von Domains erlaubt, die du autorisiert hast.

  • • mitienda.com
  • • *.mitienda.com (einschließlich Subdomains)
  • • * (jede Domain – nur für Entwicklung)

Anzeigemodus

Schwimmend

Zeigt eine Schaltfläche in der Ecke der Seite an. Beim Klicken öffnet sich das Chatfenster.

Eingebettet

Der Chat wird in einen Div-Container auf deiner Seite eingefügt, ideal für Kontaktseiten.

Einstellung der Schwebetaste

  • Position: Unten rechts, unten links, oben rechts oder oben links
  • Symbol 6 verfügbare Symbole (Blase, Nachricht, Unterstützung, Roboter, usw.)
  • Farben: Anpassbare Hintergrundfarbe und Symbolfarbe
  • Größe: Klein (48px), Mittel (60px), Groß (72px)
  • Animation Keine, kein Puls oder Aufprall, um Aufmerksamkeit zu erregen
  • QuickInfo Text, das beim Überfahren des Buttons mit der Maus erscheint

Design-Themen

10 vordefinierte Themen zur Anpassung des Chats an deine Marke:

Minimal Modern Classic Dark Ocean Sunset Forest Rose Slate Neon

Chattexte

Personalisiere die Texte, die der Besucher sieht:

  • Chat-Titel (Kopfzeile)
  • Begrüßungsnachricht
  • Platzhalter für das Textfeld
  • Senden-Schaltflächentext

Die Texte werden automatisch in die Sprache des Besuchers übersetzt.

Spracheinstellung

Automatisch erkennen

Erkennt automatisch die Sprache des Browserbesuchers.

Feste Sprache

Immer in einer bestimmten Sprache anzeigen (z. B. nur Spanisch).

Mit Auswahlwerkzeug

Erkennt die Sprache automatisch, ermöglicht dem Besucher jedoch, die Sprache manuell zu ändern.

Verhalten

  • Auto-Öffnen Öffnen Sie den Chat automatisch nach X Sekunden
  • Klang Ton abspielen beim Empfang einer Nachricht
  • Markenbildung Powered by WAzion“ im Chat anzeigen

Ratenbegrenzung (Nachrichtenlimit)

Schütze dein Konto vor übermäßigem Gebrauch, indem du Sitzungslimits festlegst:

  • Maximale Anzahl von Nachrichten pro Zeitfenster (z.B. 30 Nachrichten)
  • Zeitfenster in Minuten (z.B. 60 Minuten)

Chat-Eingabeaufforderung

Du kannst spezifische Anweisungen für den Web-Chat schreiben oder sie mit deinem WhatsApp-Prompt synchronisieren:

  • Mit KI bearbeiten: Schreibe Anweisungen in natürlicher Sprache (z.B.: „Füge Öffnungszeiten von 9 bis 18 Uhr hinzu“) und die KI wird deinen Prompt automatisch ändern. Du siehst eine visuelle Differenz mit den Änderungen: hinzugefügter Text in Grün und gelöschter Text in Rot.
  • Aus allgemeiner Vorlage importieren: Kopiere deinen WhatsApp-Prompt mit einem Klick in das Plugin.
  • Versionsverlauf: Jedes Mal, wenn du speicherst, wird eine Version erstellt. Du kannst jede frühere Version wiederherstellen.

Automatische Synchronisation: Im Prompt-Editor kannst du die Option “Beim Speichern Web-Plugin-Prompt aktualisieren“ auswählen. Die KI passt deinen Prompt automatisch an, indem sie Verweise auf WhatsApp entfernt.

Benutzerdefiniertes CSS

Für erweiterte Einstellungen können Sie benutzerdefiniertes CSS hinzufügen, das auf den Chat angewendet wird.

Funktionen der KI im Chat

Die Chat-KI hat Zugriff auf dieselben Funktionen wie dein WhatsApp-Assistent:

Produktsuche

Die KI kann Produkte aus deinem Geschäft suchen und Informationen anzeigen.

Kundeninformationen

Wenn du CRM oder Shopify verbunden hast, greift die KI auf Kundendaten zu.

Websuche

Wenn aktiviert, kann die KI im Internet nach Informationen suchen.

Funktionen nach Maß

Deine benutzerdefinierten Funktionen (function calling) funktionieren im Chat.

Statistiken und Gesprächsübersicht

Nutzungsmetriken

Im Dashboard kannst du die Nutzungsmetriken des Chats sehen:

  • Gesamtgespräche
  • Gesamtmitteilungen
  • Gespräche in den letzten 7 Tagen
  • Aktive Sitzungen in den letzten 24 Stunden

Gesprächsanzeige

Überprüfe alle Chat-Unterhaltungen mit deinen Besuchern:

  • Filter nach Zeitraum: Heute, 7 Tage, 30 Tage, 90 Tage, 1 Jahr, alle oder benutzerdefinierter Datumsbereich
  • Paginierte Liste: Durchsuche alle Unterhaltungen (10 pro Seite)
  • Vollständige Einzelheiten: Klicken Sie auf eine beliebige Unterhaltung, um alle Nachrichten anzuzeigen
  • Besucherinformationen: Sprache, Anzahl der Nachrichten und Ursprungsseite

Mit vordefinierter Nachricht öffnen

Sie können den Chat mit einer vordefinierten Nachricht öffnen, indem Sie den Parameter ?Message= zur URL hinzufügen:

https://mitienda.com/contacto?Message=Quiero información sobre el producto X

Der Chat wird automatisch geöffnet und die angegebene Nachricht gesendet.

Häufig gestellte Fragen

Verwandte Artikel

WAzion Assistent

Geschäftsinformationen und technischer Support

Hallo! Ich bin der Assistent von WAzion. Ich kann Ihnen mit Informationen zu Preisen und Tarifen, technischen Fragen, der Konfiguration oder jeder anderen Frage zu unserem Produkt helfen. Wie kann ich Ihnen behilflich sein?
Entwickelt mit WAzion AI