TYPO3 Integration

Die Lymbe AI TYPO3 Extension: Installation, TypoScript-Konfiguration und Backend-Modul.

Übersicht

Die Lymbe AI TYPO3 Extension integriert das Chat-Widget in deine TYPO3-Website. Die Extension unterstützt TYPO3 v11, v12 und v13 und bietet ein eigenes Backend-Modul für die Konfiguration.

Anforderungen

  • TYPO3 v11.5 LTS, v12.4 LTS oder v13.x
  • PHP 8.1 oder höher
  • Composer (empfohlen) oder Extension Manager
  • Ein aktives Lymbe AI Konto

Installation

Option 1: Composer (empfohlen)

composer require lymbe/typo3-extension
# Danach im TYPO3 Backend:
# Admin Tools -> Maintenance -> Analyze Database Structure -> Apply

Option 2: Extension Manager (TER)

  1. Gehe im TYPO3 Backend zu Admin Tools → Extensions
  2. Klicke auf „Get Extensions" und suche nach „lymbe_ai"
  3. Installiere und aktiviere die Extension
  4. Führe den Datenbank-Vergleich durch (Admin Tools → Maintenance)

TypoScript-Konfiguration

Nach der Installation muss die TypoScript-Konfiguration in dein Root-Template eingebunden werden:

  1. Gehe zu Web → Template → Dein Root-Template
  2. Unter „Includes" füge hinzu: „Lymbe AI: Default Configuration"
  3. Passe die Konstanten an

TypoScript-Konstanten

constants.typoscripttyposcript
plugin.tx_lymbeai {
  settings {
    # Dein API-Key
    apiKey = lymbe_sk_dein_api_key

    # Die Bot-ID
    botId = a1b2c3d4-e5f6-7890-abcd-ef1234567890

    # Widget-Position: bottom-right oder bottom-left
    position = bottom-right

    # Primärfarbe
    primaryColor = #09CC78

    # Widget-Sprache
    locale = de

    # Anzeigeverzögerung in Millisekunden
    delay = 0

    # Seiten-IDs auf denen das Widget NICHT angezeigt wird (kommasepariert)
    excludePages =

    # Seiten-IDs auf denen das Widget NUR angezeigt wird (kommasepariert, leer = alle)
    includePages =
  }
}

TypoScript-Setup

setup.typoscripttyposcript
# Das Widget-Script wird automatisch im Footer eingefügt
# Du kannst das Verhalten per TypoScript überschreiben:

page.includeJSFooterlibs {
  lymbe_widget = https://app.lymbe.ai/widget.js
  lymbe_widget.external = 1
  lymbe_widget.data-bot-id = {$plugin.tx_lymbeai.settings.botId}
  lymbe_widget.data-position = {$plugin.tx_lymbeai.settings.position}
  lymbe_widget.data-color = {$plugin.tx_lymbeai.settings.primaryColor}
}

Backend-Modul

Die Extension enthält ein eigenes Backend-Modul unter „Lymbe AI" im linken Menü. Hier kannst du:

  • Den API-Key und Bot visuell konfigurieren, ohne TypoScript zu bearbeiten
  • Die Verbindung zu Lymbe AI testen
  • Bot-Statistiken direkt im TYPO3 Backend einsehen
  • Die Widget-Vorschau anzeigen

Bedingte Einbindung (Conditions)

conditional.typoscripttyposcript
# Widget nur auf bestimmten Seiten laden (TYPO3 v12+)
[page["uid"] in [1, 15, 30]]
  page.includeJSFooterlibs.lymbe_widget = https://app.lymbe.ai/widget.js
  page.includeJSFooterlibs.lymbe_widget.external = 1
[end]

# Widget auf bestimmten Seiten ausschließen
[page["uid"] not in [42, 108]]
  page.includeJSFooterlibs.lymbe_widget = https://app.lymbe.ai/widget.js
  page.includeJSFooterlibs.lymbe_widget.external = 1
[end]

# Widget nur für nicht eingeloggte Benutzer
[!frontend.user.isLoggedIn]
  page.includeJSFooterlibs.lymbe_widget = https://app.lymbe.ai/widget.js
  page.includeJSFooterlibs.lymbe_widget.external = 1
[end]

Troubleshooting

  • TypoScript nicht geladen – Prüfe, ob die Static-Include im Root-Template eingebunden ist
  • Extension nicht sichtbar – Führe den Datenbank-Vergleich durch (Admin Tools → Maintenance)
  • Cache – Leere den TYPO3 Cache über Admin Tools → Maintenance → Flush Caches
  • CSP-Fehler – Füge app.lymbe.ai zur Content Security Policy in der Site Configuration hinzu