Individual RegOnline registration form and ticket selection.
Group RegRegister multiple delegates under one group leader.
Stripe PayMock payment flow, receipt, and paid status.
Daily StatsLive dashboard with daily update animation.
Scroll down to watch each process animate...
Individual online registration ↓
conference.example.com/register
Step 01
Individual registration form
As you scroll through this section, the form fills automatically field by field,
selects the ticket option, creates the registration, and marks it ready for payment.
Keep scrolling ↓ form will fill and submit automatically
Group registration animation ↓
Step 02
Group registration
A group leader can register multiple delegates in one booking.
As you scroll through this section, the system adds each delegate, updates the count,
recalculates the total, and prepares the group confirmation.
Keep scrolling ↓ delegates will add automatically
conference.example.com/group-registration
Group Registration
0 Delegates
Scroll to start adding delegates.
Group total updates automatically.
$0
Group booking created with multiple delegate records.
Stripe payment ↓
Step 03
Stripe payment and receipt
The payment step now uses a full-width checkout experience inspired by the provided reference. After payment, the attendee becomes paid and confirmed, and the system sends the email with QR and wallet link.
Scroll to begin card payment.
My Membership Site
Subscribe to conference registration and membership access.
$18.00per month
Professional Membership
Get access to the community, conference registration support, and delegate services.
Plan: Early BirdQty 1
$299
Powered by Stripe
Pay
Or pay another way
delegate@example.com
Card
US bank account
•••• •••• •••• ••••
MM/YY CVC
Full name on card
United States
10001
Payment successful. Receipt and confirmation email generated.
Confirmation email ↓
Step 04
Confirmation email with QR and wallet
The email includes paid status, paper QR, wallet QR, and add-to-wallet button.
The attendee can bring paper QR, phone QR, or wallet NFC.
Inbox
Registration ConfirmedQR code, wallet pass, receipt, and badge instructions.
Email Preview
Registration Confirmed
Hello Alex Fernando, your payment is complete and your conference pass is ready.
Email delivered with QR, wallet link, and receipt.
Wallet, NFC, and QR options ↓
Conference Pass
Ready for onsite check-in
Alex Fernando
Early Bird
CONF-1847
Confirmed
Tap NFC or show QR
NFC ReaderBring the iPhone close to tap in.
Scroll to open the wallet pass.
Wallet pass ready. Continue scrolling to show the iPhone tap animation.
Step 05
Wallet NFC, wallet QR, and paper QR
The attendee has multiple onsite identification options:
NFC tap from wallet, QR inside wallet, QR from email, or printed paper QR.
Wallet NFCTap the phone at the NFC reader.
Wallet QROpen wallet pass and scan QR.
Email QRScan QR from confirmation email.
Paper QRPrint the confirmation and scan onsite.
Back office registration ↓
Step 06
Back-office registration dashboard
Operator can create registrations, import delegates, scan check-ins,
print badges, view stats, and monitor recent activity from one clean dashboard.
Scroll to load the operator dashboard.
admin.conference2026.com/dashboard
Dashboard Overview
Real-time overview of conference registration
Search anything...
Quick Actions
＋ Add New Registration
○Import Registrations
⌕Scan & Check-in
▣Print Badges
◌Send Announcement
▥View Reports
Recent Registrations
Type to search
JD
John Doejohn.doe@email.com
May 24, 2025
10:30 AM
Confirmed⋮
EC
Emily Carteremily.carter@email.com
May 24, 2025
10:21 AM
Confirmed⋮
GH
Global Health Teamgroup@health.org
May 24, 2025
10:15 AM
Group⋮
MB
Michael Brownmichael.brown@email.com
May 24, 2025
10:03 AM
Confirmed⋮
Registration Stats
Total Registrations0
Confirmed0
Pending0
Checked-in0
Recent Activity
◎ New group registration 2m ago
▣ Badge printed 5m ago
Check-in completed 8m ago
▭ Payment received 12m ago
Voice registration ↓
Scroll to start the voice conversation.
AI: Welcome. Please say your full name.
Delegate: Priya Kumar.
Processing voice input
AI: Please say your email address.
Delegate: priya.kumar@example.com.
Validating registration details
AI: Registration completed. QR and wallet pass will be sent.
Step 07
Voice-assisted onsite registration
Voice registration helps onsite self-service. The delegate can speak details,
confirm the ticket type, and the system creates the registration without typing everything.
Onsite scan options ↓
Step 08
Onsite scan: QR, wallet QR, or NFC
The kiosk or operator validates the attendee using paper QR, wallet QR,
or NFC wallet tap. After validation, badge printing is approved.
Validation Kiosk
Choose a scan method and validate the registration.
Paper QR
Wallet QR
NFC
Scroll to choose a scan method.
Registration found. Paid and confirmed. Badge print approved.
Face recognition validation ↓
Step 09
Face recognition and badge approval
The kiosk scans the delegate face, validates the attendee record,
confirms registration status, and approves badge printing.
Scroll to start face scan.
Live
Waiting for face scan...
Delegate MatchName: Alex Fernando Registration: Paid & Confirmed Match confidence: 98%
Face validated. Badge print approved.
Badge printing ↓
World Conference 2026
Delegate Badge
Alex Fernando
Global Health Forum Ticket: Early Bird Ref: CONF-2026-1847
Access Main Conference
Waiting for badge print...
Scroll to send this badge to the printer.
Step 10
Badge printed and check-in completed
Badge is printed after validation. The system updates check-in status,
updates onsite counts, and includes the attendee in daily statistics.
Daily stats and dashboard ↓
Step 10
Live stats and daily updates
The dashboard shows total registrations, paid delegates, onsite check-ins,
group registrations, voice registrations, NFC scans, and daily updates.
Scroll to replay daily statistics updates.
Registration Dashboard
Day 1
184Total registrations
156Paid via Stripe / invoice
42Onsite checked-in
18NFC / wallet scans
Online
120
Group
44
Back Office
20
Voice
8
Onsite
32
Daily Update Feed Live
System architecture and safety ↓
Final Architecture
Animated System Architecture Tree
Full-width system view showing traffic handling, application layers, data safety,
backup snapshots, and fast recovery.
Scroll to build the architecture tree.
Conference Registration Platform
Online registration, group registration, back-office, onsite kiosk, wallet NFC/QR, badge printing, email, payment, and stats.
1. Traffic Layer
Protects and distributes incoming traffic safely.
Cloud CDN / Edge Cache
WAF blocks bad requests
DNS & Health Checks
Rate Limiting & DDoS Protection
Load Balancer
→
2. Application Layer
Runs business logic, APIs, queues, and integrations.
Web App
Admin / Back Office
Kiosk App
API Gateway
Background Workers
Email / Wallet Service
→
3. Data + Safety
Stores data securely and protects delegate information.
Primary Database
Read Replicas
Cache Layer
Encryption at Rest
Encryption in Transit
RBAC / IAM + Audit Logs
Traffic Handling
User Request
CDN / WAF
Load Balancer
App Servers
Cache
Database
Auto scaling for high traffic
Only healthy servers get traffic
Bad traffic blocked early
Zero-downtime deployment ready
Backup & Fast Recovery
Live Data
Snapshot
Object Storage
Cross Region
Fast Restore
Healthy System
Daily snapshots
Point-in-time recovery
Versioned file storage
Disaster recovery runbook
Handles High TrafficGlobally with low latency
Keeps Data SafeEncryption and access control
Automatic BackupsSnapshots and recovery points
Fast RecoveryMinimizes downtime
Always AvailableHealth checks and failover
Complete ↓
Demo Complete
Full conference registration journey is ready
This version includes individual registration, group registration, Stripe payment,
confirmation email, wallet NFC and QR, back-office registration, voice registration,
onsite scan, badge printing, live stats, and daily updates.