Chatbot Integration –
Schritt-für-Schritt-Anleitung
Wie integriere ich einen Chatbot auf meiner Website? Welche Schritte sind nötig? Diese Anleitung zeigt Ihnen genau, wie Sie einen Chatbot in verschiedene Systeme einbinden – von WordPress bis Shopify.
Integration in 3 Schritten
So binden Sie einen Chatbot auf Ihrer Website ein:
1. Account erstellen & Code-Snippet erhalten: Registrieren Sie sich kostenlos und geben Sie Ihre Website-URL an. Im Dashboard erhalten Sie ein JavaScript-Snippet. Wo finde ich das Snippet? Nach der Registrierung im Dashboard unter "Integration" → "Code-Snippet kopieren".
2. Code-Snippet in Website einfügen: Kopieren Sie das Snippet und fügen Sie es in den Header Ihrer Website ein – genau wie bei Google Analytics. Wo genau? Im <head>-Bereich Ihrer Website, idealerweise vor dem schließenden </head>-Tag.
3. Chatbot ist live: Nach dem Speichern ist der Chatbot sofort auf Ihrer Website sichtbar und beantwortet Fragen automatisch. Tipp: Laden Sie die Website neu, um den Chatbot zu sehen. Er erscheint normalerweise unten rechts.
Code-Beispiele für verschiedene Systeme
Anleitung für die gängigsten Website-Systeme
Shopify
Schritte:
- Shopify Admin → Online Store → Themes
- Aktuelles Theme → "..." → "Code bearbeiten"
- Layout → "theme.liquid" öffnen
- Code-Snippet vor
</head>einfügen - Speichern
<!-- Chatbot Integration -->
<script>
(function() {
var script = document.createElement('script');
script.src = 'https://cdn.deinwebseitenchat.de/widget.js';
script.setAttribute('data-chatbot-id', 'IHR-CHATBOT-ID');
script.async = true;
document.head.appendChild(script);
})();
</script>WordPress
Schritte:
- WordPress Admin → Design → Theme-Editor
- "header.php" oder "functions.php" öffnen
- Code-Snippet vor
</head>einfügen - Speichern
Alternative: Plugin wie "Insert Headers and Footers" verwenden
<!-- In header.php oder functions.php -->
<script>
(function() {
var script = document.createElement('script');
script.src = 'https://cdn.deinwebseitenchat.de/widget.js';
script.setAttribute('data-chatbot-id', 'IHR-CHATBOT-ID');
script.async = true;
document.head.appendChild(script);
})();
</script>HTML-Website
Schritte:
- HTML-Datei in einem Editor öffnen
<head>-Bereich finden- Code-Snippet vor
</head>einfügen - Datei speichern und hochladen
<!DOCTYPE html>
<html>
<head>
<!-- Andere Meta-Tags -->
<!-- Chatbot Integration -->
<script>
(function() {
var script = document.createElement('script');
script.src = 'https://cdn.deinwebseitenchat.de/widget.js';
script.setAttribute('data-chatbot-id', 'IHR-CHATBOT-ID');
script.async = true;
document.head.appendChild(script);
})();
</script>
</head>
<body>
<!-- Website-Inhalt -->
</body>
</html>React / Vue / Angular
Schritte:
- Code-Snippet in
index.htmleinfügen - Oder als useEffect/onMounted Hook verwenden
- Nach dem Laden der Seite wird der Chatbot angezeigt
// React Beispiel
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://cdn.deinwebseitenchat.de/widget.js';
script.setAttribute('data-chatbot-id', 'IHR-CHATBOT-ID');
script.async = true;
document.head.appendChild(script);
return () => {
document.head.removeChild(script);
};
}, []);Troubleshooting: Häufige Probleme
Was tun, wenn der Chatbot nicht erscheint?
Problem: Chatbot erscheint nicht – Mögliche Ursachen: Code-Snippet wurde nicht korrekt eingefügt, Website-Cache muss geleert werden, Browser-Cache leeren und Seite neu laden, JavaScript ist im Browser deaktiviert. Lösung: Überprüfen Sie, ob das Snippet im HTML-Quellcode sichtbar ist (Rechtsklick → Seitenquelltext anzeigen).
Problem: Chatbot lädt langsam – Mögliche Ursachen: Langsame Internetverbindung, viele andere Scripts auf der Website. Lösung: Das Widget lädt asynchron und beeinträchtigt nicht die Website-Geschwindigkeit. Es erscheint erst, wenn der Besucher es öffnet.
Problem: Content Security Policy (CSP) Fehler – Mögliche Ursachen: Ihre Website hat eine strenge CSP, externe Scripts sind blockiert. Lösung: Fügen Sie cdn.deinwebseitenchat.de zu Ihrer CSP-Whitelist hinzu.
Tipp: Testen Sie die Integration – Nach der Integration sollten Sie die Website im Inkognito-Modus öffnen, um sicherzustellen, dass der Chatbot korrekt lädt. So vermeiden Sie Cache-Probleme.
Kompatibilität: Funktioniert mit allen Systemen
Da es sich um ein JavaScript-Snippet handelt, funktioniert die Integration universell.
Der Chatbot funktioniert mit Shopify, WordPress, WooCommerce, React, Vue, Angular, HTML und allen anderen Systemen, die JavaScript unterstützen.
Universal kompatibel: Da es sich um ein JavaScript-Snippet handelt, funktioniert die Integration mit jeder Website, die JavaScript unterstützt. Egal welches System Sie verwenden – die Integration ist immer gleich einfach.
Chatbot jetzt integrieren
Erhalten Sie Ihr Code-Snippet und integrieren Sie den Chatbot in wenigen Minuten auf Ihrer Website.
DSGVO-konform mit AVV · Server in Deutschland · KI von OpenAI