# 📊 Dashboard

Overview of viewer engagement and XP statistics

👥
-
Total Viewers
+0 this week
⭐
-
Total XP Earned
📊
-
Average Level
🔥
-
Active Today
⚡Quick Actions
📈Recent Activity
📊
No recent activity
Activity will appear here as viewers interact

# 🏆 Leaderboard

Top viewers ranked by XP and engagement

Top Viewers
🔍

Rank | Username | Level | Title | XP | Progress | Actions
--- | --- | --- | --- | --- | --- | ---
🏆 Loading leaderboard...

# 🎬 OBS Overlay Panel

Setup and manage OBS Browser Source overlays

💡
Quick Setup: Copy the URL below and add it as a Browser Source in OBS Studio. Set width to 1920 and height according to your needs. Check "Shutdown source when not visible" for better performance.
⭐ XP Bar Overlay

Displays real-time XP progress with animated level-ups and badges. Perfect for showing individual viewer progress.

http://localhost:3000/overlay/viewer-xp/xp-bar
Auto-Hide After (ms)
Show Profile Picture
🏆 Leaderboard Overlay

Shows top viewers ranked by XP. Combines session and all-time stats with smooth animations.

http://localhost:3000/overlay/viewer-xp/leaderboard
Number of Entries
Time Period
Refresh Interval (ms)
Design Theme
Accent Color
Font Family
🎉 Level-Up Animation Overlay

Celebration animation when viewers level up. Shows confetti, new level, and unlocked rewards.

http://localhost:3000/overlay/viewer-xp/level-up
Animation Duration (ms)
Enable Sound
Show Animation From Level Hide frequent low-level spam by setting a minimum level.
📖 OBS Setup Guide

1. Open OBS Studio
2. Click the + button in the Sources panel
3. Select Browser from the list
4. Give it a name (e.g., "XP Bar", "Leaderboard")
5. Paste the URL from above into the URL field
6. Set Width to 1920 and Height according to your overlay needs
7. Check "Shutdown source when not visible" for better performance
8. Click OK to add the overlay to your scene
9. Resize and position as needed in your scene

⚠️
Important: The overlays require an active connection to the server. Make sure the server is running before starting your stream.

# 👁️ Live Preview

Preview how overlays look before adding them to OBS

🎨Select Overlay
Choose Overlay to Preview
Preview Scale
OBS Browser Source URL:
Add this URL as a Browser Source in OBS
👁️Live Preview
🎮Test Controls
Test Username

# ⚙️ XP Settings

Configure XP rewards for viewer actions

⚡XP Action Configuration

Action Type | XP Amount | Cooldown (seconds) | Enabled | Actions
--- | --- | --- | --- | ---
⚙️ Loading actions...

🎛️General Settings
Enable Daily Bonus
Award XP to viewers on their first visit each day
Enable Streaks
Reward viewers for consecutive daily visits
Enable Watch Time XP
Award XP based on viewing duration
Watch Time Interval (minutes) Award XP every X minutes of watching
Announce Level Ups
Show notifications when viewers level up

# 📈 Level Configuration

Customize level progression and rewards

⚙️Progression Type
Exponential
XP required increases exponentially (Level 1: 0 XP, Level 2: 100 XP, Level 3: 400 XP, Level 4: 900 XP)
Linear
Fixed XP per level (e.g., 1000 XP per level)
Custom
Define custom XP requirements for each level
XP Per Level XP required to advance one level
🔧Level Generator

Generate custom level configurations with automatic rewards

Number of Levels
Starting XP
Growth Rate

#### Progression Preview

Level | Total XP Required | XP for Next Level | Growth
--- | --- | --- | ---

🎁Level Rewards

Level | Title/Badge | Name Color | Custom Emote | Announcement | Actions
--- | --- | --- | --- | --- | ---
🎁 No rewards configured yet Add milestone rewards for reaching specific levels

📊Level Distribution
📊
Level distribution chart
Shows how many viewers are at each level range

# 🎁 Manual Award

Manually award XP to viewers for special events or achievements

🎁Award XP
💡
Tip: Use this to reward viewers for special contributions, milestones, or community events. The XP will be added immediately and a level-up animation will trigger if they reach a new level.
Username * The TikTok username of the viewer to award XP
XP Amount * Amount of XP to award (minimum: 1)
Reason (Optional) Optional note about why this XP was awarded (for your records)
📜Recent Manual Awards

Date/Time | Username | XP Amount | Reason
--- | --- | --- | ---
📜 No manual awards yet Recent manual XP awards will appear here

# 💾 Import/Export

Backup and restore viewer data

📤Export Data

Export all viewer XP data including profiles, transactions, and configuration settings. This creates a JSON backup file you can use to restore data later.

💡
What's included:

- All viewer profiles and XP data
- Transaction history
- Level configuration
- XP action settings

📥Import Data

Import viewer XP data from a previously exported file. Existing data will be merged with imported data.

⚠️
Warning: Importing data will update existing viewer profiles with the same username. Make sure to back up your current data before importing.
Select Export File Choose a JSON file exported from this system
📊Viewer XP History
Search Viewer

### Transaction History for

Date/Time | Action Type | XP Amount | Details
--- | --- | --- | ---