Widget-Vorlagen anpassen
Volle Kontrolle über Ihr Chat-Widget — bearbeiten Sie jeden der 15 visuellen Slots (Produktkarten, Nachrichtenblasen, Modale, Header, CSS) im integrierten Vorlageneditor.
Was Slot-Vorlagen sind
Jedes Theme in Upsellic besteht aus 15 unabhängigen Slot-Vorlagen. Jeder Slot definiert ein visuelles Fragment des Widgets — zum Beispiel die Produktkarte, die angezeigt wird, wenn die KI ein Produkt empfiehlt, oder das Bewertungs-Modal, das erscheint, wenn ein Kunde den Chat schließt. Slots sind in Nunjucks geschrieben (eine Template-Sprache ähnlich Twig, Handlebars oder Jinja), und ein einzelner STYLES-Slot enthält das gesamte CSS, das das Layout zusammenhält.
Das bedeutet: Jeder Teil des Widgets, den der Besucher sieht, ist editierbar — pro Händler, pro Theme. Sie können den Chat in jedem Detail an das visuelle Design Ihres Shops anpassen — Farben, Typografie, Abstände, Buttonformen, Kartenlayouts — ohne Aufwand auf unserer Seite und ohne Auswirkung auf das Widget eines anderen Händlers.
Die 15 Slots
| Slot | Was er rendert |
|---|---|
PRODUCT_CARD | Produktempfehlungskarte in der Assistentennachricht |
CONTENT_CARD | Artikel- / Inhaltsempfehlungskarte |
ORDER_CARD | Bestellverfolgungskarte mit Status und Versandlink |
WELCOME_MESSAGE | Begrüßung beim ersten Öffnen des Chats |
GOODBYE_MESSAGE | Verabschiedung am Ende der Konversation |
HEADER | Obere Leiste des Widgets (Titel, Untertitel, Bedienelemente) |
FOOTER | Branding-Leiste unter dem Eingabefeld |
QUANTITY_TIERS | Mengenpreis-Block für das Produkt |
MESSAGE_USER | Nachrichtenblase des Kunden |
MESSAGE_ASSISTANT | Nachrichtenblase des Assistenten |
PRODUCT_MODAL | Vollständiges Produktdetail-Popup nach Klick auf eine Karte |
RATING_MODAL | Konversationsbewertungs-Popup mit Sentiment-Buttons |
HANDOFF_UI | Übergabe-Bildschirme an Live-Agent (Wartend / Verbunden / Ersatzkanäle) |
STYLES | Komplettes CSS-Bundle des Themes |
Slots greifen auf gemeinsame Variablen zu — theme.primaryColour, phrases.viewProduct, product.salePrice usw. — selbst wenn Sie das gesamte HTML neu schreiben, verbindet das Widget weiterhin automatisch Produktdaten, Farbeinstellungen und Übersetzungen.
System-Themes vs. eigene Themes
Upsellic liefert System-Themes (default, minimal, editorial) — die sind als Vorlagen schreibgeschützt, damit unsere Updates niemandem die Anpassungen überschreiben. Um ein Widget anzupassen, klonen Sie zuerst eines der System-Themes in ein privates eigenes Theme, das nur zu Ihrem Konto gehört. Ab diesem Moment gehört das Theme Ihnen und Sie können es frei bearbeiten.
System-Theme klonen
Bevor Sie eine Vorlage bearbeiten können, brauchen Sie ein eigenes Theme — eine Kopie eines System-Themes, die nur in Ihrem Konto existiert.
Themes-Liste öffnen
Klicken Sie im Dashboard-Seitenmenü auf Themes. Sie sehen alle verfügbaren Themes — System-Themes sind separat von eigenen Themes gekennzeichnet, die Sie zuvor erstellt haben.
Auf "Klonen" beim gewünschten System-Theme klicken, das als Ausgangspunkt dienen soll
Es erscheint ein Modal mit der Frage nach dem Namen Ihres neuen Themes. Wählen Sie einen Namen, der die Marke oder den Zweck widerspiegelt (z. B. Weihnachtsedition, Mobile-First, NL-Shop).
Nach Bestätigung erscheint das neue eigene Theme in der Liste — alle 15 Slots sind aus dem geklonten System-Theme vorbefüllt. Auch die Farben werden kopiert, aber alles ist jetzt editierbar.
Das geklonte System-Theme bleibt unverändert und ist im Editor weiterhin als "Mit Quelle vergleichen"-Referenz verfügbar — nützlich, wenn Sie genau sehen wollen, was Sie geändert haben.
Slot bearbeiten
Vorlageneditor öffnen
Klicken Sie auf der Karte eines beliebigen eigenen Themes auf Code-Editor. Der Editor zeigt links eine Liste aller 15 Slots, im Hauptbereich den Monaco-Editor und rechts ein Live-Vorschau-Panel, das das Widget aus dem aktuellen Entwurf rendert.
Slot zum Bearbeiten auswählen
Klicken Sie auf einen Slotnamen in der Seitenleiste — der Editor lädt den Inhalt dieses Slots, und die Vorschau wird neu gerendert. Der aktive Slot ist hervorgehoben, und Slots mit ungespeicherten Entwürfen (mehr dazu gleich) sind markiert, sodass Sie sehen, was bearbeitet wurde.
Änderungen vornehmen
Der Editor ist vollwertiges Monaco (dieselbe Engine wie VS Code) mit Syntax-Highlighting für HTML / Nunjucks (in Slot-Vorlagen) und CSS (im STYLES-Slot). Klammer-Matching, Zeilennummern, Multi-Cursor, Suchen & Ersetzen, Tastenkürzel — alle Funktionen, die Sie zum Bearbeiten von Code brauchen.
Jeder Tastenanschlag wird automatisch als Entwurf gespeichert. Entwürfe bleiben privat im Editor und haben null Auswirkung auf das produktive Widget — Ihre Kunden sehen weiterhin die zuletzt veröffentlichte Version, bis Sie auf Veröffentlichen klicken.
Live-Vorschau nutzen
Das Vorschau-Panel rechts rendert das Widget jedes Mal neu, wenn sich der Entwurf ändert. Es verwendet Beispieldaten für Produkte / Inhalte / Bestellungen, sodass Sie sehen können, wie Karten, Blasen, Modale und Preise aussehen, ohne echte Chats zu senden. Klicken Sie in der Vorschau auf eine Produktkarte, um das Modal zu prüfen, das Sie gerade bearbeitet haben.
Änderungen veröffentlichen
Entwürfe ermöglichen sicheres Experimentieren. Um Ihre Änderungen zu veröffentlichen, sieht der Workflow so aus:
Mit Quelle vergleichen
Klicken Sie auf Mit Original vergleichen beim bearbeiteten Slot. Der Editor wechselt in den Side-by-Side-Diff-Modus (eingebauter Diff-Editor von Monaco) — links die ursprüngliche System-Vorlage, rechts Ihr Entwurf. Jeder Unterschied wird Zeile für Zeile hervorgehoben, sodass Sie genau sehen, was sich vor dem Live-Gang ändern wird.
Einen einzelnen Slot — oder alle auf einmal — veröffentlichen
Klicken Sie auf Veröffentlichen, um den Entwurf des aktiven Slots in die Produktion zu schieben. Oder klicken Sie auf Alle veröffentlichen in der Symbolleiste, um alle Slots mit ungespeicherten Änderungen zu veröffentlichen — das leert zusätzlich den Theme-Cache in einem Schritt, was schneller ist, wenn Sie viele Slots bearbeiten.
Die Veröffentlichung sendet intern ein theme.updated-Ereignis. Das Widget-Bundle für jedes aktive Widget mit diesem Theme wird neu gebaut, der CDN-Cache geleert. Der nächste Seitenaufruf bei Ihren Kunden liefert die neue Version.
Verwerfen oder Zurücksetzen, wenn etwas schiefgeht
- Entwurf verwerfen — setzt den Slot-Entwurf auf das aktuell Veröffentlichte zurück und nimmt unveröffentlichte Änderungen zurück.
- Zurücksetzen — lädt den Slot aus der ursprünglichen System-Vorlage neu (dem Theme, von dem dieses Theme geklont wurde). Nützlich, wenn Sie mit der Bearbeitung des Slots von Grund auf neu beginnen möchten.
Widget-Cache leeren
Meistens müssen Sie den Cache nicht manuell leeren — das Veröffentlichen eines Slots erledigt das bereits automatisch. Für die seltenen Fälle, in denen Sie einen Rebuild erzwingen möchten, gibt es in der Editor-Symbolleiste einen Button Widget-Cache leeren.
Der Button leert sowohl den In-Memory-Bundle-Cache auf unserer API als auch den CDN-Cache für jedes aktive Widget mit diesem Theme. Der nächste Request baut das Bundle aus den aktuell veröffentlichten Vorlagen neu.
Themes exportieren und importieren
Themes sind portabel — Sie können ein komplettes eigenes Theme exportieren (Farben + alle 15 Slots, Entwürfe und veröffentlicht, in einer einzigen JSON-Datei) und später wieder importieren, im selben Konto oder einem anderen.
Exportieren
Klicken Sie auf der Karte eines eigenen Themes auf Exportieren. Eine JSON-Datei wird auf Ihren Rechner heruntergeladen mit einem Namen wie MyTheme.2026-05-01T12-34-56.theme.json. Bewahren Sie sie sicher auf — es ist ein vollständiger Snapshot des Themes.
System-Themes können nicht direkt exportiert werden. Klonen Sie zuerst das System-Theme, dann exportieren Sie das geklonte Theme.
Importieren
Klicken Sie auf Theme importieren in der Symbolleiste oben in der Themes-Liste und wählen Sie eine JSON-Datei. Das importierte Theme landet immer als neues eigenes Theme — sein Name ist der Originalname mit angehängtem Importzeitstempel, z. B. MyTheme (import 2026-05-01 14:22:08).
Importieren überschreibt nie ein bestehendes Theme. Das bedeutet, Sie können:
- Eine Anpassung zurückrollen, indem Sie einen älteren Snapshot importieren — die vorherige Version kommt als völlig neues Theme an, das Sie in den Widget-Einstellungen auswählen.
- Experimentieren — einen Snapshot importieren, ohne das Original anzufassen, A/B-Tests durch Themewechsel beim Widget machen.
Um ein importiertes Theme für ein Widget live zu schalten, gehen Sie zu Widgets, bearbeiten das gewünschte Widget und wählen das importierte Theme aus der Theme-Liste. Der Wechsel ist sofort — der nächste Seitenaufruf bei Kunden liefert das neue Theme.