websitechatbot.ch

Chatbot auf Ihrer Website einbauen

Sie fügen eine einzige Zeile Code an einer einzigen Stelle ein — und der Chatbot erscheint dann automatisch auf jeder Unterseite Ihrer Website. 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 Website-Builder

Klicken Sie auf Ihren Website-Builder — die detaillierte Schritt-für-Schritt-Anleitung klappt dann auf. Falls Ihr Anbieter nicht aufgeführt ist, schreiben Sie uns einfach: info@websitechatbot.ch.

Statische HTML-Seite oder selbstgeschriebener Code
  1. Wenn Sie ein gemeinsames Footer-Include verwenden (z. B. footer.html, ein PHP-include oder ein Template in Hugo/Jekyll/Eleventy): Fügen Sie den Widget-Code dort einmalig direkt vor &lt;/body&gt; ein. Das genügt für die ganze Website.
  2. Wenn jede Seite eine eigene HTML-Datei ist und kein gemeinsames Template existiert: Der Code muss tatsächlich in jeder Datei vor &lt;/body&gt; eingefügt werden. Mit VS Code oder Sublime Text öffnen Sie alle Dateien und nutzen Suchen & Ersetzen über mehrere Dateien: Suche nach &lt;/body&gt;, Ersetzen durch Ihren Widget-Code gefolgt von &lt;/body&gt;. Erledigt in 10 Sekunden.
WordPress
Diese Anleitung funktioniert mit jedem WordPress-Theme (klassisch oder Block-Theme) und ohne dass Sie Code-Dateien direkt bearbeiten müssen. Sie installieren ein kostenloses Plugin namens „WPCode", das den Code für Sie verwaltet.
  1. Öffnen Sie Ihren Browser und geben Sie in die Adresszeile ein: ihre-website.ch/wp-admin (ersetzen Sie ihre-website.ch durch Ihre eigene Adresse). Melden Sie sich mit Ihrem WordPress-Benutzernamen und Passwort an.
  2. Im linken vertikalen Menü: bewegen Sie die Maus über Plugins und klicken Sie auf Installieren (auf Englisch: Add New).
  3. Tippen Sie oben rechts im Suchfeld WPCode ein. Der erste Treffer heisst WPCode — Insert Headers and Footers + Custom Code Snippets. Klicken Sie daneben auf den blauen Button Jetzt installieren und warten Sie ein paar Sekunden, bis dort Aktivieren erscheint — diesen klicken Sie ebenfalls.
  4. Im linken Menü erscheint nun ein neuer Eintrag Code Snippets. Bewegen Sie die Maus darüber und klicken Sie Header & Footer (auf Deutsch evtl. Kopf- & Fusszeile).
  5. Sie sehen drei grosse Textfelder: Header, Body, Footer. Klicken Sie in das Footer-Feld und fügen Sie dort Ihren Widget-Code ein (Strg/Cmd + V).
  6. Klicken Sie oben rechts auf den blauen Button Änderungen speichern.
  7. Fertig. Öffnen Sie Ihre Website in einem neuen Tab und drücken Sie Strg + Shift + R (Windows) bzw. Cmd + Shift + R (Mac) für einen kompletten Neuladen. Der Chat-Button erscheint unten rechts.
Wix
Custom Code ist nur in den kostenpflichtigen Wix-Plänen verfügbar. Zusätzlich muss Ihre Website veröffentlicht sein und über eine eigene Domain laufen (also z. B. ihrname.ch — nicht ihrname.wixsite.com). Im kostenlosen Plan funktioniert es leider nicht.
  1. Gehen Sie auf wix.com und melden Sie sich an.
  2. Sie sehen Ihre Site(s) aufgelistet — klicken Sie bei der entsprechenden Site auf Site verwalten (oder Select & Edit Site).
  3. Im linken Menü des Dashboards: Einstellungen (Settings) — meist ganz unten.
  4. Scrollen Sie zum Abschnitt Entwicklung & Integrationen (Development & integrations) und klicken Sie auf Custom Code.
  5. Klicken Sie oben rechts auf den Button + Custom Code hinzufügen (Add Custom Code).
  6. Fügen Sie Ihren Widget-Code in das grosse Textfeld Paste the code snippet here ein.
  7. Stellen Sie folgende Optionen ein: Add Code to Pages = All pages und Load code once. Place Code in = Body – end.
  8. Klicken Sie unten rechts auf Anwenden (Apply). Öffnen Sie Ihre Website in einem neuen Tab und laden Sie sie komplett neu — der Chat-Button erscheint.
