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. Dort sehen sie ihr Guthaben und ihre Geschenke, scannen zum Bezahlen, stöbern in Menüs oder Filialen, geben Coupon-Codes ein und laden ihren Wallet Pass herunter.

Kurz gefasst

Das gesamte Design der Web app ist Self-Service. Unter Benutzeroberflächen → Web app finden Sie den App Editor: Brand colors, jeden Screen und seine Komponenten, Popups, das Installationsverhalten und erweiterte Style-Overrides. Änderungen werden in einem Draft gespeichert — für Ihre Mitglieder ändert sich also nichts, bis Sie auf Publish klicken. Vorher können Sie mit Preview prüfen und später über History zurückrollen. Die häufigste Änderung im Alltag ist nach wie vor das Carousel auf dem Home-Screen: Bannerbilder austauschen und festlegen, was passiert, wenn ein Mitglied darauf tippt.

Der App Editor

Öffnen Sie im Hub Benutzeroberflächen → Web app. Das linke Panel ist die Landkarte des Editors; die Arbeitsfläche rechts zeigt die Einstellungen des jeweils ausgewählten Elements.

Der Editor ist in sechs Bereiche gegliedert:

• Theme & Brand — das globale Erscheinungsbild: Brand colors, Corner radius, Logo und Favicon, Font und die Navigation bar.
• PWA — wie sich die App präsentiert, wenn ein Mitglied sie auf dem Startbildschirm seines Telefons installiert.
• App Settings — Grafiken und Farben für eine native Mobile-App in den App-Stores. Andere Aufgabe, anderes Publikum — deshalb hat dieser Bereich eine eigene Seite: Mobile App.
• Popups — Nachrichten, die nach dem Login angezeigt werden, überall in der App und nicht an einen Screen gebunden.
• Screens — ein Eintrag pro Screen der App: der Home-Screen plus die integrierten Seiten.
• Advanced — rohe Style-Overrides für Sonderfälle, die die regulären Panels nicht abdecken.

Der Rest dieser Seite führt durch diese Bereiche. Sie listet nicht jedes Feld auf — die meisten Farb- und Größenfelder tun genau das, was ihre Beschriftung sagt —, aber sie behandelt die Felder, die Sie verstehen sollten, bevor Sie sie ändern.

Draft → Preview → Publish

Nichts, was Sie bearbeiten, geht direkt live. Jedes Save schreibt in einen Draft; die obere Leiste zeigt Ihnen, ob unveröffentlichte Änderungen vorliegen. Von dort aus:

• Preview — den Draft genau so ansehen, wie ihn Mitglieder sehen würden, bevor Sie sich festlegen.
• Publish — den Draft für alle Mitglieder live schalten.
• Discard draft — unveröffentlichte Änderungen verwerfen und zur Live-Version zurückkehren.
• History — jede veröffentlichte Version wird aufbewahrt, und Sie können zu jeder davon zurückrollen.

Die obere Leiste zeigt außerdem Validierungswarnungen, wenn eine Einstellung einen Wert hat, den die App nicht interpretieren kann (etwa Text, wo eine Zahl erwartet wird). Beheben Sie Warnungen vor dem Veröffentlichen — der Draft wird laufend geprüft, das Badge aktualisiert sich also, während Sie bearbeiten.

Regeln, die überall im Editor gelten

• Jeder Speichern-Button — Save draft, Save settings, Save list, Save — schreibt in denselben Draft. Nichts erreicht Ihre Mitglieder, bis Sie Publish drücken.
• Ein leeres Farbfeld bedeutet in der Regel „erben“ — die App greift auf das Theme zurück.
• Überall dort, wo Sie Insert token sehen, können Sie Mitgliederdaten in den Text einfügen (Name, Guthaben …), sodass sich ein einzelner Text pro Mitglied selbst personalisiert.
• Icon-Felder erwarten einen Iconify-Namen wie tabler:plus. Font-Awesome-Klassen werden von der App ignoriert.

Theme & Brand

Das globale Erscheinungsbild. Ändern Sie hier etwas, folgt jeder Screen.

