So fügen Sie den Asyntai AI Chatbot zu jeder Website hinzu
Universal guide for HTML, custom sites, and static generators
HTML/Custom
WordPress
Shopify
WooCommerce
BigCommerce
Ecwid
Wix
Squarespace
Webflow
Weebly
HubSpot
Tilda
Adobe Experience Manager
Duda
Google Sites
Bludit
Plesk
Concrete CMS
Craft CMS
Contentful
Docusaurus
Strapi
Joomla
Kentico
Drupal
Magento
Blogger
Bitrix
TYPO3
PrestaShop
OpenCart
Ghost
Hugo
Statamic
Umbraco
Volusion
Moodle
SilverStripe
Grav
October CMS
ProcessWire
Sanity
ExpressionEngine
Sylius
Backdrop CMS
MODX
Bagisto
PayloadCMS
e107
CrafterCMS
Kirby
MedusaCMS
DatoCMS
GoDaddy
Framer
Bubble
Carrd
Jimdo
Strikingly
Kajabi
Teachable
Thinkific
ClickFunnels
Hostinger
Unbounce
Leadpages
Systeme.io
Instapage
Schritt 1: Ihren Einbettungscode erhalten
Gehen Sie zunächst zu Ihrem Asyntai Dashboard und scrollen Sie zum Abschnitt "Einbettungscode". Kopieren Sie Ihren einzigartigen Einbettungscode, der so aussieht:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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: Zu Ihrer HTML-Datei hinzufügen
Der einfachste Weg, den Chatbot hinzuzufügen, ist das direkte Einfügen des Einbettungscodes in Ihre HTML-Datei:
- Öffnen Sie Ihre HTML-Datei in einem Texteditor
- Suchen Sie das schließende
</body>-Tag - Fügen Sie Ihren Asyntai-Einbettungscode direkt vor dem
</body>-Tag ein - Speichern Sie die Datei
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- Your website content -->
<!-- Asyntai Chatbot - Add before closing body tag -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>
Tipp: Das Hinzufügen des Scripts vor dem schließenden </body>-Tag stellt sicher, dass es nach Ihrem Seiteninhalt geladen wird, was optimal für die Leistung ist und Ihre Seite nicht verlangsamt.
Für mehrseitige Websites
Wenn Ihre Website mehrere HTML-Seiten hat, haben Sie mehrere Optionen:
Option A: Auf jeder Seite hinzufügen
Fügen Sie den Einbettungscode in jede HTML-Datei ein, auf der der Chatbot erscheinen soll.
Option B: Einen gemeinsamen Footer-Include verwenden
If you're using server-side includes (SSI), PHP includes, or similar:
- Create a footer.html (or footer.php) file
- Fügen Sie den Asyntai-Einbettungscode zu dieser Datei hinzu
- Binden Sie diese Footer-Datei in alle Ihre Seiten ein:
<!-- For PHP -->
<?php include 'footer.php'; ?>
<!-- For SSI -->
<!--#include virtual="/footer.html" -->
Option C: Dynamisches Laden per JavaScript
Create a single JavaScript file that loads the chatbot on all pages:
- Erstellen Sie eine Datei namens asyntai-loader.js:
(function() {
var script = document.createElement('script');
script.async = true;
script.src = 'https://asyntai.com/static/js/chat-widget.js';
script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
document.body.appendChild(script);
})(); - Replace
YOUR_WIDGET_IDwith your actual widget ID - Binden Sie dieses Script in alle Ihre Seiten ein:
<script src="/js/asyntai-loader.js"></script>
Für statische Website-Generatoren
Wenn Sie einen statischen Website-Generator verwenden, fügen Sie den Einbettungscode zu Ihrem Basis-Layout oder Template hinzu:
Fügen Sie es zu _includes/footer.html oder _layouts/default.html hinzu
Fügen Sie es zu layouts/partials/footer.html oder layouts/_default/baseof.html hinzu
Add to gatsby-browser.js or use gatsby-ssr.js
Fügen Sie es zu pages/_document.js hinzu oder verwenden Sie die Komponente next/script
Add to nuxt.config.js under head.script
Fügen Sie es zu Ihrem Basis-Layout in _includes/ hinzu
Fügen Sie es in src/layouts/Layout.astro vor </body> hinzu
Add to .vuepress/config.js under head
Für React / Vue / Angular Apps
Für Single-Page-Anwendungen (SPAs) können Sie das Script zu Ihrer index.html hinzufügen oder es dynamisch laden:
React (index.html-Methode)
<!-- In public/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
React (useEffect-Methode)
// In your App.js or a component
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://asyntai.com/static/js/chat-widget.js';
script.async = true;
script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
document.body.appendChild(script);
return () => document.body.removeChild(script);
}, []);
Vue (in main.js oder App.vue)
// In mounted() or onMounted()
const script = document.createElement('script');
script.src = 'https://asyntai.com/static/js/chat-widget.js';
script.async = true;
script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
document.body.appendChild(script);
Angular (in index.html)
<!-- In src/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Schritt 3: Installation überprüfen
Öffnen 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 sehen. Klicken Sie darauf, um sicherzustellen, dass er sich öffnet und korrekt funktioniert.
Widget nicht sichtbar? Überprüfen Sie, ob das Script korrekt vor dem </body>-Tag platziert ist. Stellen Sie sicher, dass in der Browser-Konsole keine JavaScript-Fehler vorliegen (drücken Sie F12, um die Entwicklertools zu öffnen). Versuchen Sie, Ihren Browser-Cache zu leeren oder in einem Inkognito-Fenster zu öffnen.
Wichtig: Der Chatbot erfordert, dass Ihre Website über HTTP oder HTTPS bereitgestellt wird (nicht direkt als Datei geöffnet). Wenn Sie lokal testen, verwenden Sie einen lokalen Entwicklungsserver.