Squarespace
Code Injection ist nur ab dem Core-Plan verfügbar (Squarespace hat die Pläne Ende 2024 umbenannt — die aktuellen Stufen heissen Basic, Core, Plus, Advanced). Beim Basic-Plan fehlt diese Funktion; ältere „Personal"-Abos behalten weiterhin keinen Zugriff. Falls Sie auf Basic sind, müssen Sie auf Core upgraden (wenige Franken pro Monat zusätzlich).
  1. Melden Sie sich auf squarespace.com an.
  2. Klicken Sie auf die Website, die Sie bearbeiten möchten, um die Übersicht zu öffnen.
  3. Im linken Menü: Settings (oder Einstellungen).
  4. Klicken Sie auf Advanced (Erweitert) und dann auf Code Injection.
  5. Fügen Sie Ihren Widget-Code in das Feld Footer ein. Nicht in „Header" oder „Lock Page".
  6. Klicken Sie oben links auf Save. Öffnen Sie Ihre Website in einem neuen Tab und laden Sie sie komplett neu (Strg/Cmd + Shift + R).
Jimdo
Diese Anleitung gilt für Jimdo Creator. Wenn Sie Jimdo Dolphin verwenden (der neuere AI-Editor, der Ihre Site automatisch generiert hat), ist das Einfügen von eigenem Code nicht möglich — das ist eine Einschränkung von Jimdo Dolphin selbst. Schreiben Sie uns in diesem Fall an info@websitechatbot.ch, wir finden eine Lösung.
  1. Melden Sie sich auf jimdo.com an und öffnen Sie Ihre Website.
  2. Klicken Sie oben rechts auf Bearbeiten, um in den Edit-Modus zu wechseln.
  3. Öffnen Sie das Menü oben links (drei Striche / Hamburger-Symbol) und wählen Sie Einstellungen → Edit Head (oder Kopfbereich bearbeiten).
  4. Fügen Sie Ihren Widget-Code in das Textfeld ein und klicken Sie auf Speichern.
  5. Obwohl der Code im Head-Bereich steht, lädt das Widget asynchron und erscheint trotzdem unten rechts auf jeder Seite. Laden Sie Ihre Website neu zum Testen.
Shopify
  1. Melden Sie sich in Ihrem Shopify-Admin an (ihrshop.myshopify.com/admin).
  2. Im linken Menü: Online Store → Themes.
  3. Bei Ihrem aktuellen Theme (oben in der Liste) klicken Sie auf den Button mit den drei Punkten ⋯ neben Customize, und wählen Sie Edit code.
  4. Auf der linken Seite sehen Sie einen Datei-Baum. Öffnen Sie den Ordner Layout und klicken Sie auf die Datei theme.liquid.
  5. Drücken Sie Strg/Cmd + F, um eine Suche zu öffnen, und suchen Sie nach &lt;/body&gt;. Setzen Sie den Cursor in die leere Zeile direkt darüber und fügen Sie Ihren Widget-Code ein.
  6. Klicken Sie oben rechts auf Save. Öffnen Sie Ihren Shop in einem neuen Tab und laden Sie ihn neu — der Chat-Button erscheint unten rechts.
Webflow
Custom Code wird nur auf Sites mit einem aktiven Site Plan ausgeführt. Auf einer kostenlosen .webflow.io-URL ohne Plan lädt der Code nicht. Falls Sie Webflow gratis nutzen, müssen Sie zuerst einen Site Plan aktivieren (ab ca. USD 14/Monat).
  1. Öffnen Sie Ihr Projekt im Webflow Designer. Oben links neben dem Webflow-Logo: Klicken Sie auf das Zahnrad-Symbol für Site Settings.
  2. Klicken Sie auf den Tab Custom Code.
  3. Scrollen Sie zum Abschnitt Footer Code (vor dem schliessenden Body-Tag) und fügen Sie Ihren Widget-Code dort ein.
  4. Klicken Sie auf Save Changes.
  5. Zurück im Designer: oben rechts auf Publish → Publish to Selected Domains. Wichtig: Der Code geht erst nach dem Publish live — Vorschau allein reicht nicht.
