Webapp
The Webapp is the member-facing PWA — the page members open from a link, a QR, or after they've installed it as an app. It's where they see their balance and gifts, scan to pay, browse menus or branches, enter coupon codes, and download their Wallet Pass.
The whole Webapp design is now self-service. Under User Interfaces → Web app you'll find the App Editor: theme and brand colors, every screen and its components, popups, and advanced style overrides. Changes are saved to a draft, so nothing your members see changes until you hit Publish — and you can Preview first and roll back later from History. The most common day-to-day edit is still the home-screen carousel: swapping banner images and what happens when a member taps them.
The App Editor
Open User Interfaces → Web app in Hub. The left panel is the editor's map; the canvas on the right shows the settings of whatever you select.
The editor is organized in four areas:
- Theme & Brand — the global look: brand colors, corner radius, font, and the navigation bar.
- Popups — messages shown after login, anywhere in the app, not tied to a screen.
- Screens — one entry per screen of the app: the home screen plus the built-in pages (login, verification, registration, gifts, profile, activities, code entry, catalogs…).
- Advanced — raw style overrides for edge cases the regular panels don't cover.
Draft → Preview → Publish
Nothing you edit goes live directly. Every Save writes to a draft; the top bar tells you whether unpublished changes exist. From there:
- Preview — see the draft exactly as members would, before committing.
- Publish — push the draft live to all members.
- Discard draft — throw away unpublished changes and return to the live version.
- History — every published version is kept, and you can roll back to any of them.
The top bar also shows validation warnings when a setting has a value the app can't interpret (say, text where a number is expected). Fix warnings before publishing — the draft is checked continuously, so the badge updates as you edit.
Theme & Brand — the global look
This is where the Webapp picks up your identity: brand colors (primary, secondary, text), the corner radius used across cards and buttons, and the font. It's also where you control the navigation bar at the bottom of the app: its colors, whether labels are shown, which items appear and in what order, and whether the bar (or the center button, or the top app bar) is visible at all.
Settings here apply everywhere — change a brand color once and every screen follows.
Screens
Screens come in two flavors:
The home screen is a canvas. It's a stack of components you can add, remove, reorder, duplicate and edit — a logo image, a greeting, a progress bar for tiers or points, carousels, button rows, text blocks and more. Each component opens into its own settings panel: pick the content (image, text, link) on one side, adjust the look (colors, spacing, alignment) on the other. This is where most of the visual personality of your app lives.
The other screens are built-in. Pages like Gifts, Profile, Activities, the login and registration flow, or code entry have a fixed layout — what you edit is their wording (screen titles, button labels, empty-state and error messages) and their look (background color or image). That keeps every flow working correctly while still letting you match your tone of voice in every language.
Every screen also has a small Settings block for its background and — only relevant if your program has a native mobile app — the style of the phone's status and bottom bars on that screen.
The carousel — your banner space
The carousel is the most-edited component and works like a rotating banner space on the home screen. Per slide you control:
- The image — add, remove or reorder slides; each slide is one image.
- The action — what happens when a member taps: nothing (decorative), open a popup, open a URL (inside the app or in a new tab), trigger the "install this app" prompt, download the Wallet Pass, open directions, or start an email.
- Who sees it — optionally limit a slide to members with specific tags. Leave empty to show it to everyone. This is how you run VIP-only or segment-specific banners in the same carousel.
Carousel-wide settings (background, auto-play, speed, endless loop) sit above the slide list. A home screen can hold several carousels — many businesses use a single-slide carousel as a tappable banner-button.
Popups
Popups appear after login, on top of whatever screen the member is on. Each popup has its content (image, text, action button), a delay, and a frequency cap — how many times a member will see it. Typical uses: an "add this app to your home screen" reminder, a seasonal campaign announcement, a one-off notice.
Advanced
The Advanced section exposes raw style overrides (per-component and per-page styling, custom CSS for the navigation bar and login footer). These are power-user settings with no safety net — a bad value can break styling for every member. They follow the same draft rules, so Discard draft undoes an experiment gone wrong; still, if you're not sure, ask support before editing here.
The editor is deep — deliberately so, an advanced user can shape nearly everything. For everyday work you'll rarely need more than Screens → HomeScreen and the carousels on it. Ready-made Templates are on the way, which will make bigger redesigns a one-click starting point instead of a component-by-component build.