In TYPO3 einbinden

So binden Sie Ihr botts.ai Chat-Widget mit wenigen Zeilen TypoScript im Backend in eine TYPO3-Website ein, ohne eine Extension zu installieren.

Mit dieser Anleitung binden Sie das Chat-Widget eines botts.ai Website-Deployments in eine TYPO3-Website ein. Sie nutzen dafür TypoScript, die Konfiguration von TYPO3: Einige Zeilen im Feld Setup des TypoScript-Datensatzes Ihrer Website sorgen dafür, dass TYPO3 das Script des Widgets auf jeder Seite lädt, direkt vor dem schliessenden </body>-Tag. Die Schritte beschreiben TYPO3 v14 LTS; wo TYPO3 v13 anders aussieht, steht es dabei.

Das brauchen Sie

• Administratorrechte für das TYPO3-Backend Ihrer Website.
• Nichts zu kaufen: TYPO3 ist kostenlose Open-Source-Software, und Sie brauchen keine Extension.
• Den Einbettungscode Ihres Website-Deployments. Öffnen Sie in botts.ai Agenten, wählen Sie Ihren Agenten, wechseln Sie in den Tab Bereitstellen und öffnen Sie das Website-Deployment. Im Abschnitt Einbinden ganz unten im Editor steht der Code, mit einer Schaltfläche zum Kopieren. Noch kein Website-Deployment? Siehe Deployments.

Der Einbettungscode sieht so aus, mit dem Schlüssel Ihres Deployments anstelle von IHR_API_KEY:

<script async src="https://api.botts.ai/widget/chat-widget.js?key=IHR_API_KEY"></script>

In TYPO3 fügen Sie nicht den Einbettungscode selbst ein, sondern diese Zeilen, die dasselbe Script laden. Ersetzen Sie IHR_API_KEY durch den Schlüssel aus Ihrem Einbettungscode: die Zeichen nach key= bis zum schliessenden Anführungszeichen.

# botts.ai chat widget
page.includeJSFooter.botts = https://api.botts.ai/widget/chat-widget.js?key=IHR_API_KEY
page.includeJSFooter.botts.async = 1
page.includeJSFooter.botts.external = 1
page.includeJSFooter.botts.excludeFromConcatenation = 1
page.includeJSFooter.botts.disableCompression = 1

Die letzten drei Zeilen verhindern, dass TYPO3 v13 und älter das Script zusammenfasst oder komprimiert, was das Widget unbrauchbar machen würde. TYPO3 v14 ignoriert sie, deshalb funktionieren dieselben Zeilen in beiden Versionen.

Viele TYPO3-Websites werden von einer Agentur erstellt, die das TypoScript in Dateien (einem Site Package) statt im Backend verwaltet. Betreut eine Agentur oder eine Fachperson Ihre Website, ändern Sie sie nicht selbst: Senden Sie ihnen diese Zeilen, oder lesen Sie An Ihre Webagentur senden.

Schritt 1: Im TYPO3-Backend anmelden

Öffnen Sie ihre-domain.ch/typo3 und melden Sie sich an. Ersetzen Sie ihre-domain.ch durch die Adresse Ihrer Website. Manche Websites nutzen eine andere Backend-Adresse; Ihre Agentur oder Ihr Hoster kennt sie.

Schritt 2: Das Modul TypoScript öffnen

Wählen Sie im linken Menü Sites → TypoScript (auf Deutsch Websites → TypoScript). In TYPO3 v13 heisst der Menüpunkt Site Management → TypoScript (Seitenverwaltung → TypoScript). Klicken Sie dann im Seitenbaum auf die Startseite Ihrer Website: die oberste Seite mit dem Globus-Symbol.

Schritt 3: «Edit TypoScript Record» wählen

Wählen Sie im Menü oben im Modul Edit TypoScript Record (TypoScript-Datensatz bearbeiten). Sie sehen den TypoScript-Datensatz Ihrer Website mit den Zeilen Title, Description, Constants und Setup (auf Deutsch Titel, Beschreibung, Konstanten und Setup).

Steht auf der Seite TypoScript settings have been implicitly generated from site sets includes (auf Deutsch «TypoScript-Einstellungen wurden implizit aus Site-Sets Abhängigkeiten generiert») und gibt es keine Schaltfläche Setup, lädt Ihre Website ihr TypoScript aus Dateien. Lesen Sie dann weiter unter Falls Ihre Website Site Sets nutzt.

Schritt 4: Zeilen am Ende von Setup einfügen

Klicken Sie auf Setup. Klicken Sie ans Ende der letzten Zeile im Feld, drücken Sie die Eingabetaste für eine neue Zeile und fügen Sie die Zeilen von oben mit Ihrem Schlüssel ein. Lassen Sie die bestehenden Zeilen unverändert.