IONOS MyWebsite
Zwei Dinge zu beachten: (1) Das HTML-Modul (Custom Head Code) ist nicht in allen MyWebsite-Now-Plänen enthalten — in den günstigsten Einstiegsplänen fehlt es. Wenn Sie im Editor unter Einstellungen keinen Punkt „Eigener Head-Code" finden, müssen Sie auf einen Plan mit HTML-Modul wechseln. (2) IONOS lädt eigenen Code erst, nachdem Besucher dem Cookie-Banner zugestimmt haben. Der Chat-Button erscheint also nach dem Klick auf „Akzeptieren". Wenn ein Besucher Cookies ablehnt, erscheint der Chatbot nicht. Diese Anleitung gilt für MyWebsite Now; MyWebsite Creator ist ein anderes Produkt mit anderem Editor — falls Sie Creator nutzen, schreiben Sie uns für die passenden Schritte.
  1. Melden Sie sich auf ionos.de bzw. ionos.ch an und öffnen Sie den MyWebsite-Editor.
  2. Im linken Menü: Einstellungen (Settings).
  3. Klicken Sie auf Eigener Head-Code (englisch: Custom Head Code).
  4. Fügen Sie Ihren Widget-Code in das Textfeld ein und klicken Sie auf Speichern.
  5. Klicken Sie oben rechts auf Veröffentlichen (Publish), damit die Änderung live geht.
STRATO Homepage-Baukasten
STRATO bietet keine globale Code-Injektion. Stattdessen platzieren Sie das Widget einmalig in einem Bereich, der auf jeder Seite erscheint — meist der Footer-Block. Falls Sie nur eine Startseite haben, reicht es, das Widget dort einzusetzen.
  1. Melden Sie sich in Ihrem STRATO-Kundenbereich an und klicken Sie auf Webseite bearbeiten.
  2. Im Editor: Inhaltselemente → Standardelemente. Suchen Sie das Element Embed.
  3. Halten Sie das Embed-Element mit der Maus fest und ziehen Sie es in Ihren Footer-Bereich (oder einen anderen Bereich, der auf jeder Seite Ihrer Website sichtbar ist).
  4. Sobald das Embed-Element platziert ist, sehen Sie oben rechts am Element ein kleines Zahnrad-Symbol. Klicken Sie darauf.
  5. Im Popup-Fenster: Fügen Sie Ihren Widget-Code in das Feld Embed-Code ein und klicken Sie auf Speichern.
  6. Klicken Sie oben rechts im Editor auf Veröffentlichen. Laden Sie Ihre Website in einem neuen Tab vollständig neu — der Chat-Button erscheint.
Hostpoint Sites
Hostpoint Sites bietet keine globale Code-Injektion. Sie platzieren das Widget einmalig im Footer-Bereich — dieser erscheint in den meisten Sites-Vorlagen auf allen Unterseiten. Falls der Footer in Ihrer Vorlage nicht auf jeder Seite geteilt wird, müssen Sie das Embed-Element auf jeder einzelnen Seite einfügen.
  1. Melden Sie sich im Hostpoint Control Panel an und öffnen Sie Ihre Sites-Website im Bearbeitungsmodus.
  2. Klicken Sie an einer Stelle in Ihrem Footer-Bereich (unterster Bereich, der auf jeder Seite erscheint) auf + Element hinzufügen.
  3. Wählen Sie das Element Embed (oder HTML einbetten).
  4. Fügen Sie Ihren Widget-Code in das Textfeld ein und klicken Sie Übernehmen oder Speichern.
  5. Klicken Sie oben auf Veröffentlichen. Laden Sie Ihre Website neu — der Chat-Button erscheint unten rechts.
