Skip to main content

​
Overview

QR code ordering allows customers to order directly from their table without waiting for staff. Each table has a unique QR code that, when scanned, opens a mobile-optimized menu where customers can browse, order, and track their food in real-time.

​
Customer Journey

​
Step 1: Scan QR Code

Customers scan the QR code at their table using their phone’s camera.
1

QR Code Format

Each QR code encodes a URL in the format:
https://yourdomain.com/{branchSlug}/{tableCode}
Example: https://restaurant.com/downtown-lima/T12
2

Landing Page

Scanning opens the customer entry page with:
  • Restaurant branding (logo, name)
  • Table number display
  • Welcome message
No app installation required! The ordering interface works directly in the mobile browser.

​
Step 2: Customer Registration

Before ordering, customers provide basic information: Quick Start (No Loyalty)
  • Name (required)
  • Phone number (optional)
With Loyalty Program Customers can opt-in to earn points by providing:
  • Name (required)
  • Phone number (for account identification)
  • Email (optional)
  • Birth date (optional, for birthday rewards)
If a customer with the same phone number exists, the system automatically links to their existing loyalty account.

​
Step 3: Session Approval

After registration, a table session is created:
1

Session Created

Customer sees a waiting screen: “Waiting for staff approval…”
2

Staff Approves

Staff receives a notification and approves the session from their dashboard or POS.
3

Access Granted

Customer is redirected to the menu page and can start ordering.
Sessions in pending status cannot order. This prevents unauthorized access and ensures staff awareness of table occupancy.
Session States:
  • pending - Awaiting staff approval
  • active - Customer can browse and order
  • completed - Table has been closed

​
Step 4: Browse Menu

The menu page displays a mobile-optimized product catalog: Interface Features:
  • Category Tabs: Horizontal scrolling tabs (Appetizers, Main Course, Desserts, Drinks)
  • Product Grid: 2-column grid with images
  • Product Cards: Show image, name, description, price
  • Availability: Unavailable items are grayed out
  • Real-time Cart: Shows item count and total at bottom
Product Details: Tapping a product card opens the detail page:
  • Full-size product image
  • Complete description
  • Price display
  • Quantity selector
  • Optional notes field (e.g., “No onions”)
  • Add to cart button
Customers can add items directly from the grid view or open the detail page for customization.

​
Step 5: Manage Cart

The cart page shows all selected items: Cart Interface:
  • Line items with name, quantity, unit price
  • Quantity adjustment buttons (+/-)
  • Remove item option
  • Subtotal calculation
  • Optional order notes
  • “Place Order” button
Cart Actions: 
[Product Image] Product Name
Quantity: [−] 2 [+]    $15.00
[X Remove]

Subtotal: $30.00
Tax (18%): $5.40
Total: $35.40

[Place Order]

​
Step 6: Place Order

When customer taps “Place Order”:
1

Order Submission

Cart items are sent to the API with:
  • Menu item IDs and quantities
  • Optional notes per item
  • Table session ID (automatic)
2

Order Created

System creates order with status pending and broadcasts to:
  • POS dashboard (staff notification)
  • Kitchen Display System (KDS)
  • Customer’s order status page
3

Confirmation

Customer sees success message and is redirected to order status page.

​
Step 7: Order Tracking

Customers can track their order in real-time: Order Status Page:
1

Order Received

Order is confirmed by staff. Shows order number and items.
2

Preparing

Kitchen is preparing the food. Estimated time may be shown.
3

Ready

Food is ready to be served. Customer receives notification.
4

Completed

Order has been delivered to the table.
Real-time Updates: Order status updates are pushed via WebSocket:
  • Status changes reflect immediately
  • Item-level status (e.g., “Appetizer ready, main course preparing”)
  • No page refresh needed
The WebSocket connection uses the pattern session:{sessionId} to push updates only to the relevant customer.

​
Additional Features

​
Call Waiter

Customers can request assistance:
  1. Tap “Call Waiter” button on menu page
  2. Request is sent to staff dashboard
  3. Button shows “Waiter Called” confirmation
  4. Staff sees notification with table number

​
Request Bill

Customers can request the check:
  1. Tap “Request Bill” button on menu page
  2. Request is sent to staff dashboard
  3. Button shows “Bill Requested” confirmation
  4. Staff brings the bill to the table
These buttons are located in the floating action bar at the bottom of the menu page, next to the cart.

​
Session Reconnection

If a customer closes their browser and reopens the QR code:
  1. System checks for active session on that table
  2. Shows “Active Session” screen with option to reconnect
  3. Customer can rejoin existing session or start new one
  4. Previous session data is restored (cart may be cleared)

​
Table Sessions

​
Session Lifecycle

​
Staff Session Management

Staff can manage table sessions from the Tables page:
  • View all active sessions
  • Approve pending sessions
  • Close completed sessions
  • View session history

​
Best Practices

QR Code Placement

Place QR codes in visible, accessible locations on each table. Consider laminating or using table stands.

Staff Training

Train staff to approve sessions quickly and monitor table status on the dashboard.

Menu Photos

Use high-quality images for all menu items. Photos significantly increase order conversion.

Loyalty Promotion

Encourage customers to register for loyalty at the entry screen to build your customer database.

​
Technical Details

URLs:
  • Entry: /{branchSlug}/{tableCode}
  • Waiting: /{branchSlug}/{tableCode}/waiting
  • Menu: /{branchSlug}/{tableCode}/menu
  • Product Detail: /{branchSlug}/{tableCode}/menu/{itemId}
  • Cart: /{branchSlug}/{tableCode}/cart
  • Order Status: /{branchSlug}/{tableCode}/status
  • Profile: /{branchSlug}/{tableCode}/profile
Authentication:
  • Customer JWT token issued on registration
  • Token stored in session storage
  • Token includes: customer ID, table ID, session ID
  • Token sent in Authorization: Bearer {token} header

Build docs developers (and LLMs) love

Get started for freeTalk to us