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
- Öffne das Dashboard von WAzion
- Im Seitenmenü klicken Sie auf „Plugins“ → „Chat“
- Schalte den Schalter „Plugin aktiv“ ein
- Fügen Sie Ihre Domain unter „Autorisierte Domains“ hinzu (z.B. mitienda.com)
- 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.
Greife auf den Themeneditor zu
In deinem Shopify-Administrationsbereich:
- Gehe zu Online-Shop im linken Seitenmenü
- Klicke auf Themen
- In deinem aktuellen Thema klicke auf die Schaltfläche ... (drei Punkte)
- Wählen Sie Code bearbeiten aus
Suche die Datei theme.liquid
Im linken Seitenbereich des Editors:
- Suche den Ordner Layout
- Klicke auf theme.liquid
Hinweis: theme.liquid ist die Hauptdatei, die auf allen Seiten deines Shops geladen wird.
Finde das </body>-Tag
Im Code-Editor:
- Verwenden Sie Strg+F (Windows) oder Befehl+F (Mac), um zu suchen
- Schreibe </body> und drücke Enter
- Das Etikett findest du nahe dem Ende der Datei.
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.
Änderungen speichern
Klicken Sie auf die Schaltfläche Speichern in der oberen rechten Ecke des Editors.
Ü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:
- Gehe zu Einstellungen → Kundendatenschutz → Benutzerdefinierte Pixel
- Klicke auf Custom Pixel hinzufügen
- Gib ihm einen Namen (z.B.: “WAzion Chat“)
- 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:
- Installiere das Plugin Insert Headers and Footers (von WPCode) oder ein ähnliches
- Gehe zu Code Snippets → Header & Footer
- 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.
- Gehe zu Design → Theme-Datei-Editor
- Wähle functions.php in der Dateiliste aus
- 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');
Schritt-für-Schritt-Anleitung: Installation in WooCommerce
Hinweis: Der Web-Chat funktioniert sowohl in WordPress als auch in WooCommerce gleich. Der Unterschied besteht darin, dass der Assistent in WooCommerce auf den Kontext der Produkte zugreifen kann, wenn du die WooCommerce-Integration in WAzion konfiguriert hast.
Greife auf dein WordPress-Dashboard zu
Melde dich in deinem WordPress-Administrationsbereich an und gehe zu Design → Themen-Editor.
Lokalisieren Sie die Datei des Themas
Lokalisieren Sie die Datei functions.php Ihres Child-Themes (Aussehen → Theme-Datei-Editor → functions.php).
Fügen Sie den Chat-Code hinzu
Option 1: Verwenden Sie ein Plugin (empfohlen)
Installiere ein Plugin wie “WPCode“ (Insert Headers and Footers) und füge das Skript im Bereich “Body“ oder “Footer“ ein:
<script src="https://www.wazion.com/plugins/chat/embed.js"
data-token="TU_TOKEN_AQUI"></script>
Option 2: Füge die functions.php deines Child-Themes hinzu
Hinweis: Diese Methode erfordert grundlegende PHP-Kenntnisse. Erstellen Sie vorher eine Sicherungskopie.
Füge den folgenden Code zur Datei functions.php deines Child-Themes hinzu:
add_action('wp_footer', function() { ?>
<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>
<?php });
Speichern und überprüfen
Speichere die Änderungen und besuche deinen WooCommerce-Shop, um zu überprüfen, ob der Chat auf allen Seiten korrekt angezeigt wird.
Leitfaden für HTML-Sites/sonstige
Für jede Website (statisches HTML, React, Vue, Angular, usw.):
Grundstruktur
Füge den Code direkt vor
