Chatbot auf Ihrer Website einbauen
Sie fügen eine einzige Zeile Code an einer einzigen Stelle ein — in der Footer-Template Ihrer Website. Der Chatbot erscheint dann automatisch auf jeder Unterseite. Sie müssen nicht jede Seite einzeln bearbeiten.
Der Code
Kopieren Sie Ihren persönlichen Widget-Code aus dem Dashboard. Er sieht so aus, mit Ihrem eigenen Slug statt IHR-SLUG:
<script src="https://websitechatbot.ch/widget.js" data-slug="IHR-SLUG" async></script>Name, Farbe und Avatar stellen Sie im Dashboard unter Einstellungen → Erscheinungsbild ein. Sie müssen den Code dafür nicht anpassen.
Anleitungen nach CMS
WordPress
- Im Admin-Bereich: Design → Theme-Editor → footer.php öffnen (oder ein Plugin wie „Insert Headers and Footers" / „WPCode" installieren).
- Den Widget-Code direkt vor </body> einfügen.
- Datei speichern. Fertig — der Chatbot erscheint auf allen Seiten.
Shopify
- Im Admin: Online-Store → Themes → Actions → Edit code.
- Die Datei theme.liquid öffnen.
- Den Widget-Code direkt vor </body> einfügen und speichern.
Wix
- Einstellungen → Custom Code → + Custom Code.
- Den Widget-Code in das Textfeld einfügen.
- „Apply to: All pages" und „Place code in: Body – end" wählen. Speichern.
Squarespace
- Einstellungen → Advanced → Code Injection.
- Den Widget-Code in das Feld „Footer" einfügen und speichern.
Webflow
- Project Settings → Custom Code → Footer Code.
- Den Widget-Code einfügen, speichern und die Seite neu veröffentlichen.
Jimdo
- Einstellungen → Kopf- und Fussbereich → HEAD oder Footer.
- Den Widget-Code in den Footer-Bereich einfügen und speichern.
Statische HTML-Seite
- Wenn Sie ein gemeinsames Footer-Include verwenden (z. B. footer.html, PHP-Include): dort einmalig einfügen.
- Ohne gemeinsames Template muss der Code tatsächlich auf jeder HTML-Datei eingefügt werden — in diesem seltenen Fall hilft ein Texteditor mit „Suchen und Ersetzen".
Überprüfen
- Seite im Browser öffnen und komplett neu laden (Strg/Cmd + Shift + R).
- Unten rechts sollte ein runder Chat-Button erscheinen.
- Anklicken → das Chat-Fenster öffnet sich. Fragen Sie etwas aus Ihrem Kontext.
Wenn nichts erscheint
- Öffnen Sie die Browser-Konsole (Rechtsklick → Untersuchen → Console). Steht dort
data-slug attribute is required, fehlt der Slug oder ist falsch geschrieben. - Code wirklich gespeichert? Viele CMS erfordern einen zusätzlichen Klick auf „Veröffentlichen" / „Publish".
- Content Security Policy: Wenn Ihre Seite eine strikte CSP hat, erlauben Sie
script-src https://websitechatbot.chundconnect-src https://websitechatbot.ch. - Widget wird von anderem Inhalt überdeckt: sehr selten. Schreiben Sie uns eine E-Mail, wir lösen das gemeinsam.
Hilfe beim Einbau
Sie haben ein anderes CMS oder der Einbau klappt nicht? Antworten Sie einfach auf Ihre Willkommens-E-Mail oder schreiben Sie an info@websitechatbot.ch — wir helfen persönlich.