Customer flow
This page walks through the end-to-end experience of a customer walking up to a YumKiosk-equipped counter and placing an order. Understanding this flow is useful for owners designing their store layout, for agents empathizing with what the customer is seeing, and for developers debugging the kiosk UI. Each step corresponds to a specific screen state in the kiosk web app.
1. Attract screen
The kiosk's idle state is the attract screen — a full-bleed image or video loop with the business logo, a friendly greeting ("Welcome to Joe's Tacos"), and a large, pulsing Tap to order button at the center. Behind the scenes, the tablet is polling /api/public/health every 30 seconds to stay connected and the /api/public/menu every 60 seconds for catalog updates.
The attract screen is the longest-running state in the kiosk lifecycle — it's what the kiosk shows 95% of the time. Owners can customize the background image, the greeting text, and the call-to-action button under Settings → Kiosk branding.
2. Tap to order
When a customer taps the button, the kiosk transitions to a brief Connecting state (1–3 seconds) while it fires POST /api/public/sessions/start. During this state, the customer sees a spinner and the text "Finding an agent, please wait...". A gentle chime plays to reassure them something is happening.
If no agent accepts within 60 seconds, the kiosk shows a "We're experiencing high demand, please come back in a few minutes" screen and returns to attract. This is rare outside peak hours.
3. Agent connected
The moment an agent accepts, the kiosk transitions to the live session state. The screen is split in two:
- Top half: live video of the agent (usually a friendly face, smiling). A small self-view of the customer in the corner (which they can hide if uncomfortable).
- Bottom half: the order cart, currently empty with "What can I get started for you?" as a placeholder.
The agent greets through the speakers. The customer speaks into the tablet's mic. Audio is full-duplex over Agora's video stack.
4. Order building
As the customer tells the agent what they want, the agent taps items on their dashboard. Each tap appears instantly on the kiosk cart with a soft "tick" sound — the customer sees their order building up item by item, which is a key source of trust and also acts as visual confirmation.
If the customer asks "how much is that?", the running subtotal is always visible at the bottom of the cart. The customer can interrupt, change their mind, or ask questions at any time — the agent just edits the cart and the kiosk updates live.
5. Payment
When the order is finalized, the agent clicks Send to payment. The kiosk transitions to a Payment screen with three options (depending on what's enabled by the owner):
- Tap to pay — NFC card or phone tap via Stripe Terminal
- Insert chip — chip card via Stripe Terminal
- Pay on screen — manual card entry on the tablet
The video feed stays visible in a smaller window in the corner so the agent can guide the customer through payment if needed. Apple Pay / Google Pay works on the same NFC reader as contactless cards.
After a successful charge, the kiosk shows a green Payment successful confirmation with the order number in large friendly text. A chime plays. The customer can tap Send me a receipt to get an email or SMS copy.
6. Thank you
Finally, the kiosk transitions to a Thank you screen: "Your order #A103 is being prepared. Please wait by the pickup counter." After 8 seconds, the kiosk fades back to the attract screen, ready for the next customer.
The entire flow, end to end, averages around 90 seconds for a simple order and 180 seconds for a complex one. Faster than self-checkout at a grocery store, with a real human keeping it humming.