• Brand colors — primär, sekundär und Text. Der Rest des Editors greift darauf zurück, legen Sie sie also zuerst fest.
• Layout → Corner radius — eine einzige Zahl, die auf Karten und Buttons in der gesamten App angewendet wird. Einzelne Panels können sie überschreiben.
• Brand assets
  • Favicon — das Icon im Browser-Tab. Nach der Veröffentlichung ist es außerdem der Avatar dieses Unternehmens im Hub, es taucht also an Stellen auf, an denen Sie es vielleicht nicht erwarten.
  • Logo — der Fallback für das Login-Logo, wenn Screens → Login Page kein eigenes Logo hat, und das Logo auf den Seiten für Abmeldung und Datenlöschung. Wenn Sie es hier festlegen, deckt das alle drei auf einmal ab.
• Buttons — Hintergrund- und Textfarbe, Höhe und Innenabstand der Standard-Buttons der App.
• Iframe dialog — der Vollbild-Dialog, der sich öffnet, wenn ein Mitglied etwas antippt, das ein PDF oder eine externe Seite lädt. Lassen Sie Header icon color leer, folgt es der Titelfarbe.
• Font — wählen Sie den Anbieter und tippen Sie dann den Namen der Schriftfamilie genau so, wie dieser Anbieter ihn schreibt.

• Navigation bar — die Leiste am unteren Rand der App.
  • Nav bar type und Show labels ändern ihre Form und ob die Namen der Einträge unter den Icons erscheinen.
  • Visibility — drei unabhängige Schalter: die nav bar selbst, der center button (der erhöhte runde Button, den einige Layouts verwenden) und die app bar am oberen Rand. Wenn Sie die Nav bar ausschalten, sorgen Sie dafür, dass der Home-Screen den Mitgliedern einen anderen Weg zu den übrigen Screens bietet.
  • Navigation items — zum Umsortieren ziehen, mit dem Stift Beschriftung und Ziel bearbeiten, mit dem Papierkorb entfernen. Diese Liste ist das, worauf Mitglieder tatsächlich tippen — beschränken Sie sie also auf die Screens, die sie nutzen.

PWA

Wie sich die Web app verhält, sobald ein Mitglied sie auf dem Startbildschirm seines Telefons installiert. Das ist die installierte Website, nicht die native App in den Stores — dafür siehe Mobile App.

Legen Sie das fest, bevor Sie zur Installation aufrufen

Änderungen hier aktualisieren bereits installierte Apps nicht. Ein Icon auf dem Startbildschirm behält seinen alten Namen und sein altes Bild, bis das Mitglied es entfernt und erneut installiert.

• App name — der vollständige Name, der bei der Installation angezeigt wird.
• Short name — die Beschriftung unter dem Icon auf dem Startbildschirm. Telefone kürzen lange Beschriftungen ab, halten Sie sie also kurz.
• Description — wird von manchen Browsern in der Installationsaufforderung angezeigt.
• Manifest icons — der Icon-Satz, aus dem das Telefon wählt, wenn es das Icon auf dem Startbildschirm zeichnet. Save list speichert diesen Block für sich allein.

Popups

Nachrichten, die nach dem Login über dem Screen angezeigt werden, auf dem sich das Mitglied gerade befindet — nicht an einen bestimmten Screen gebunden.

• Popup type — wofür das Popup da ist. installReminder ist zum Beispiel der Hinweis „Fügen Sie diese App zu Ihrem Startbildschirm hinzu“.
• Style und Content type — wie es dargestellt wird und was hineinkommt.
• Delay (ms) — wie lange nach dem Login es erscheint. 2000 sind zwei Sekunden; geben Sie dem Screen zuerst Zeit zum Laden.
• Show how many times — die Häufigkeitsbegrenzung pro Mitglied. -1 bedeutet genau einmal; jede positive Zahl steht für entsprechend viele Einblendungen.
• Title und Body — der Text, mit Insert token für Mitgliederdaten.
• Close button und "Don't show again" text — lassen Sie sie leer, verwendet das Popup seine Standardwerte.
• Image oder Lottie URL — ein Standbild oder eine Animation. Error title und Error Lottie URL decken den Fall ab, dass die Aktion des Popups fehlschlägt.

Save list speichert die gesamte Popup-Liste auf einmal.

Screens

Screens gibt es in zwei Varianten.

HomeScreen ist eine Arbeitsfläche

