So fügen Sie den Asyntai-KI-Chatbot zu WordPress hinzu

Schritt-für-Schritt-Anleitung für WordPress-Websites

Plattform:

Schritt 1: Ihren Einbettungscode erhalten

Gehen Sie zuerst zu Ihrem Asyntai-Dashboard und scrollen Sie nach unten zum Abschnitt „Embed Code“. Kopieren Sie Ihren eindeutigen Einbettungscode, der so aussieht:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Hinweis: Der obige Code ist nur ein Beispiel. Sie müssen Ihren eigenen einzigartigen Einbettungscode von Ihrem Dashboard kopieren, da er Ihre persönliche Widget-ID enthält.

Schritt 2: Installationsmethode wählen

Es gibt mehrere Möglichkeiten, das Chat-Widget zu WordPress hinzuzufügen. Wählen Sie die Methode, die am besten zu Ihnen passt:

Methode 1: Ein Plugin verwenden (empfohlen)

Am einfachsten fügen Sie das Chat-Widget mit dem kostenlosen Plugin „WPCode“ hinzu (früher „Insert Headers and Footers“).

WPCode verwenden (Free)

Gehen Sie in Ihrem WordPress-Adminbereich zu Plugins → Add Plugin
Suchen Sie nach "WPCode" und installieren Sie es
Aktivieren Sie das Plugin
Gehen Sie zu Code Snippets → Header & Footer
Fügen Sie Ihren Asyntai-Einbettungscode im Abschnitt "Footer" ein
Klicken Sie auf "Save Changes"

Warum ein Plugin verwenden? Die Verwendung eines Plugins stellt sicher, dass Ihr Code auch beim Aktualisieren oder Wechseln Ihres WordPress-Themes erhalten bleibt.

Methode 2: Theme-Dateien bearbeiten

Sie können den Code direkt zu Ihren Theme-Dateien hinzufügen. Der Standort des Theme-Datei-Editors hängt von Ihrer WordPress-Version und Ihrem Theme-Typ ab.

Für klassische Themes

Gehen Sie in Ihrem WordPress-Admin zu Appearance → Theme File Editor
Wählen Sie Ihr aktives Theme aus dem Dropdown-Menü (falls nicht bereits ausgewählt)
Suchen und klicken Sie auf footer.php in der Dateiliste auf der rechten Seite
Scrollen Sie nach unten und finden Sie das schließende </body>-Tag
Fügen Sie Ihren Asyntai-Einbettungscode direkt vor dem </body>-Tag ein
Klicken Sie auf "Update File"

Für Block-Themes (FSE-Themes)

Block-Themes (wie Twenty Twenty-Four und andere Full-Site-Editing-Themes) haben keine footer.php-Datei und kein </body>-Tag in ihren Theme-Dateien. Verwenden Sie bei einem Block-Theme die Plugin-Methode (WPCode), die mit allen Theme-Typen funktioniert.

Wichtig: Theme-Updates überschreiben Ihre Änderungen. Für eine dauerhafte Lösung verwenden Sie stattdessen ein Child-Theme oder die Plugin-Methode.

Methode 3: Elementor verwenden

Wenn Sie Elementor verwenden, können Sie den Code über die benutzerdefinierte Code-Funktion von Elementor hinzufügen.

Elementor Pro

Gehen Sie zu Elementor → Custom Code
Klicken Sie auf "Add New"
Geben Sie ihm einen Namen wie "Asyntai Chatbot"
Setzen Sie Location auf „<body> – End“
Fügen Sie Ihren Asyntai-Einbettungscode ein
Setzen Sie die Anzeigebedingungen auf "Entire Site"
Klicken Sie auf "Publish"

Elementor Free

Wenn Sie die kostenlose Version von Elementor verwenden, nutzen Sie die oben beschriebene Plugin-Methode, da die Einbindung von benutzerdefiniertem Code Elementor Pro erfordert.

Schritt 3: Installation überprüfen

Besuchen Sie nach dem Hinzufügen des Codes Ihre Website in einem neuen Browser-Tab oder Inkognito-Fenster. Sie sollten den Chat-Widget-Button in der unteren rechten Ecke Ihrer Website sehen. Klicken Sie darauf, um sicherzustellen, dass er sich öffnet und korrekt funktioniert.

Widget nicht sichtbar? Leeren Sie Ihren Browser-Cache und alle WordPress-Caching-Plugins. Wenn Sie ein Caching-Plugin wie WP Rocket oder W3 Total Cache verwenden, leeren Sie den Cache nach dem Hinzufügen des Codes.

Die KI-Suchleiste hinzufügen

Die KI-Suchleiste ist ein eigenes Widget mit eigenem Code. Fügen Sie sie zusätzlich zum Chat hinzu oder allein. Sie erfordert den Standard-Tarif oder höher: in einem niedrigeren Tarif erscheint die Leiste, liefert aber keine Ergebnisse.

Fügen Sie dem Script-Tag das Attribut data-replace hinzu, dann ersetzt die Leiste die Suchleiste, die Ihr Theme bereits hat. Fügen Sie es mit demselben Header- und Footer-Plugin hinzu, das Sie für den Chat-Code verwendet haben, zum Beispiel WPCode. Das Skript muss nicht in der Nähe Ihres Suchfelds stehen, daher müssen Sie keine Theme-Datei bearbeiten.

<script src="https://widget.asyntai.com/static/js/search-widget.js" data-asyntai-id="YOUR_WIDGET_ID" data-replace="auto" async></script>

Die vollständige Anleitung zur KI-Suchleiste lesen

Dokumentation