Weblication-Anleitung

FirstBot-Widget in Ihre Weblication-Website einbinden

Funktioniert mit Weblication CMS Core & Grid

Inhalt

Ihr persönlicher Code-Schnipsel
Methode 1: Seiten-Template (standard.wDocument.php)
Methode 2: headAdditionalPost-Template
Methode 3: HTML-Strukturelement im Editor
Widget testen
Häufige Fragen & Probleme

★ Ihr persönlicher Code-Schnipsel

Wenn Sie sich einloggen, wird Ihr persönlicher API-Key hier automatisch eingesetzt.

            
<script>
  window.chatBotId = 'IHR-API-KEY';
</script>
<script src="https://firstbot.de/chatbot.js" defer="defer"></script>
        

Dieser Code muss einmalig vor dem schließenden </head>-Tag eingefügt werden.

⚠ Wichtig für XSLT-Templates: In Weblication-Templates (XSLT/XML) müssen Sie defer="defer" statt defer schreiben – Kurzattribute sind in XML nicht erlaubt. Außerdem muss jedes <script>-Tag explizit mit </script> geschlossen werden (kein Self-Closing />).

1 Seiten-Template (standard.wDocument.php)

★ Empfohlen – Seitenweit

Die beste Methode: Der Code wird direkt im zentralen Seiten-Template eingefügt und ist damit automatisch auf allen Seiten Ihrer Website aktiv.

Schritt 1 – Template-Datei finden

Öffnen Sie den Dateimanager in Weblication oder verbinden Sie sich per FTP/SFTP mit Ihrem Server. Navigieren Sie zu:

/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/standard.wDocument.php

Der genaue Pfad hängt von Ihrem Layout-Projekt ab. In der Regel finden Sie den Ordner unter dem Namen Ihres Website-Projekts.

Schritt 2 – Code einfügen

Öffnen Sie die Datei standard.wDocument.php und fügen Sie den Code vor dem schließenden </head>-Tag ein:

  <!-- FirstBot Chatbot Widget -->
  <script>
    window.chatBotId = 'IHR-API-KEY';
  </script>
  <script src="https://firstbot.de/chatbot.js" defer="defer"></script>
</head>
            

Schritt 3 – Speichern und veröffentlichen

Speichern Sie die Datei.
Veröffentlichen Sie die Änderung über den Weblication-Veröffentlichungsprozess (falls Staging/Live getrennt).
Öffnen Sie Ihre Website – der Chat-Button sollte unten rechts erscheinen.

✓ Vorteil: Der Code gilt sofort für alle Seiten. Sie müssen nichts an einzelnen Seiten ändern.

2 headAdditionalPost-Template

Sauberste Lösung (ab v20+)

Weblication bietet seit Version 20 ein spezielles Template headAdditionalPost, das genau für solche Erweiterungen gedacht ist. So bleibt Ihr Haupt-Template unangetastet.

Schritt 1 – Template-Datei erstellen oder bearbeiten

Navigieren Sie im Dateimanager oder per FTP zu:

/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/

Suchen Sie nach einer Datei namens headAdditionalPost.wDocument.php. Falls sie nicht existiert, erstellen Sie eine neue Datei mit diesem Namen.

Schritt 2 – Code einfügen

Fügen Sie in die Datei folgenden Inhalt ein:

<!-- FirstBot Chatbot Widget -->
<script>
  window.chatBotId = 'IHR-API-KEY';
</script>
<script src="https://firstbot.de/chatbot.js" defer="defer"></script>
            

Schritt 3 – Speichern und veröffentlichen

Speichern Sie die Datei.
Veröffentlichen Sie die Änderung.

✓ Vorteil: Das Haupt-Template bleibt unverändert. Bei Weblication-Updates gibt es keine Konflikte. Diese Methode gilt als Best Practice.

3 HTML-Strukturelement im Editor

Für einzelne Seiten / Redakteure

Weblication bietet ein eingebautes Strukturelement „HTML einbinden", mit dem Sie HTML- und JavaScript-Code direkt auf einzelnen Seiten einfügen können – ohne Dateien zu bearbeiten.

⚠ Hinweis: Diese Methode eignet sich nur, wenn der Chatbot auf wenigen ausgewählten Seiten erscheinen soll. Für eine seitenweite Einbindung nutzen Sie Methode 1 oder 2.

Schritt 1 – Seite im Editor öffnen

Loggen Sie sich in das Weblication-Backend ein.
Öffnen Sie die gewünschte Seite im visuellen Editor.

Schritt 2 – HTML-Element hinzufügen

Fügen Sie ein neues Strukturelement vom Typ „HTML einbinden" hinzu.
Fügen Sie den folgenden Code in das HTML-Feld ein:

<script>
  window.chatBotId = 'IHR-API-KEY';
</script>
<script src="https://firstbot.de/chatbot.js" defer="defer"></script>
            

Schritt 3 – Speichern und veröffentlichen

Speichern Sie die Seite.
Wiederholen Sie den Vorgang für jede Seite, auf der der Chatbot erscheinen soll.

Berechtigung erforderlich: Standardmäßig können nur Administratoren JavaScript-Code über das HTML-Element einfügen. Falls Sie als Redakteur keinen Zugriff haben, bitten Sie Ihren Administrator, die Einstellung addUserStandardAllowJsEditor zu aktivieren – oder nutzen Sie eine der anderen Methoden.

✓ Widget testen

Nachdem Sie den Code eingebunden haben, prüfen Sie die Einbindung so:

Öffnen Sie Ihre Website in einem neuen Browser-Tab.
Drücken Sie Strg+Shift+R (Windows) oder Cmd+Shift+R (Mac), um den Cache zu leeren.
In der rechten unteren Ecke sollte ein Chat-Button erscheinen.
Klicken Sie darauf – das Chat-Fenster sollte sich öffnen.

Prüfen mit Browser-Entwicklertools

Öffnen Sie die Entwicklertools mit F12.
Wechseln Sie zum Tab „Konsole" (Console).
Es sollten keine roten Fehlermeldungen bezüglich chatbot.js erscheinen.
Im Tab „Elemente" (Elements) → suchen Sie im <head> nach window.chatBotId – es sollte Ihr API-Key zu sehen sein.

✓ Wenn der Button erscheint, ist die Einbindung erfolgreich. Testen Sie jetzt das Chatbot-Gespräch mit einer Frage, die Ihrer Wissensbasis entspricht.

Häufige Fragen & Probleme

Der Chat-Button erscheint nicht

Prüfen Sie, ob der API-Key korrekt eingesetzt wurde (kein Leerzeichen am Anfang/Ende).
Leeren Sie den Browser-Cache: Strg+Shift+R bzw. Cmd+Shift+R.
Prüfen Sie in der Browser-Konsole (F12) auf Fehlermeldungen.
Stellen Sie sicher, dass Sie die korrekte Domain in Ihrem FirstBot-Dashboard eingetragen haben.

JavaScript wird im HTML-Strukturelement blockiert

Weblication schützt Redakteure standardmäßig vor der Eingabe von JavaScript-Code. So beheben Sie das:

Melden Sie sich als Administrator an (nicht als Redakteur).
Alternativ: Aktivieren Sie in der Weblication-Konfiguration die Einstellung addUserStandardAllowJsEditor.
Oder nutzen Sie stattdessen Methode 1 oder 2 (Template-basiert).

Widget wird nicht auf allen Seiten angezeigt

Wenn Sie Methode 3 (HTML-Strukturelement) gewählt haben, müssen Sie den Code auf jeder Seite einzeln einfügen. Für eine seitenweite Einbindung nutzen Sie Methode 1 (standard.wDocument.php) oder Methode 2 (headAdditionalPost).

Weblication-Cache leeren

Falls Änderungen nicht sichtbar werden:

Veröffentlichen Sie die Seite(n) erneut über den Weblication-Veröffentlichungsprozess.
Leeren Sie ggf. den serverseitigen Cache (sofern aktiviert).
Prüfen Sie, ob ein CDN oder Reverse-Proxy vorgeschaltet ist, und leeren Sie dessen Cache.

Konflikt mit Weblication-eigenen Scripts

Das FirstBot-Widget läuft isoliert und beeinflusst keine anderen Scripts auf Ihrer Seite. Konflikte mit Weblication-eigenen Scripts sind unwahrscheinlich. Falls dennoch Probleme auftreten:

Prüfen Sie in der Browser-Konsole (F12) auf Fehlermeldungen.
Stellen Sie sicher, dass keine Content-Security-Policy (CSP) das Laden externer Scripts blockiert.
Fügen Sie ggf. https://firstbot.de zur CSP-Whitelist hinzu.

Weitere Hilfe benötigt?
Schreiben Sie uns unter g.kunze@mukxx.de – wir helfen gern bei der Einbindung.

Tipp: Seiten-Kontext aktivieren

Nach der Einbindung: Aktiviere im Dashboard unter Trainingsdaten → „Seiten-Kontext“ die Option, damit dein Bot den Inhalt der Seite kennt, auf der dein Besucher gerade ist. So beantwortet er Fragen zu Produkten und Artikeln direkt – und lernt aus diesen Seiten dazu.