Der Home-Screen ist ein Stapel aus Komponenten, die Sie hinzufügen, neu anordnen, duplizieren und löschen. Jede öffnet sich in ihrem eigenen Einstellungs-Panel: auf der einen Seite der Inhalt (Bild, Text, Link), auf der anderen das Aussehen. Hier steckt der größte Teil der visuellen Persönlichkeit Ihrer App.

Über dem Stapel legt der Settings-Block des Screens die Hintergrundfarbe oder das Hintergrundbild fest sowie die nativen Status- und unteren Leisten.

Das Icon </> an einer Komponente öffnet ihre rohe Konfiguration. Das ist praktisch, um eine Komponente von einer Stelle an eine andere zu kopieren, aber es gilt dieselbe Vorsicht wie unter Advanced — was Sie dort einfügen, wird nicht validiert.

Das Carousel — Ihre Bannerfläche

Das Carousel ist die am häufigsten bearbeitete Komponente und funktioniert wie eine rotierende Bannerfläche. Pro Slide steuern Sie:

• Das Bild — Slides hinzufügen, entfernen oder neu anordnen; jeder Slide ist ein Bild.
• Die Aktion — was passiert, wenn ein Mitglied darauf tippt: nichts (dekorativ), ein Popup öffnen, eine URL öffnen (in der App oder in einem neuen Tab), die Aufforderung „Diese App installieren“ auslösen, den Wallet Pass herunterladen, eine Wegbeschreibung öffnen oder eine E-Mail starten.
• Wer ihn sieht — beschränken Sie einen Slide optional auf Mitglieder mit bestimmten Tags. Lassen Sie das Feld leer, sehen alle den Slide. So spielen Sie VIP-exklusive oder segmentspezifische Banner innerhalb desselben Carousels aus.

Die Einstellungen für das gesamte Carousel stehen über der Slide-Liste: Hintergrundfarbe, Auto play mit der Geschwindigkeit in Sekunden, Transition speed, Infinite für endloses Durchlaufen und Pagination dots für die Positionsanzeige.

Ein Home-Screen kann mehrere Carousels enthalten, und viele Unternehmen nutzen ein Carousel mit nur einem Slide als antippbaren Banner-Button.

Die übrigen Screens sind integriert

Login, Verification, Registration, Gifts, Profile, Activities und die übrigen haben ein festes Layout. Was Sie bearbeiten, sind ihre Texte — Screen-Titel, Button-Beschriftungen, Meldungen für Leerzustände und Fehler — und ihr Aussehen: Hintergrund, Kartenstil, Icons. So funktioniert jeder Ablauf weiterhin korrekt, und trotzdem können Sie Ihre Tonalität in jeder Sprache treffen.

Zwei Dinge haben die meisten von ihnen gemeinsam:

• Einen Button Disable screen, der den Screen vollständig aus der App nimmt. Die zentralen Anmelde-Screens haben ihn nicht.
• Native bars — Stil der Statusleiste und der unteren Leiste, nur relevant, wenn Ihr Programm eine native Mobile-App hat.

GenerateCode erscheint ausgegraut, wenn diese Funktion für das Unternehmen nicht aktiviert ist.

Anmeldeablauf — Login, Verification, Registration, VerificationPlus

Login Page — Seitentitel, Beschriftung des Submit-Buttons und zwei Fehlermeldungen (No-connection, Too-many-attempts). Der Logo-Block ist ein Override pro Screen: Lassen Sie das Bild leer, greift er auf das unter Theme & Brand festgelegte Unternehmenslogo zurück. Logo width nimmt eine CSS-Breite wie 70% entgegen und wird ignoriert, solange Full width aktiv ist. Der Rest ist Styling für den Submit-Button, den Titel und die Trennlinie im Footer.

Verification Page — Seitentitel, Fließtext, Hinweis und Button zum erneuten Senden sowie eine Notiz unter der Zeile zum erneuten Senden. In den Rich-Text-Feldern überleben nur <b>, <br> und <i>; alles andere wird entfernt.

Registration Page — Seitentitel, Submit-Button, No-connection-Meldung.

VerificationPlus — die dreistufige E-Mail-Verifizierung: Step 1 — email, Step 2 — code, Step 3 — success, jeweils mit eigenem Titel und eigener Beschreibung, plus Platzhalter und Submit-Beschriftung des E-Mail-Formulars.