Localsearch (MyWEBSITE)
Localsearch (Swisscom Directories) erstellt und betreut Ihre Website als Rundum-Service. Eigenen Code können Sie deshalb in der Regel nicht selbst einfügen — der zuverlässigste Weg ist, den Localsearch-Support kurz darum zu bitten. Als Kundin oder Kunde haben Sie darauf Anspruch, und für den Support ist es in wenigen Minuten erledigt.
  1. Öffnen Sie das Support-Formular von Localsearch.
  2. Bitten Sie den Support, den Widget-Code in den Footer Ihrer Website bzw. direkt vor das schliessende &lt;/body&gt;-Tag einzufügen — so erscheint der Chatbot auf allen Seiten. Verwenden Sie dafür einfach die Vorlage unten.
  3. IHR-SLUG ist Ihre persönliche Kennung. So finden Sie sie: Loggen Sie sich in Ihr Dashboard ein und schauen Sie in die Adresszeile des Browsers — Ihre Kennung ist der Teil nach /dashboard/. Beispiel: In websitechatbot.ch/de/dashboard/musterfirma-ch ist die Kennung musterfirma-ch. Ersetzen Sie IHR-SLUG in der Vorlage durch genau diesen Wert.
  4. Sobald Localsearch bestätigt, dass es online ist, erscheint der Chat-Button unten rechts. Laden Sie Ihre Website einmal neu (Strg + Shift + R).

Vorlage zum Kopieren:

Guten Tag

Ich bin Kundin/Kunde von MyWEBSITE und möchte ein kleines Tool (einen Chatbot) auf meiner Website einbinden.

Könnten Sie bitte die folgende Code-Zeile in den Footer meiner Website bzw. direkt vor dem schliessenden </body>-Tag einfügen, damit sie auf allen Seiten vorhanden ist:

<script src="https://websitechatbot.ch/widget.js" data-slug="IHR-SLUG" async></script>

Bitte veröffentlichen Sie die Website anschliessend und bestätigen Sie mir kurz, sobald es online ist.

Besten Dank und freundliche Grüsse
Google Sites
Achtung: Google Sites führt eingebetteten Code in einem festen iframe-Rahmen aus. Unser Widget-Code lädt zwar, aber mit Einschränkungen: Der Chat-Button bleibt im Embed-Rechteck eingesperrt (statt unten rechts auf der ganzen Seite zu schweben), das Chat-Fenster kann sich nicht über dieses Rechteck hinaus öffnen, und Sie müssen den Embed-Code manuell auf jeder Seite einfügen — es gibt keine globale Einbettung. Wenn Sie es trotzdem versuchen möchten oder Hilfe bei einem Wechsel brauchen, schreiben Sie uns an info@websitechatbot.ch — wir helfen gerne.

Überprüfen

  1. Öffnen Sie Ihre Website in einem neuen Tab und laden Sie sie komplett neu: Strg + Shift + R (Windows) bzw. Cmd + Shift + R (Mac). Dies umgeht den Browser-Cache.
  2. Unten rechts sollte innerhalb von 1–2 Sekunden ein runder Chat-Button erscheinen.
  3. Klicken Sie ihn an → das Chat-Fenster öffnet sich. Stellen Sie eine Frage zu Ihrem Geschäft (z. B. zu Ihren Öffnungszeiten), um zu sehen, dass die Antworten zu Ihrer Website passen.

Wenn nichts erscheint

  • Öffnen Sie die Browser-Konsole (Rechtsklick auf die Seite → Untersuchen bzw. Inspect → Tab Console). Steht dort eine Fehlermeldung mit 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" — Speichern alleine reicht oft nicht. Bei Webflow z. B. müssen Sie Publish to Selected Domains klicken.
  • Content Security Policy: Wenn Ihre Seite eine strikte CSP hat (sehr selten bei SMB-Sites), erlauben Sie script-src https://websitechatbot.ch und connect-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 einen anderen Website-Builder oder der Einbau klappt nicht? Antworten Sie einfach auf Ihre Willkommens-E-Mail oder schreiben Sie an info@websitechatbot.ch — wir helfen Ihnen persönlich beim Einbau, kostenlos.