Subathon Widget
Thanks for downloading our widget!
Here you will find instructions on how to set everything up and an in-depth description of its possibilities.
⚠️ Take note: This widget is hosted on StreamElements and works only with StreamElements donations — make sure you have a StreamElements account before setting it up!
About This Widget
This is a highly customizable Subathon Widget designed for StreamElements, supporting both Twitch and YouTube. It provides a dynamic timer, comprehensive statistics tracking, a multi-goal milestone system, and engaging visual notifications to keep your community informed and excited throughout your subathon event.
Widget Installation
- Log in to StreamElements with your Youtube or Twitch account
- Go to the “2. Widget” folder in the package you’ve downloaded
Pick the file that corresponds to your streaming platform (Twitch or YouTube) and double-click to install it.
Voila! Your widget is installed!
Widget Customization
Pick your widget in your StreamElements dashboard and click “Edit”
Click on “Layers” and go to your widget.
- Go to the “Settings” tab
- Woohoo, here you can customize everything to your taste :)
⚠️ IMPORTANT
For all of your customizations to take effect, you need to press "Save" in the top right corner of the editor and refresh the page before adding the widget to your streaming software!
Core Features
- Dynamic Timer System:
- Displays time in HH:MM:SS format with a visually distinct seconds display.
- Animated clock icon integrated with the timer.
- Timer duration increases based on events (subs/memberships, bits/SuperChats, tips/donations).
- Configurable initial, minimum, and maximum timer thresholds.
- Full control via chat commands: start, stop, pause, resume, add time, remove time, set specific time.
- Persistent state: timer and stats are saved and restored on widget load.
- Comprehensive Stats Tracking:
- Real-time counters for subs/members, bits/SuperChats, and tips/donations.
- Displays total time added to the subathon.
- Optional detailed stats overlay showing more in-depth information, including top contributors.
- Icon + value layout for quick visual understanding.
- Chat command to reset stats if needed.
- Advanced Milestone System:
- Configure up to 20 unique milestones.
- Each milestone can have a custom name, goal value, and currency type (subs/members, bits/SuperChats, tips).
- Visual display of the next upcoming milestone, including its name, goal, and a progress indicator (lock icon that unlocks).
- Automatic detection and celebration of reached milestones with animations (e.g., confetti).
- Chat commands to manually navigate or check milestone status.
- Engaging Visual Design & Notifications:
- Modern, clean, and highly customizable interface with numerous styling options.
- Animated components for timer digits, milestone unlocks, and notifications.
- Customizable main title section.
- Notification bubble system to announce new events (subs, cheers, donations) with customizable messages.
- Extensive control over fonts, colors, glows, borders, spacing, and backgrounds for all elements.
Customization Fields
Timer Logic
| Setting Name | Description |
|---|---|
Initial Timer Duration (minutes) |
The starting duration of the subathon timer in minutes. |
Auto-start Timer |
If checked, the timer will begin counting down on widget load. |
Minimum Timer Duration (minutes) |
The timer will not go below this duration, even if time is removed. |
Maximum Timer Duration (minutes) |
The timer will not exceed this duration, capping the subathon length. |
Time Rewards
For Twitch
| Setting Name | Description |
|---|---|
Seconds per Subscription |
Seconds added for each new Tier 1 subscription. |
Tier 2 Sub Multiplier |
Multiplier for seconds added by Tier 2 subs (e.g., 2× Tier 1). |
Tier 3 Sub Multiplier |
Multiplier for seconds added by Tier 3 subs (e.g., 5× Tier 1). |
Gift Sub Multiplier |
Multiplier for seconds added by gifted subs. |
Seconds per 100 Bits |
Seconds added for every 100 bits cheered. |
Seconds per $1 Donation |
Seconds added for each dollar (or equivalent) donated. |
For YouTube
| Setting Name | Description |
|---|---|
Seconds per Membership |
Seconds added for each new channel membership. |
Seconds per $1 SuperChat |
Seconds added for each dollar of SuperChat. |
Seconds per $1 Super Sticker |
Seconds added for each dollar of Super Sticker. |
Seconds per $1 Donation (Tip) |
Seconds added for each dollar tipped via SE.Pay. |
Chat Commands & Permissions
| Setting Name | Description |
|---|---|
Control Command Prefix |
Base command for timer controls (e.g., !subathon ). |
Stats Command |
Command to show/reset stats (e.g., !stats ). |
Milestone Control Command |
Command to manage milestones (e.g., !milestone ). |
Command Permission Level (Twitch) |
Who can use these commands on Twitch. |
Command Access Level (YouTube) |
Who can use these commands on YouTube. |
Visibility Toggles
| Setting Name | Description |
|---|---|
Show Title |
Toggle visibility of the main title. |
Show Stats |
Toggle visibility of the stats area. |
Show Milestones |
Toggle visibility of milestones area. |
Milestone Goals (Up to 20 Milestones)
For each milestone number (1–20):
| Setting Name | Description |
|---|---|
Milestone <number> Name |
Custom name for this milestone (e.g., “100 Subs Goal”). |
Milestone <number> Goal |
Numeric target for this milestone (e.g., 100). |
Milestone <number> Currency (Twitch) |
Currency type: Subscribers, Bits, Tips. |
Milestone <number> Currency (YouTube) |
Currency type: Members, SuperChats, Tips. |
Widget Title Text and Styling
| Attribute | Description |
|---|---|
| Custom Text | The main text content for the widget’s title |
| Font | Family, size, color, weight (boldness) |
| Stroke | Width and color of the text outline |
| Glow | Color and blur radius of the text glow effect |
Timer Styling
| Element | Attributes |
|---|---|
| HH:MM Display | Font size, color, family, weight |
| Seconds Display | Font size, color, family, weight |
| Clock Icon | Size, color, vertical offset |
| Overall Effects | Glow (enable, color, blur), Stroke (width, color) |
Stats Display Styling
| Attribute | Description |
|---|---|
| Font | Size, color, family, weight for labels & values |
| Icon Colors | Individual colors for Subs, Bits/SuperChats, Tips |
| Stroke | Width and color for text elements |
| Glow | Color and blur radius for text elements |
Milestone Display Styling
| Attribute | Description |
|---|---|
| Font | Size, color, family, weight for various texts |
| Icon Styling | Color for lock/currency icons, progress bar |
| Animations | Settings for milestone completion effects |
| Stroke & Glow | Width/color for stroke, color/blur for glow |
Notification Styling
| Element | Attributes |
|---|---|
| Bubble Text | Font family, size, weight, color |
| Bubble Background | Color of the notification container |
| Animations | Duration, entry/exit animation styles |
Overall Layout & Spacing
| Attribute | Description |
|---|---|
| Section Spacing | Vertical and horizontal gaps between elements |
| Border | Radius (roundness), width, and color of main border |
| Timer Scale | Overall size adjustment for the timer block |
Background Styling
| Attribute | Description |
|---|---|
| Fill | Solid color or gradient (colors, direction) |
| Animation | Speed for animated gradients (if applicable) |
| Shadow | Blur radius, color, and offset for background |
Confetti Styling
| Attribute | Description |
|---|---|
| Colors | Palette of colors used for confetti particles |
| Density | Amount of confetti released on milestone completion |
Detailed Stats Overlay Styling
| Attribute | Description |
|---|---|
| List Font | Family, size, color for text within the overlay |
| Colors | Specific colors for values, titles, background |
| Pill Styling | Appearance of list item containers/backgrounds |
Advanced Text Styling
- Offers individual font family and color controls for nearly every distinct text element throughout the widget, overriding general settings if needed for highly specific designs.
Glow & Border Effects
- Provides fine-tuned control over glow (enable, color, blur) and stroke (width, color) effects for each section (Title, Timer, Stats, Milestones).
Icon Colors
- Dedicated color pickers for subscription/membership icons, bits/SuperChat icons, and tip/donation icons.
- Refer to the widget settings panel in the StreamElements overlay editor for the full list of all specific fields, default values, and slight variations between Twitch and YouTube versions._
⚠️ IMPORTANT
For all of your customizations to take effect, you need to press "Save" in the top right corner of the editor and refresh the page before adding the widget to your streaming software!
💬 Chat Commands Guide
Chat Command Basics
This widget can be controlled directly from your Twitch or YouTube chat using special messages called chat commands. Each command has three parts:
Command Prefix (Main Handle)
Tells the widget to listen.
- Default for timer controls:
!subathon - Default for statistics:
!stats - Default for milestones:
!milestone
- Default for timer controls:
Sub-Command (Action)
The specific instruction (e.g.
start,addtime,pause).Arguments (Optional Details)
Extra info some actions need (e.g. how much time to add:
10m,30s).
Default Prefixes
| Control Type | Default Prefix |
|---|---|
| Timer Controls | !subathon |
| Statistics | !stats |
| Milestones | !milestone |
Timer Commands (!subathon )
| Sub-Command | Arguments | Example | Description |
|---|---|---|---|
start |
None | !subathon start |
Starts the timer (if not already running). |
stop |
None | !subathon stop |
Stops the timer completely |
pause |
None | !subathon pause |
Pauses the running timer. |
resume |
None | !subathon resume |
Resumes a paused timer. |
add |
[time] e.g. 5m |
!subathon add 10m |
Adds the specified time to the timer. |
remove |
[time] e.g. 2m |
!subathon remove 2m |
Removes the specified time (respects minimum). |
set |
[time] e.g. 3h |
!subathon set 3h |
Sets the timer to exactly that duration. |
Time Format:
- Numbers = minutes (e.g.
5= 5 minutes) 30s= 30 seconds10m= 10 minutes2h= 2 hours
Stats Commands (!stats )
| Command | Description |
|---|---|
!stats |
Shows current stats (subs, bits, tips, time added). Send this command again to hide them. |
Milestone Commands (!milestone )
| Sub-Command | Arguments | Example | Description |
|---|---|---|---|
next |
!milestone next |
Advances display to the next unreached milestone. | |
goto |
[number] |
!milestone goto 3 |
Jumps display to milestone #3. |
⚠️ IMPORTANT
For all of your customizations to take effect, you need to press "Save" in the top right corner of the editor and refresh the page before adding the widget to your streaming software!
How to Add it to the Streaming Software?
OBS Studio
- Copy the URL of your Widget from the StreamElements dashboard
- Open OBS Studio
- Click “Add Source” (plus icon) in the Sources section.
- Add a “Browser” source, give it a name, and press “Ok”
- Paste the URL you’ve copied
- Set the width to 1920 and the height to 1080
- Press “Ok” and we’re done!
Streamlabs Desktop
- Copy the URL of your Widget from the StreamElements dashboard
- Open Streamlabs Desktop
- Click “Add a new Source” (plus icon) in the Sources section.
- Choose “Browser Source”, give it a name, and press “Add Source”.
- Paste the URL you’ve copied previously
- Set the width to 1920 and the height to 1080
- Now press “Close” and that’s it! Your widget is ready to use!