Web app
Die Web app ist die PWA für Ihre Mitglieder — die Seite, die Mitglieder über einen Link, einen QR-Code oder nach der Installation als App öffnen. Hier sehen sie Guthaben und Geschenke, scannen zum Bezahlen, stöbern in Menüs oder Standorten, geben Gutscheincodes ein und laden ihren Wallet Pass herunter.
Das gesamte Design der Web app ist jetzt Self-Service. Unter Benutzeroberflächen → Web app finden Sie den App Editor: Theme und Markenfarben, jeden Screen mit seinen Komponenten, Popups und erweiterte Stil-Overrides. Änderungen landen in einem Entwurf — nichts, was Ihre Mitglieder sehen, ändert sich, bis Sie Publish drücken. Vorher können Sie mit Preview prüfen und später über History zurückrollen. Die häufigste Alltagsänderung bleibt das Carousel auf dem Home-Screen: Banner-Bilder tauschen und festlegen, was beim Antippen passiert.
Der App Editor
Öffnen Sie Benutzeroberflächen → Web app im Hub. Die linke Leiste ist die Landkarte des Editors; die Fläche rechts zeigt die Einstellungen dessen, was Sie auswählen.
Der Editor ist in vier Bereiche gegliedert:
- Theme & Brand — das globale Erscheinungsbild: Markenfarben, Eckenradius, Schrift und die Navigationsleiste.
- Popups — Meldungen nach dem Login, überall in der App, an keinen Screen gebunden.
- Screens — ein Eintrag pro Screen der App: der Home-Screen plus die eingebauten Seiten (Login, Verifizierung, Registrierung, Geschenke, Profil, Aktivitäten, Code-Eingabe, Kataloge…).
- Advanced — rohe Stil-Overrides für Randfälle, die die normalen Panels nicht abdecken.
Entwurf → Preview → Publish
Nichts, was Sie bearbeiten, geht direkt live. Jedes Save schreibt in einen Entwurf; die obere Leiste zeigt, ob unveröffentlichte Änderungen vorliegen. Von dort:
- Preview — den Entwurf genau so sehen, wie Mitglieder ihn sehen würden, bevor Sie sich festlegen.
- Publish — den Entwurf für alle Mitglieder live schalten.
- Discard draft — unveröffentlichte Änderungen verwerfen und zur Live-Version zurückkehren.
- History — jede veröffentlichte Version bleibt erhalten, und Sie können zu jeder zurückrollen.
Die obere Leiste zeigt außerdem Validierungswarnungen, wenn eine Einstellung einen Wert enthält, den die App nicht interpretieren kann (etwa Text, wo eine Zahl erwartet wird). Beheben Sie Warnungen vor dem Publizieren — der Entwurf wird laufend geprüft, das Badge aktualisiert sich beim Bearbeiten.
Theme & Brand — das globale Erscheinungsbild
Hier übernimmt die Web app Ihre Identität: die Markenfarben (Primär, Sekundär, Text), der Eckenradius für Karten und Buttons und die Schrift. Hier steuern Sie auch die Navigationsleiste unten in der App: ihre Farben, ob Beschriftungen angezeigt werden, welche Einträge in welcher Reihenfolge erscheinen und ob die Leiste (oder der mittlere Button oder die obere App-Leiste) überhaupt sichtbar ist.
Einstellungen hier gelten überall — ändern Sie eine Markenfarbe einmal, und jeder Screen folgt.
Screens
Screens gibt es in zwei Ausprägungen:
Der Home-Screen ist eine Leinwand. Er ist ein Stapel von Komponenten, die Sie hinzufügen, entfernen, umsortieren, duplizieren und bearbeiten können — ein Logo-Bild, eine Begrüßung, ein Fortschrittsbalken für Stufen oder Punkte, Carousels, Button-Reihen, Textblöcke und mehr. Jede Komponente öffnet ihr eigenes Einstellungs-Panel: auf der einen Seite wählen Sie den Inhalt (Bild, Text, Link), auf der anderen das Aussehen (Farben, Abstände, Ausrichtung). Hier steckt der größte Teil der visuellen Persönlichkeit Ihrer App.
Die übrigen Screens sind eingebaut. Seiten wie Gifts, Profile, Activities, der Login- und Registrierungs-Flow oder die Code-Eingabe haben ein festes Layout — Sie bearbeiten ihre Texte (Screen-Titel, Button-Beschriftungen, Leer- und Fehlermeldungen) und ihr Aussehen (Hintergrundfarbe oder -bild). So funktioniert jeder Ablauf weiterhin korrekt, und Sie treffen trotzdem in jeder Sprache Ihren Ton.
Jeder Screen hat zusätzlich einen kleinen Settings-Block für seinen Hintergrund und — nur relevant, wenn Ihr Programm eine native Mobile-App hat — den Stil der Status- und Unterleiste des Telefons auf diesem Screen.
Das Carousel — Ihre Banner-Fläche
Das Carousel ist die meistbearbeitete Komponente und funktioniert wie eine rotierende Banner-Fläche auf dem Home-Screen. Pro Folie steuern Sie:
- Das Bild — Folien hinzufügen, entfernen oder umsortieren; jede Folie ist ein Bild.
- Die Aktion — was beim Antippen passiert: nichts (dekorativ), ein Popup öffnen, eine URL öffnen (in der App oder in neuem Tab), die „App installieren"-Aufforderung auslösen, den Wallet Pass herunterladen, eine Wegbeschreibung öffnen oder eine E-Mail starten.
- Wer sie sieht — eine Folie optional auf Mitglieder mit bestimmten Tags beschränken. Leer lassen, um sie allen zu zeigen. So laufen VIP- oder segmentspezifische Banner im selben Carousel.
Die Carousel-weiten Einstellungen (Hintergrund, Auto-Play, Geschwindigkeit, Endlosschleife) stehen über der Folienliste. Ein Home-Screen kann mehrere Carousels enthalten — viele Betriebe nutzen ein Carousel mit nur einer Folie als antippbaren Banner-Button.
Popups
Popups erscheinen nach dem Login, über dem Screen, auf dem sich das Mitglied gerade befindet. Jedes Popup hat seinen Inhalt (Bild, Text, Aktions-Button), eine Verzögerung und ein Häufigkeitslimit — wie oft ein Mitglied es sieht. Typische Einsätze: eine Erinnerung „Füge diese App deinem Home-Bildschirm hinzu", eine Saisonkampagnen-Ankündigung, ein einmaliger Hinweis.
Advanced
Der Bereich Advanced öffnet rohe Stil-Overrides (Stile pro Komponente und pro Seite, eigenes CSS für Navigationsleiste und Login-Footer). Das sind Power-User-Einstellungen ohne Sicherheitsnetz — ein falscher Wert kann das Styling für alle Mitglieder beschädigen. Auch hier gelten die Entwurfsregeln, Discard draft macht ein missglücktes Experiment rückgängig; wenn Sie unsicher sind, fragen Sie trotzdem zuerst den Support.
Der Editor ist tief — mit Absicht: Fortgeschrittene können nahezu alles gestalten. Für die tägliche Arbeit brauchen Sie selten mehr als Screens → HomeScreen und die Carousels darauf. Fertige Templates sind unterwegs — größere Redesigns starten dann mit einem Klick statt Komponente für Komponente.