Schritt 5: Änderungen speichern

Klicken Sie oben im Formular auf Save (Speichern).

Schritt 6: Frontend-Caches leeren

Klicken Sie in der oberen Leiste auf das Blitz-Symbol und wählen Sie Flush frontend caches (Frontend-Caches leeren). TYPO3 speichert fertige Seiten in einem Cache; so baut es sie mit dem Widget neu auf.

Schritt 7: Widget auf der Website prüfen

Öffnen Sie Ihre öffentliche Website in einem privaten Fenster, laden Sie die Seite neu und warten Sie einen Moment. Das Chat-Symbol erscheint unten rechts oder dort, wo Sie es im Widget-Editor platziert haben. Öffnen Sie das Widget und senden Sie eine Testfrage. Prüfen Sie auch eine Unterseite und die Ansicht auf dem Smartphone.

Falls Ihre Website Site Sets nutzt

Neuere TYPO3-Websites laden ihr TypoScript oft aus Site Sets, also aus Dateien in einem Site Package. Bei diesen Websites gibt es in Schritt 3 kein Feld Setup zum Bearbeiten. Betreut eine Agentur oder eine Fachperson die Website, senden Sie ihnen die Zeilen von oben, damit sie diese im Site Package ergänzen.

Betreuen Sie die Website selbst und möchten im Backend bleiben, legen Sie stattdessen auf der Startseite einen kleinen TypoScript-Datensatz an:

1. Wählen Sie im linken Menü Content → Records (Inhalt → Datensätze; TYPO3 v13: Web → List, Web → Liste) und klicken Sie im Seitenbaum auf die Startseite Ihrer Website.
2. Klicken Sie auf Create new record (Neuen Datensatz erstellen) und dann auf TypoScript record (TypoScript Datensatz).
3. Geben Sie einen Titel wie botts.ai widget ein, fügen Sie die Zeilen ins Feld Setup ein und klicken Sie auf Save (Speichern). Lassen Sie die übrigen Tabs unverändert.
4. Leeren Sie die Frontend-Caches wie in Schritt 6 und prüfen Sie Ihre Website wie in Schritt 7.

TYPO3 wendet diesen Datensatz zusätzlich zum TypoScript aus Ihren Site Sets an.

Falls das Widget nicht erscheint

1. Prüfen Sie, ob die Zeilen im Feld Setup des TypoScript-Datensatzes auf Ihrer Startseite stehen, ob Sie gespeichert und die Frontend-Caches geleert haben.
2. Prüfen Sie den Schlüssel in der ersten Zeile page.includeJSFooter.botts: IHR_API_KEY muss durch Ihren eigenen Schlüssel ersetzt sein, ohne Leerzeichen oder Anführungszeichen.
3. Prüfen Sie, ob TYPO3 die Zeilen verwendet: Wählen Sie im Modul TypoScript Active TypoScript (Aktives TypoScript) und suchen Sie unter page nach includeJSFooter. Heisst das Seitenobjekt Ihrer Website nicht page, wenden Sie sich an die Person, die Ihre Website eingerichtet hat.
4. Leeren Sie weitere Caches. Der Cache Ihres Hosters oder ein CDN vor Ihrer Website kann die Seite noch ohne Widget ausliefern.
5. Testen Sie in einem privaten Fenster ohne Werbeblocker. Blockiert Ihr Cookie-Banner oder Ihr Consent-Tool Scripts, prüfen Sie dessen Konfiguration. Sendet Ihre Website eine Content Security Policy (das ist mit TYPO3 möglich), muss sie api.botts.ai erlauben.
6. Prüfen Sie, ob der Schlüssel zum richtigen Deployment gehört und ob das Deployment im Tab Bereitstellen eingeschaltet ist.

Widget ändern oder entfernen

Farben, Texte, den Launcher und alle anderen Einstellungen des Widgets ändern Sie im botts.ai Editor. Ihre Website übernimmt sie, ohne dass Sie in TYPO3 etwas ändern. Anpassen müssen Sie die Zeilen nur, wenn sich der Schlüssel des Deployments ändert: Ersetzen Sie dann den Schlüssel in der ersten Zeile page.includeJSFooter.botts.

Um das Widget zu entfernen, löschen Sie die botts.ai Zeilen (den Kommentar und alle Zeilen, die mit page.includeJSFooter.botts beginnen) aus dem Feld Setup, speichern und leeren die Frontend-Caches erneut.

Weitere Hilfe

• TYPO3-Dokumentation: TypoScript backend module (englisch)
• TypoScript-Referenz: includeJSFooter (englisch)
• Die allgemeinen Schritte für jede Website: Einbettungscode

Zuletzt aktualisiert am 4. Oktober 2026