Daily Check-In Mini App - User Guide
The Daily Check-In Mini App is a rewards engagement tool that allows members to check in once per day and earn tokens or vouchers. Rewards follow a 7-day cycle, with Day 7 offering a "Super Reward" for consistent participation.
Note: This Mini App is accessible from within the VIO Member App. Users must be logged in to their VIO account to access the check-in feature. Administrators manage rewards and settings through the dedicated Ops Portal.
Table of Contents
- How to Access
- Member Experience - Daily Check-In
- VIO External API Key Gate
- Ops Portal - Dashboard
- Ops Portal - Settings
- Business Rules & Notes
1. How to Access
For Members (PWA)
- Open the VIO Member App
- Navigate to the Mini Apps section
- Tap check in to launch the check-in experience
- The app will automatically authenticate using your VIO session — no separate login is required
Note: If the session token is missing or expired, an authentication warning modal will appear. You may still proceed by tapping "Continue Anyway", but check-in functionality may be limited.
For Administrators (Ops Portal)
- Open the Admin Portal and sign in.
- From Dashboard or Mini Apps, open check in.
- The Check-In Admin Interface opens inside the Admin Portal.
Note: Operator access requires Admin Portal permissions configured by your tenant administrator. The Ops Portal also requires the VIO External API Key to be configured for the tenant — without it, rewards cannot be delivered to members. See Section 3 and Registration Reward - VIO External API Key for how to save the key.
2. Member Experience - Daily Check-In
2.1 Page States
The check-in page has three possible states depending on tenant configuration:
State A: Coming Soon
When the tenant has not yet configured the check-in feature, members see:
- A rocket icon with the heading "Coming Soon"
- Message: "Daily check-in rewards are being prepared. Stay tuned!"
State B: Check-in Unavailable
When the administrator has configured but disabled the check-in feature, members see:
- A prohibition icon with the heading "Check-in Unavailable"
- Message: "Daily check-in is not currently available. Please check back later."
State C: Active Check-In (Normal)
When check-in is enabled and properly configured, the full check-in interface is displayed.
2.2 Welcome & Header
At the top of the active check-in page, the member sees:
- Greeting text: "Welcome back, {username}" where
{username}is the member's display name from their VIO profile
2.3 Seven-Day Progress Card
The main visual element is a progress card showing the 7-day reward cycle:
- Layout: A card with a decorative gift box illustration and background art
- Status line: Displays either "Check-In now" (if today's check-in is pending) or "Check-In completed" (if already checked in today)
- Progress grid: Two rows displaying Day 01 through Day 07
- Row 1: Day 01, Day 02, Day 03, Day 04
- Row 2: Day 05, Day 06, Day 07
Day States
Each day slot shows one of three visual states:
| State | Appearance | Meaning |
|---|---|---|
| Completed | Gift box with "collected" styling | This day's reward has been earned |
| Current | Gift box highlighted with animated lights | Today's check-in is available |
| Future | Gift box in muted/greyed styling | Upcoming days not yet reached |
Day 07 — Super Reward
Day 07 has a special expanded layout with:
- A larger gift box illustration (distinct "day7-giftbox" design)
- The label "Super reward" underneath the day number
- Spans two columns in the grid for visual emphasis
Note: After completing Day 07, the cycle resets to Day 01. The streak continues indefinitely on a 7-day rotation.
2.4 Check-In Button
Below the progress grid, a prominent button controls the check-in action:
| Button State | Label | Behavior |
|---|---|---|
| Ready | "Check In" | Tappable; performs the daily check-in |
| Loading | "Check In" (with spinner) | Currently processing |
| Completed | "Checked in" (disabled) | Today's check-in is already done |
After a successful check-in, a message appears below the button:
"Great job! Come back tomorrow for more rewards."
2.5 Success Modal
After tapping "Check In", a modal overlay appears with the result. There are two variants:
Variant A: Reward Delivered Successfully
- Title: "Congratulations!" (displayed as a decorative image with ray/burst animation behind it)
- Reward display:
- For Token rewards: Two overlapping coin circles showing the token icon, the token name (with symbol), and the amount earned
- For Voucher rewards: A voucher card showing the voucher image, name, and validity date (e.g., "Valid until May 15, 2026")
- Message: "Hooray! You earned {reward name}!"
- Button: "Awesome!" — closes the modal
Variant B: Reward Not Delivered
If the check-in was recorded but the reward could not be sent (e.g., API Key issue, network error):
- Title: "Reward not sent" (plain text, no celebration animation)
- Message: Either a server-provided explanation, or the default: "Your visit was recorded, but this reward could not be sent. Please try again tomorrow, or contact support if the problem continues."
- Button: "Got it" — closes the modal
Note: Even when the reward fails to deliver, the check-in itself is still recorded. The administrator can resend the reward from the Ops Portal.
2.6 Rules Section
If the administrator has configured check-in rules content, a rules card appears below the progress card:
- Heading: "Rules" (with a clipboard icon)
- Content: Rich text (HTML) or plain text configured by the administrator. Example copy: Open the check-in page each calendar day. Tap check in to record your visit and grow your streak. Rewards unlock on configured milestone days. If you miss a day, your streak may reset depending on operator settings.
3. VIO External API Key Gate
On first access to the Ops Portal (or if the API key is not configured), a gate screen requires the administrator to set up the VIO External API Key.
How to use:
Step 1: Get API Key
- Obtain your tenant API Key from VIO Admin Portal (API Keys section)
Step 2: Enter API Key
- Enter the API Key in the provided field
Step 3: Submit
- Click submit to proceed to the Dashboard
Note: The API Key is required for the system to send token/voucher rewards to members via the VIO External API. Without it, check-ins will be recorded but rewards will fail to deliver.
4. Ops Portal - Dashboard
The Dashboard is the landing page of the Ops Portal, providing an overview of check-in activity.
How to access:
- Open the Ops Portal URL
- The Dashboard loads as the default page (
/) - Click "Settings" in the top-right corner to open Settings
4.1 Page Header
- Title: "Dashboard"
- Subtitle: "Daily Check-in performance overview — {today's date}"
- Action: "Settings" button (opens Settings without relying on a distinct URL change)
4.2 KPI Card
A single key metric card is displayed:
| Metric | Description |
|---|---|
| Today's Check-ins | The number of check-ins performed today, with subtitle showing total registered users (e.g., "12 total users") |
4.3 Check-In Records Table
A paginated table showing all check-in records:
| Column | Description |
|---|---|
| User | Member's display name (or truncated user ID) |
| Date | The calendar date of the check-in |
| Day | The reward day within the cycle (e.g., "Day 3") |
| Reward | Badge showing "Token" or "Voucher" with the reward name/amount below |
| Status | Badge: "Sent" (green), "Pending" (yellow), or "Failed" (red) with error details |
| Time | Full timestamp of when the check-in occurred |
| Actions | (Admin only) "Resend" button for failed/pending rewards |
Pagination
- Displays "Page X of Y" with "Previous" and "Next" buttons
- Default page size: 10 records per page
- A "Refresh" button in the table header reloads current data
4.4 Resend Failed Rewards
For administrators, when a reward has a "Failed" or "Pending" status:
How to use:
Step 1: Find the record
- Locate a record with Failed or Pending status in the table
Step 2: Resend reward
- Click "Resend" in the Actions column
- The button changes to "Sending..." while processing
Step 3: Check result
- Success: green banner shows "Reward sent successfully."
- Failure: red banner shows the error message
Note: The "Resend" button only appears for operators with the admin role. Standard operators may not see this column.
5. Ops Portal - Settings
The Settings page allows administrators to configure the check-in rewards and system behavior.
How to access:
- From the Dashboard, click "Settings" in the top-right corner — the Settings content appears in the same portal shell.
- Use the back chevron ("← Dashboard") at the top to return to the Dashboard view.
5.1 Tab Navigation
The Settings page has two tabs:
| Tab | Label | Purpose |
|---|---|---|
| 1 | Reward Configuration | Configure rewards for each of the 7 days |
| 2 | System Management | Toggle check-in on/off, configure rules |
5.2 Reward Configuration Tab
This tab displays a 7-day reward grid where each day must be assigned either a Token or a Voucher reward.
Introduction Text
"Assign a token or voucher for each streak day. Use the buttons to open the picker — all seven days must be filled before you can save to the server."
Configuring a Day's Reward
How to use:
Step 1: Choose reward type
- For each day (Day 1-7), click "Token" or "Voucher"
Step 2: Set reward details
- Token: choose token and set reward amount
- Voucher: choose voucher from available list
Step 3: Review reward card
- Confirm each day card shows icon, reward name, and details
Step 4: Update when needed
- To change or remove a reward, click "X" on that day card
Saving Rewards
- Save draft: Save the current reward setup as a draft
- Save rewards: Apply the reward configuration
5.3 System Management Tab
This tab controls the check-in feature's operational settings.
Enable Check-in Toggle
| Setting | Description |
|---|---|
| Enable Check-in | Master switch — "Allow users to perform daily check-ins" |
How to use:
Step 1: Toggle setting
- Turn Enable Check-in on or off
Step 2: Edit rules
- Review or update the Check-in Rules content
Step 3: Save
- Click "Save System Settings" to apply the change
Note: The toggle change is not applied until you explicitly save. Toggling without saving has no effect on the live system.
Calendar Boundary
A hint is displayed below the toggle:
"Check-in days use midnight Asia/Shanghai as the calendar boundary."
This means a new "day" starts at 00:00 CST (UTC+8), regardless of the user's local timezone.
Rules & Content Editor
A rich text editor (TipTap) for configuring the rules displayed to members:
- Label: "Check-in Rules"
- Format: Rich text with formatting options (bold, italic, lists, etc.)
- Character limit: 2,000 characters maximum (a counter is shown)
- Default content: A pre-written English template is provided if no custom rules are set
How to use:
Step 1: Edit content
- Edit check-in rules in the rich text editor
Step 2: Format text
- Use heading, bold, italic, bullet list, and numbered list formatting
Step 3: Check character limit
- Keep content within the 2,000-character limit
Step 4: Save
- Click "Save System Settings" when done
Note: The rules content is displayed to members in the "Rules" section of the check-in page. It supports HTML rendering, so formatting will be preserved as configured.
Save Button
- "Save System Settings" — disabled when no changes are detected or when character limit is exceeded
- Shows "Saving..." during the save operation
- A toast notification confirms success or reports errors
6. Business Rules & Notes
Check-In Cycle
- The reward cycle is 7 days, repeating indefinitely (Day 8 maps to Day 1, Day 14 maps to Day 7, etc.)
- Each day's reward is configured independently by the administrator
- The cycle position is determined by the member's consecutive streak count
Timezone
- All day boundaries are based on Asia/Shanghai (CST, UTC+8)
- A "day" starts at 00:00 and ends at 23:59:59 in this timezone
- Members can only check in once per calendar day (CST)
Reward Delivery
- Rewards are sent automatically upon successful check-in via the VIO External API
- If delivery fails, the check-in record is still saved with status "Failed"
- Administrators can retry failed deliveries using the "Resend" button on the Dashboard
- Reward types supported: Token (ERC-20 based) and Voucher (campaign vouchers)
Access Control
| Role | PWA (Member) | Ops Portal |
|---|---|---|
| Regular Member | Can view and perform check-in | No access |
| Tenant Admin | Can view and perform check-in | Full access (Dashboard, Settings, Resend) |
For technical integration details, refer to the Mini App Integration Guide maintained alongside the Member App source repository.