Mitglieder-Screens — Gifts, Profile, Activities

Gifts — Screen-Titel und der Leerzustand No gifts message. Gift card style formt die Karte, die Mitglieder sehen: Beachten Sie, dass erst das Setzen einer Border color den Rahmen einschaltet und ein leerer Icon corner radius auf den globalen Corner radius zurückfällt. Gift card texts umfassen die Gültig-bis-Zeile, die Beschriftung der Stempelkarte, die Geschenk-Beschriftung und den Schließen-Button.

Profile — Screen-Titel, der Text der Abmelde-Zeile und das Styling der Infokarte, des Abmelde-Buttons und des Menü-Containers. Das Abmelde-Icon kann ein Iconify-Name, ein Font-Awesome-Icon, ein hochgeladenes Bild oder eine Lottie-Animation sein. Divider color wird nur angezeigt, wenn Gap between rows auf 0 steht.

Menu buttons sind die Zeilen, die ein Mitglied unter Profile sieht — persönliche Daten, Benachrichtigungs-Voreinstellungen, Aktivität, Coupon-Codes, Ihre rechtlichen Hinweise, das Kontaktformular, die Anfrage zur Datenlöschung. Zum Umsortieren ziehen, mit dem Stift Beschriftung und Ziel bearbeiten, mit dem Papierkorb entfernen.

Activities — Screen-Titel, die Beschriftung des Show-more button und der Leerzustand, den Mitglieder vor ihrem ersten Kauf sehen. Expand/collapse icons nehmen Iconify-Namen entgegen. Filter categories sind die Chips über der Liste, und die Liste ist bearbeitbar — die Kategorien, nach denen Mitglieder filtern können, definieren Sie selbst.

Hilfs-Screens — UpdateMemberDetails, CommPermissions, EnterCode, Catalogs

UpdateMemberDetails — Screen-Titel, Speichern-Button, No-connection-Meldung. Das ist das Formular, mit dem Mitglieder ihre eigenen Daten vervollständigen oder korrigieren.

CommPermissions — dieselben drei Felder, plus ein Button icon für den Submit-Button. Hier verwalten Mitglieder, über welche Kanäle sie von Ihnen hören möchten.

EnterCode — hier geben Mitglieder einen Coupon-Code ein. Screen-Titel, Titel und Beschreibung der Code-Karte, Platzhalter im Eingabefeld, Pflichtfeld-Meldung und Submit-Beschriftung, plus drei Meldungen: Success, Invalid-code und Already-used. Code dots sind die visuellen Platzhalter für die Ziffern — deaktivieren Sie Show dots für ein einfaches Eingabefeld.

Catalogs — die Listen in Ihrer App zum Durchstöbern: Restaurants, Partner, ein schwarzes Brett, eine Speisekarte.

Benennen Sie keine Katalog-ID um

Über die ID verlinken Buttons auf einen Katalog (/catalog?catalog=<id>). Eine Umbenennung macht jeden Button kaputt, der auf die alte ID zeigt.

Advanced

Kein Sicherheitsnetz

Das sind rohe Einstellungen ohne Validierung. Ein falscher Wert kann das Styling der App für alle Mitglieder zerstören. Sie gehen wie alles andere in den Draft, Discard draft macht ein Experiment also rückgängig — aber nur so lange, bis Sie es veröffentlichen.

Vier Felder, alle in JSON:

• Component style overrides (businessStyles.components) — Theme-Overrides pro Komponente, etwa die Titelleiste des In-App-Browsers oder das Styling der Einträge in der Nav bar.
• Page style overrides (businessStyles.pages) — Overrides pro Seite, etwa der Login-Container und das Login-Formular.
• Nav bar custom CSS und Login footer custom CSS — rohe CSS-Style-Keys, die auf dieses Element angewendet werden.

Eine Regel erwischt alle: Verwenden Sie camelCase. marginTop funktioniert; margin-top wird stillschweigend ignoriert.

Wenn Sie nicht sicher sind, was ein Key bewirkt, fragen Sie den Support, bevor Sie hier speichern.

Wo Sie anfangen

Der Editor ist mit Absicht tief — fortgeschrittene Nutzer 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 in Arbeit; sie machen aus einem größeren Redesign einen Startpunkt mit einem Klick statt eines Aufbaus Komponente für Komponente.