🎮 Megathon Widget Collection

StreamElements overlay widgets for YouTube and Twitch streams. This collection includes multiple interactive widgets for subathons, progress tracking, milestones, and surprise quests.

📦 Widgets Included

⏱️ Subathon Timer

A countdown/countup timer for subathon streams with:

Configurable time values for different event types (subs, bits, tips, etc.)
Powerup mode for temporary multipliers
Sleep mode with reduced multiplier
Timer cap and lock features
Ko-fi integration
Confetti effects on milestones
Audio feedback

📊 Progress Bar

An animated progress bar that tracks points/goals:

Real-time progress tracking
Customizable point values per event
Stack or wide display styles
Milestone-based or custom data tracking
Manual point adjustments via commands

🎯 Milestone Goals

Display and track milestone goals with rewards:

Up to 50 configurable milestones
Mystery/revealed goal modes
Particle effects on completion
Auto-scrolling goal display
Stretch goals support

✨ Surprise Quest

Random timed challenges for viewer engagement:

Random quest selection from pool
Countdown timer with warnings
Point-based completion tracking
Success/failure states with effects
Configurable quest pool and timings

🚀 Quick Start - StreamElements Deployment

Step 1: Access StreamElements Overlay Editor

Visit your StreamElements overlay editor:

Link: https://streamelements.com/overlay/68e88eb4d756efb257797d21/editor?er=1
Or create a new overlay at StreamElements Dashboard

Step 2: Add Custom Widget

Click "Add Widget" in the overlay editor
Select "Custom Widget" from the widgets list
Choose the widget you want to add

Step 3: Configure Widget Files

For each widget folder (e.g., subathon-timer/):

HTML Tab: Copy contents from widget.html
CSS Tab: Copy contents from widget.css
JS Tab: Copy contents from widget.js
Fields Tab: Copy contents from fields.json
Settings Tab: Configure widget settings as needed

Step 4: Save and Position

Click "Save" in the overlay editor
Position and resize the widget on your overlay
Test with StreamElements test events

💻 Local Development Preview

Prerequisites

Modern web browser (Chrome, Firefox, Edge recommended)
Local web server (or use Live Server extension in VS Code)

Setup Local Preview

Clone the repository:

git clone https://github.com/mr-shade/megathon-widget.git
cd megathon-widget

Open the preview:
- Navigate to the preview/ folder
- Open index.html in a browser (via local server)
Option A - Using Python:
```
python3 -m http.server 8000
# Then visit http://localhost:8000/preview/
```
Option B - Using Node.js:
```
npx http-server -p 8000
# Then visit http://localhost:8000/preview/
```
Option C - VS Code Live Server:
- Install "Live Server" extension
- Right-click preview/index.html → "Open with Live Server"
Use the preview:
- Select a widget from the dropdown
- Use the Event Simulator to test events
- Check browser console for debug logs
- Storage is persisted in localStorage

Preview Features

✅ Widget selector (all 4 widgets)
✅ Mock StreamElements API (SE_API)
✅ Event simulator (subs, bits, tips, follows, raids)
✅ Local storage persistence
✅ Reload/clear storage controls
✅ Theme toggle for testing on different backgrounds

🔧 Widget Configuration

Common Settings Across Widgets

Event Values

Configure time/point values for different event types:

Twitch: Subscribers (T1/T2/T3), Gift subs, Bits, Tips, Follows, Raids
YouTube: Memberships, Superchats
Ko-fi: Tips and Subscriptions

Commands

Most widgets support chat commands for control:

Timer: !resume, !pause, !add [time], !subtract [time], !lock, !unlock
Progress: !addpoints [n], !subtractpoints [n], !setpoints [n], !resetpoints
Milestones: !addgoal [number] [reward], !removegoal [number], !resetgoals
Quests: !questson, !questsoff

Permissions

Configure who can use commands:

Broadcaster (always allowed)
Moderators (toggle)
Specific users (whitelist)

📁 Project Structure

megathon-widget/
├── README.md
├── preview/
│   ├── index.html          # Local preview interface
│   └── mock-se-api.js      # Mock StreamElements API
├── subathon-timer/
│   ├── fields.json         # Widget configuration fields
│   ├── widget.html         # Widget HTML structure
│   ├── widget.css          # Widget styles
│   └── widget.js           # Widget logic
├── progress-bar/
│   ├── fields.json
│   ├── widget.html
│   ├── widget.css
│   └── widget.js
├── milestone-goals/
│   ├── fields.json
│   ├── widget.html
│   ├── widget.css
│   └── widget.js
└── suprise-quest/
    ├── fields.json
    ├── widget.html
    ├── widget.css
    └── widget.js

🔗 External Dependencies

All widgets use these external libraries (loaded via CDN):

jQuery 3.2.1 - DOM manipulation
Flatline Functions - https://flatline.tv/widgets/flatline-functions.js
Helba Event Bridge - https://eb.helba.ai/client.js
Koofee Client - https://koofee.helba.ai/static/client.js
Megathon Client - https://megathon.helba.ai/static/client.js (timer only)
Particles.js - https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js (milestones only)

🎨 Customization Tips

Changing Colors

Edit the CSS file for each widget:

Timer: .timer, .bubble, .status classes
Progress: .progress-belt, .bar, .count classes
Milestones: .reward, .bubble classes
Quest: .quest, .quest-title classes

Modifying Event Values

Use the StreamElements overlay editor's "Settings" tab or edit fields.json:

Find the value field (e.g., valuesSubsTier1)
Change the default value property
Time format: "60s", "5m", "1h"
Point format: integer numbers

Adding Custom Audio

Update audio paths in fields.json or settings:

Upload audio files to a public URL
Update the audio path fields
Supported formats: MP3, WAV, OGG

🐛 Troubleshooting

Widget Not Appearing

Check browser console for errors
Verify all external scripts are loading
Ensure StreamElements overlay is set to the correct size
Check widget CSS display and opacity properties

Events Not Triggering

Verify StreamElements test events are working
Check if widget has loaded fully
Look for JavaScript errors in console
Ensure SE_API is available

Storage Not Persisting

Clear browser cache and reload
Check localStorage permissions
Verify StreamElements store API calls in console

Local Preview Issues

Make sure you're using a local server (not file://)
Check that external CDN scripts can load
Verify mock-se-api.js loads before widget scripts

🤝 Contributing

Feel free to submit issues and enhancement requests!

📄 License

This project is provided as-is for StreamElements overlay use.

🔗 Links

StreamElements Overlay Editor: https://streamelements.com/overlay/68e88eb4d756efb257797d21/editor?er=1
GitHub Repository: https://github.com/mr-shade/megathon-widget.git
StreamElements Dashboard: https://streamelements.com/dashboard

Made with ❤️ for the streaming community

Name		Name	Last commit message	Last commit date
Latest commit History 9 Commits
milestone-goals		milestone-goals
preview		preview
progress-bar		progress-bar
subathon-timer		subathon-timer
suprise-quest		suprise-quest
.gitignore		.gitignore
README.md		README.md

mr-shade/megathon-widget

Folders and files

Latest commit

History

Repository files navigation