KI-Chatbot · Einbau
Eine Zeile Code, und Ihr Assistent ist live.
Der Einbau ist auf jeder Website gleich: eine Zeile HTML, idealerweise vor dem schliessenden </body>-Tag, sie funktioniert aber an jeder Stelle. Das Design holt sich der Assistent selbst vom Server, Sie müssen den Code danach nie mehr ändern.
<script src="https://frascati.ch/widget.js" data-key="IHR_SCHLUESSEL" async></script>IHR_SCHLUESSEL ist ein Platzhalter. Ihren echten Code mit Ihrem Schlüssel finden Sie in Ihrer E-Mail von uns.
WordPress
- Melden Sie sich in WordPress an, meist unter ihre-domain.ch/wp-admin.
- Variante A, ohne Plugin: Öffnen Sie Design → Customizer → Widgets und wählen Sie den Footer-Bereich. Fügen Sie einen Block "Individuelles HTML" hinzu und kleben Sie die Code-Zeile hinein.
- Variante B, mit Plugin: Installieren Sie unter Plugins → Installieren das kostenlose Plugin WPCode. Öffnen Sie danach Code Snippets → Header & Footer und kleben Sie die Code-Zeile in das Feld Footer.
- Speichern und veröffentlichen, der Chat-Knopf erscheint sofort.
Hat Ihr Theme keinen Footer-Widget-Bereich (bei neueren Block-Themes häufig), nehmen Sie Variante B, sie funktioniert mit jedem Theme.
Wix
- Öffnen Sie die Verwaltung Ihrer Website auf wix.com (das Dashboard, nicht der Editor).
- Gehen Sie zu Einstellungen → Erweitert → Benutzerdefinierter Code.
- Klicken Sie auf "Benutzerdefinierten Code hinzufügen" und fügen Sie die Code-Zeile ein.
- Wählen Sie "Alle Seiten" und die Platzierung am Ende des Body.
- Übernehmen, der Chat-Knopf erscheint sofort.
Eigener Code ist bei Wix erst mit einem Premium-Paket und verbundener eigener Domain möglich.
Squarespace
- Melden Sie sich bei Squarespace an und öffnen Sie Ihre Website.
- Gehen Sie zu Einstellungen → Erweitert → Code-Injektion. In neueren Konten liegt der Punkt unter Einstellungen → Entwickler-Tools → Code-Injektion.
- Fügen Sie die Code-Zeile in das Feld Fusszeile (Footer) ein.
- Speichern, der Chat-Knopf erscheint sofort.
Code-Injektion setzt bei Squarespace den Business-Plan oder höher voraus.
Webflow
- Öffnen Sie Ihr Projekt in Webflow und gehen Sie zu den Site Settings (Zahnrad-Symbol).
- Öffnen Sie den Reiter Custom Code.
- Fügen Sie die Code-Zeile in das Feld Footer Code ein.
- Klicken Sie auf Save Changes und veröffentlichen Sie die Website mit Publish, der Chat-Knopf erscheint sofort.
Custom Code setzt bei Webflow einen bezahlten Site Plan voraus.
Shopify
- Öffnen Sie den Shopify-Admin Ihres Shops.
- Gehen Sie zu Onlineshop → Themes.
- Klicken Sie beim aktiven Theme auf die drei Punkte → Code bearbeiten.
- Öffnen Sie im Ordner Layout die Datei theme.liquid.
- Fügen Sie die Code-Zeile direkt vor dem schliessenden </body>-Tag ein.
- Speichern, der Chat-Knopf erscheint sofort.
Jimdo
- Melden Sie sich bei Jimdo Creator an und öffnen Sie Ihre Website im Bearbeitungsmodus.
- Gehen Sie zu Menü → Einstellungen → Website → Head bearbeiten.
- Fügen Sie die Code-Zeile ein, sie funktioniert auch im Head.
- Speichern, der Chat-Knopf erscheint sofort.
Gilt nur für Jimdo Creator. Der neuere Jimdo-Baukasten (früher Play genannt) erlaubt keinen eigenen Code, dort ist der Einbau leider nicht möglich.
Weebly
- Melden Sie sich bei Weebly an und öffnen Sie den Website-Editor.
- Gehen Sie zu Einstellungen → SEO.
- Fügen Sie die Code-Zeile in das Feld Fusszeilen-Code (Footer Code) ein.
- Klicken Sie auf Speichern und danach auf Veröffentlichen, der Chat-Knopf erscheint sofort.
Joomla
- Melden Sie sich im Joomla-Administrator an, meist unter ihre-domain.ch/administrator.
- Gehen Sie zu System → Site-Templates und öffnen Sie Ihr aktives Template.
- Öffnen Sie die Datei index.php.
- Fügen Sie die Code-Zeile direkt vor dem schliessenden </body>-Tag ein.
- Speichern und schliessen, der Chat-Knopf erscheint sofort.
Nach einem Template-Update kann die Zeile verloren gehen. Prüfen Sie nach Updates kurz, ob der Chat-Knopf noch da ist.
Google Tag Manager
- Öffnen Sie tagmanager.google.com und wählen Sie den Container Ihrer Website.
- Klicken Sie auf Tags → Neu.
- Wählen Sie als Tag-Typ "Benutzerdefiniertes HTML" und fügen Sie die Code-Zeile ein.
- Wählen Sie als Trigger "Alle Seiten" (All Pages).
- Speichern und oben rechts mit Senden veröffentlichen, der Chat-Knopf erscheint sofort.
Der direkte Einbau im HTML ist zuverlässiger, weil manche Werbeblocker den Tag Manager blockieren.
Eigene Website (HTML)
- Öffnen Sie die HTML-Datei Ihrer Website in einem Editor, zum Beispiel index.html.
- Fügen Sie die Code-Zeile direkt vor dem schliessenden </body>-Tag ein. Sie funktioniert aber an jeder Stelle im HTML.
- Bei mehreren Seiten: Fügen Sie die Zeile in jede HTML-Datei ein, oder einmal in Ihr gemeinsames Template.
- Laden Sie die Datei per FTP oder über das Hosting-Panel hoch, der Chat-Knopf erscheint sofort.
Vom Webmaster einbauen lassen
- Sie müssen nichts Technisches tun. Leiten Sie einfach den folgenden Text an die Person weiter, die Ihre Website betreut.
- Text zum Weiterleiten: "Bitte folgende Zeile auf allen Seiten einbauen, idealerweise vor dem schliessenden </body>: die Code-Zeile aus der E-Mail. Das Script rendert einen schwebenden Chat-Knopf plus iframe, ist style-isoliert und kollidiert mit keinem bestehenden CSS oder JavaScript. Kein weiterer Eingriff nötig."
- Mehr braucht es nicht, der Chat-Knopf erscheint sofort nach dem Einbau.
Nicht fündig geworden? Unser KI-Assistent hilft Ihnen Schritt für Schritt, auch mit Screenshots.
Diese Anleitung als Klartext für KI-Assistenten: https://frascati.ch/chatbot-einbau.txt