Externe Panels

Mit externen Panels betten Sie beliebige externe Webseiten oder API-Daten direkt in Admin-Seiten ein — in der Produktbearbeitung, der Bestelldetailansicht, der Kundendetailansicht und dem Dashboard. Konfiguration erfolgt einmalig zentral; die Panels erscheinen danach automatisch auf den Zielseiten.

Panels verwalten

Öffnen Sie Einstellungen → Externe Panels im Admin-Bereich (direkte URL: /admin/settings/external-panels).
Die Liste zeigt alle angelegten Panels mit Zielseite, Modus und Status.
Die Kopfzeile zeigt den aktuellen Zähler (z. B. 3 / 25) — maximal 25 Panels pro Mandant.

Panel anlegen

Klicken Sie auf Panel hinzufügen oben rechts.
Der Button ist deaktiviert, sobald das Limit von 25 erreicht ist.
Füllen Sie das Formular aus (→ Felder im Überblick).
Klicken Sie auf Speichern — das Panel erscheint sofort in der Liste.

Panel bearbeiten

Klicken Sie in der Zeile auf das Bearbeiten-Symbol (Stift).
Das Formular öffnet sich mit allen gespeicherten Werten.
Nehmen Sie Änderungen vor und klicken Sie auf Speichern.

Panel aktivieren / deaktivieren

Schalten Sie den Aktiv-Toggle in der Zeile um — die Änderung wirkt sofort beim nächsten Laden der Zielseite.

Panel löschen

Klicken Sie auf das Löschen-Symbol in der Zeile.
Bestätigen Sie den Dialog — das Panel wird dauerhaft entfernt.

Felder im Überblick

Das Panel-Formular enthält folgende Einstellungen:

Feld	Pflicht	Standard	Beschreibung
Name	Ja	—	Bezeichnung im Panel-Header der Zielseite
Zielseite	Ja	—	Produktbearbeitung, Bestelldetail, Kundendetail oder Dashboard
Modus	Ja	—	Iframe oder API + Template
URL	Ja	—	Externe URL; unterstützt `{{variablen}}`
API-Schlüssel	Nein	—	Wird verschlüsselt gespeichert; im Bearbeitungsmodus als `••• (unchanged)` angezeigt
API-Schlüssel-Header	Nein	`Authorization`	HTTP-Header, über den der Schlüssel gesendet wird (z. B. `X-Api-Key`)
HTML-Template	Nur API + Template	—	HTML mit `{{response.feldname}}`-Tokens
Position	Nein	`sidebar`	`sidebar` (rechte Spalte) oder `main` (linke/volle Spalte)
Höhe	Nein	`400px`	Beliebiger CSS-Wert, z. B. `600px` oder `50vh`
Anzeigereihenfolge	Nein	`0`	Niedrigere Zahl = weiter oben; mehrere Panels auf derselben Seite werden aufsteigend sortiert
Aktiv	—	Ja	Deaktiviertes Panel erscheint nicht auf der Zielseite

Hinweis zum API-Schlüssel: Lassen Sie das Feld beim Bearbeiten leer (steht auf ••• (unchanged)), um den gespeicherten Schlüssel zu behalten. Geben Sie einen neuen Wert ein, um ihn zu ersetzen.

Variablen in URLs

Panels können kontextsensitive Daten in ihre URL oder ihr Template einfügen. Sobald Sie eine Zielseite gewählt haben, erscheinen unter dem URL-Feld farbige Variablen-Chips.

Variablen einfügen

Setzen Sie den Cursor an die gewünschte Stelle im URL-Feld.
Bewegen Sie die Maus über einen Chip — ein Tooltip erklärt, was die Variable enthält.
Klicken Sie den Chip an — {{variablenname}} wird an der Cursorposition eingefügt.
Beim Laden der Zielseite ersetzt das System jeden Token durch den echten Wert des angezeigten Datensatzes.

Verfügbare Variablen nach Zielseite

Zielseite	Verfügbare Variablen
Produktbearbeitung	`sku`, `productId`, `productName`, `productSlug`, `categoryName`, `price`, `stockStatus`
Bestelldetail	`orderId`, `orderNumber`, `customerEmail`, `customerName`, `orderTotal`, `orderStatus`, `paymentMethod`
Kundendetail	`customerId`, `customerEmail`, `customerName`, `customerPhone`
Dashboard	`tenantId`, `tenantDomain`

Fehlende Variablen: Hat ein Datensatz keinen Wert für eine Variable (z. B. ein Produkt ohne SKU), wird der Token durch einen Leerstring ersetzt. Ein gelber Hinweisbalken im Panel listet auf, welche Variablen nicht belegt waren.

Sicherheit: Der Token {{api_key}} wird nie an den Browser übertragen. Bei Iframe-Panels löst der Server die URL auf und sendet einen Weiterleitungs-Response — der Schlüssel ist im Browser-Netzwerk-Tab nicht sichtbar. Leerzeichen innerhalb der geschweiften Klammern sind zulässig: {{ sku }} funktioniert genauso wie {{sku}}.

Iframe-Panels

Im Modus Iframe wird eine externe Webseite direkt als sandboxierter Rahmen in die Admin-Seite eingebettet.

Panel einrichten

Erstellen Sie ein Panel mit Modus Iframe und geben Sie die URL ein (mit optionalen {{variablen}}).
Öffnen Sie die Zielseite — das Panel erscheint als aufklappbare Karte unterhalb des Hauptinhalts.

Bedienung auf der Zielseite

Klicken Sie auf den Panel-Header oder das Chevron-Symbol, um das Panel ein- oder auszuklappen.
Während das Iframe lädt, wird ein Lade-Platzhalter angezeigt.
Antwortet der externe Dienst nicht innerhalb von 10 Sekunden, erscheint eine Timeout-Meldung mit zwei Optionen:
- Erneut versuchen — lädt das Iframe neu.
- In neuem Tab öffnen — öffnet die URL im Browser-Tab.

Einschränkungen

Iframes laufen im Sandbox-Modus (allow-scripts allow-same-origin allow-forms) — Pop-ups und Top-Level-Navigation sind blockiert.
Ist der externe Dienst nicht erreichbar, erscheint die Timeout-UI nach 10 Sekunden.

API + Template-Panels

Im Modus API + Template ruft der Server die externe API ab und rendert eine benutzerdefinierte HTML-Vorlage mit den Antwortdaten. API-Zugangsdaten verlassen den Server nie.

Panel einrichten

Erstellen Sie ein Panel mit Modus API + Template.
Geben Sie die API-URL ein (mit optionalen {{variablen}}).
Tragen Sie falls nötig den API-Schlüssel ein.
Schreiben Sie im Feld HTML-Template Ihren Inhalt. Verwenden Sie {{response.feldname}} für Werte aus der JSON-Antwort der API:
- Einfaches Feld: {{response.status}}
- Verschachteltes Feld: {{response.data.total}}
Öffnen Sie die Zielseite — das Panel ruft die Daten serverseitig ab, befüllt das Template und zeigt das Ergebnis an.

Verhalten bei Fehlern

Situation	Anzeige
Anfrage dauert länger als 8 Sekunden	Timeout-Meldung + Schaltfläche „Erneut versuchen"
Externe API gibt Fehler zurück	HTTP-Statuscode + Fehlermeldung + Schaltfläche „Erneut versuchen"
Rate-Limit erreicht	Spezifische Meldung; kein automatischer Wiederholungsversuch

Einschränkungen

Script-Tags im Template werden automatisch entfernt (DOMPurify-Bereinigung).
API-Antworten sind auf 1 MB begrenzt.
Rate-Limit: 30 Anfragen pro Minute pro Mandant, über alle API + Template-Panels hinweg.

Panels auf Admin-Seiten

Aktive Panels erscheinen automatisch auf ihrer jeweiligen Zielseite — keine seitenspezifische Konfiguration notwendig.

Produktbearbeitung

Öffnen Sie ein beliebiges Produkt unter /admin/products/[id] — alle aktiven Panels für "Produktbearbeitung" werden unterhalb des Editors eingeblendet, mit den Produktdaten des geöffneten Datensatzes.

Bestelldetail

Panels mit Position = Sidebar erscheinen in der rechten Spalte (unterhalb der Zeitleiste). Panels mit Position = Main erscheinen in der linken Spalte (unterhalb des Download-Bereichs). Mehrere Panels werden in der festgelegten Anzeigereihenfolge gestapelt.

Kundendetail

Panels erscheinen nur bei registrierten Kunden — nicht bei Gastbestellungen.

Dashboard

Das Dashboard stellt tenantId und tenantDomain als Kontext bereit. Panels erscheinen unterhalb der KPI-Karten.

Panels deaktivieren

Deaktivieren Sie ein Panel unter Einstellungen → Externe Panels — es verschwindet beim nächsten Laden der Zielseite.

Berechtigungen & Grenzen

Grenze	Wert
Maximale Panels pro Mandant	25
Iframe-Timeout	10 Sekunden
API-Timeout (API + Template)	8 Sekunden
Maximale API-Antwortgröße	1 MB
Rate-Limit (API + Template)	30 Anfragen / Minute / Mandant

Panels sind nur für Nutzer mit der Berechtigung settings:read sichtbar.
Schlägt ein Panel fehl (Komponentenfehler), sind andere Panels auf derselben Seite davon nicht betroffen — jedes Panel ist isoliert.

Nächste Schritte

Regeln erstellen & verwalten — Bedingungsregeln für Rabatte und Versand anlegen
Automatisierung & Event-Log — Geschäftsereignisse verfolgen