Full widget settings guide - Redo7/the-ultimate-streamathon-timer GitHub Wiki
Start time: (min)
The time the countdown starts
Alignment:
Left
Center
Right
Which side of the bounding box should the widget be aligned to?
The widget may appear in an "expanded" state depending on a few factors like incoming alerts, or the display of the info chart, which when setup incorrectly may result in clipping the contents on stream.
If you want to display the widget on the left side of the screen, set this dropdown to Left
.
If the widget is nowhere near the edge of the screen you can leave it at Center
User currency display:
Code ex. USD
Symbol ex. $
What should the <currency>
tag be converted to?
This will display the currency you have set up on StreamElements
It's not really necessary to change this at all since any text fields within the widgets are editable and you can put the text in manually if you'd like. But this way the widget comes pre-set with the currency you have set up on your StreamElements account.
Widget scale:
The scale/size of the widget
Font name: (fonts.google.com)
Name of the font you want the widget to use.
Only fonts listed on Google Fonts will work.
Do note some fonts have only 1 weight, meaning that you won't be able to change it with any of the XYZ font weight
fields.
Font size: (px)
This is the "Global" font size of the widget. Most of the values used internally scale from that one. You should most likely use Widget Scale
instead.
Title
Title text
Title font size:
The size of the title
text
Title font weight:
How thick should the title
font be?
Title font spacing:
How spaced should the letters in the title
font be?
Title angle: (deg)
The rotation angle of the title
text
Title X position: (%)
The X (horizontal) position of the title
within the widget bounding box.
Title Y position: (%)
The Y (Vertical) position of the title
within the widget bounding box.
Subtitle
Subtitle text
Subtitle font size:
The size of the subtitle
text
Subtitle font weight:
How thick should the subtitle
font be?
Subtitle font spacing:
How spaced should the letters in the subtitle
font be?
Subitle angle: (deg)
The rotation angle of the subtitle
text
Subtitle X position: (%)
The X (horizontal) position of the subtitle
relative to the Title
.
Subtitle Y position: (%)
The Y (Vertical) position of the subtitle
relative to the Title
.
Timer font size:
The font size of the countdown
Countdown font weight:
How thick should the countdown
font be?
Clip the timer text
Should the numbers be clipped if they were to go outside of the main widget body?
The countdown number can go outside of the widgets main body depending on the Animation
setting. Some may like it, some may not.
Force monospace font behavior
Should the countdown digits be forced to have the same width?
Most fonts have varying width of different characters (e.g. 0 and 1), which may cause "jittering", or small shifting of the widget when the counter gets updated.
Enabling this setting and changing Monospace width
should prevent that from happening, resulting in a nicer look and smoother animation. But it may result in slightly decreased readability and inconsistent visual spacing.
Monospace width: (px)
What width should the digits be?
- Requires
Force monospace font behavior
to be enabled.
Time's up text:
The text to display when the countdown reaches 0
Time's up font size:
The size of the Time's up
text
Time's up text font weight:
How thick should the Time's up
font be?
Commands are specific messages sent in your Twitch chat. It is recommended to have some kind of prefix (e.g. !
or anything you'd like) in order not to accidentally trigger widget functions.
Viewer commands:
Which commands should be made available for ANY viewer to use?
Warning
Do not put any important commands in the Viewer commands
field! I am not responsible for any havoc this may cause.
Moderator commands:
Which commands should be made available for moderators to use?
Note
Any commands entered in the fields above will also enable their aliases and subcommands
Example:
Adding !additions
would also enable !timeadditions
, !pointadditions
, and !goaladditions
Adding !pause
would also enable !pause
additions
, and !pause
all
Aliases should be separated with a comma within their fields. Any spaces will be ignored.
E.g. !additions, !timeadditions, !pointadditions, !goaladditions
will result in 4 commands bringing up the same function.
Caution
None of the aliases are hard coded. If you delete them from their field, the command will not work!
Start widget command alias:
Start countdown
Pause widget command alias:
Pause countdown. Any time or point adding events will still work.
Pause additions subcommand alias:
Pause just the time or point adding events
Pause all subcommand alias:
Pause time AND time or point adding events
Time adjustment command alias:
By default, this command allows you to add or subtract time from the countdown by invoking it with it's subcommands
and options
.
E.g. !time add 1h30m
will add 1 hour and 30 minutes to the countdown.
The options are as follows:
-
d
- Days -
hr
- Hours -
h
- Hours -
min
- Minutes -
m
- Minutes -
sec
- Seconds -
s
- Seconds
Reset time subcommand alias:
Subcommand to reset the time to the amount of minutes set in Start time:
when invoking the !time
command
By default: reset
Add time subcommand alias:
Subcommand to add time when invoking the !time
command
By default: add
and +
Subtract time subcommand alias:
Subcommand to subtract time when invoking the !time
command
By default: sub
and -
Set current amount command alias:
Set the current amount of points to a specified amount
Add to current amount subcommand alias:
Subcommand to add an amount to the current amount of points.
By default: add
and +
Subtract from current amount subcommand alias:
Subcommand to subtract an amount from the current amount of points.
By default: sub
and -
Expand / collapse goals command alias:
This toggles the expansion of the 3 goals visible above the countdown.
Show all goals subcommand alias:
Displays a scrolling box with all the remaining goals inside
Goal command alias:
Allows you to add, edit, or delete a goal.
Any additions, edits, or deletion will refer to the <amount>
value
Usage (if left default):
<command> <subcommand> <amount> <options>
!goal add 10 Chat choses my PFP for a week
!goal edit 10 Chat chooses my PFP for a week
!goal delete 10
!goal add <number>
will edit a goal if it already exists, and !goal edit <number>
will add a goal if it doesn't yet exist.
Goal add subcommand alias:
Subcommand to add a goal when invoking the !goal
command
Goal edit subcommand alias:
Subcommand to edit a goal when invoking the !goal
command
Goal delete subcommand alias:
Subcommand to delete a goal when invoking the !goal
command
Toggle time/point info chart command alias:
Toggles the the display of the info chart containing time and point additions
The preference is saved. Meaning next time the widget is loaded it should automatically show up.
Toggle total amounts command alias:
Toggles the total amount of subscriptions
, donations
, cheers
, follows
, and raids
received.
This displays the Amount not the Count of events received Meaning when getting a $5 donation, the counter will increase by 5, and not 1
The preference is saved. Meaning next time the widget is loaded it should automatically show up.
Toggle end time command alias:
Toggles the display of the time when the marathon will end at the current point in time.
The preference is saved. Meaning next time the widget is loaded it should automatically show up.
End time label
End time title label
End time font size:
The font size of the end time
text
End time font weight:
How thick should the end time
font be?
End time title font weight:
How thick should the end time
label font be?
End time locale:
Which language should some of the variables be displayed in?
Please note that for some languages, there is both a generic language code and a country specific language code.
End time format
The format to display the end time in.
Options:
-
seconds
- Seconds -
minutes
- Minutes -
hours12
- Hours in a 12-hour format -
hours24
- Hours in a 24-hour format -
ampm
-am
/pm
-
AmPm
-Am
/Pm
-
AMPM
-AM
/PM
-
dd
- Day with a leading 0. E.g.02
-
shortWeekday
- Shortened day of the week. E.g.Tue
for Tuesday -
longWeekday
- Full day of the week. E.g.Tuesday
-
mm
- Month with a leading 0. E.g.02
for February. -
mon
- Shortened month. E.g.Feb
for February -
month
- Full month. E.g.February
-
year
- Year. E.g.2025
- If you plan on traveling in time, please do not use the widget before
January 1st 1970
- If you plan on traveling in time, please do not use the widget before
By default:
Input: shortWeekday month dd year hours12:minutes:seconds AMPM
Output: Sat April 12 2025 01:58:20 PM
These all the goals you want to have during your marathon
Visible above the countdown, as well as the scrolling view (!goals
all
).
Important
It is recommended to add the widgets using the !goal
add
command for best results. If you have OBS open (with the widget added to the scene), you may experience issues if you're going to add the goals through the StreamElements overlay.
Goal amount: (points)
The amount of points of the goal
Goal text:
The text description of the goal
Add / Update Goal
Adds or Updates the goal with the amount you put in the Goal amount: (points)
field
Delete Goal
Deletes the goal with the amount you put in the Goal amount: (points)
field
Current goal amount font size:
The font size of the current goal amount
text
Current goal amount font weight:
How thick should the current goal amount
font be?
Goal amount font weight:
How thick should the individual goal amount
font be?
Goal text font weight:
How thick should the individual goal text description
font be?
Scroll goal text if longer than # characters:
If the goal text description is longer or equal to this amount, the text will scroll from right to left. (Like a news anchor)
Long goal text scroll time: (s)
How long should the text go from right to left if it's too long?
Expand goals every # min:
How long should the Goals
stay visible after displaying?
Collapse goals after # min:
How long should the Goals
stay visible after displaying?
Requires Expand goals every # min
field to be a non-zero value.
Delay initial goal expansion by # min: How long should the display of the
goals` be delayed by after first loading the widget?
The widget will wait #
minutes before first displaying the goals
.
The amounts of points to add to the current goal counter when any of the listed events occur.
Follow:
Tier 1:
Tier 2:
Tier 3:
Prime:
Tip: (points per min. tip amount)
The amount of points to add per the Min. Tip amount:
field
Cheer: (points per min. cheer amount)
The amount of points to add per the Min. Cheer amount:
field
Raid: (points per min. raid amount)
The amount of points to add per the Min. Raid amount:
field
Save Points
Important
Make sure you click the Save Points
button to save the changes you made.
If you save just the overlay the changes WILL NOT be committed
The amount of seconds to add to the countdown when any of the listed events occur.
Follow:
Tier 1:
Tier 2:
Tier 3:
Prime:
Tip: (seconds per min. tip amount)
The amount of time to add per the Min. Tip amount:
field
Cheer: (seconds per min. cheer amount)
The amount of time to add per the Min. Cheer amount:
field
Raid: (seconds per min. raid amount)
The amount of time to add per the Min. Raid amount:
field
Save Times
Important
Make sure you click the Save Times
button to save the changes you made.
If you save just the overlay the changes WILL NOT be committed
When disabled, the widget will add X
amount of time for each Y
event amount
E.g. If Cheer
is set to 60
and Min. Cheer amount:
is set to 100
. The widget will add 1 Minute for every 100 Bits. So, if someone donates 250 bits, 2 minutes will be added, and the 50 bits will be ignored.
When enabled, there is no minimum amount that will add a time. Instead the widget will add a fraction of the time for the fraction of the Min. XYZ amount
field.
E.g. If Cheer
is set to 60
and Min. Cheer amount:
is set to 100
. The widget will add 1 Minute and 30 Seconds for 150 Bits, 1 Minute for 100 Bits, 30 seconds for 50 Bits, 15 seconds for 25 bits, [...]
Use fractions for tips
Use fractions for cheers
Use fractions for raids
Minimum amount that makes the event count towards time and point additions.
When fractions are disabled, this is also the amount used for rounding down the time and point additions. e.g. Min. Cheer amount is 200
, somebody cheers 1250
, the widget will only count it as 1200
was cheered, because it rounds down to the amount set in Min. Cheer amount
. Which in this example is 200
Min. Tip amount:
Min. Cheer amount:
Min. Raid amount:
Only events with a non-zero Time
or Goal
addition amount get displayed
Info chart label
The label displayed on top of the info chart
Info chart label font weight:
How thick should the info chart label
font be?
Info chart font size:
The font size of the info chart label
text
Info chart font weight:
How thick should the info chart
font be?
Follow label
Tier 1 label
Tier 2 text
Tier 3 label
Prime label
Tip label
Variables:
-
<currency>
-The currency of your StreamElements account. The type it displays is controlled byUser currency display
field -
<amount>
- Amount inMin. Raid amount
field
Bits / Cheers label
Variables:
-
<amount>
- Amount inMin. Raid amount
field
Raid label
Variables:
-
<amount>
- Amount inMin. Raid amount
field
Variables:
-
<time>
- The amount of time the event adds -
<points>
- The amount of points the event adds
Follow text
Tier 1 text
Tier 2 text
Tier 3 text
Prime text
Tip text
Bits / Cheers text
Raid text
Show additions chart every # min:
Should the info chart
show up ever #
minutes?
Set it to 0 to not display the info every #
minutes
You can still show and hide it via commands
Hide additions chart after # min:
How long should the info chart
stay visible after displaying?
Requires Show info chart every # min
field to be a non-zero value.
Delay initial additions chart appearance by # min:
How long should the display of the info chart
be delayed by after first loading the widget?
The widget will wait #
minutes before first displaying the info chart
.
Totals X position: (%)
The X (horizontal) position of the Total amounts
within the widget bounding box.
Totals Y position: (%)
The Y (Vertical) position of the Total amounts
within the widget bounding box.
Each label has access to the <amount>
variable.
Follow text
Sub text
Tip text
Variables:
-
<currency>
-The currency of your StreamElements account. The type it displays is controlled byUser currency display
field
Bits / Cheers text
Raid text
Show totals every # min:
How long should the Total amounts
stay visible after displaying?
Hide totals after # min:
How long should the Total amounts
stay visible after displaying?
Requires Show totals every # min
field to be a non-zero value.
Delay initial totals appearance by # min:
How long should the display of the Total amounts
be delayed by after first loading the widget?
The widget will wait #
minutes before first displaying the Total amounts
.
Countdown paused text:
The text to display when the countdown is paused but events still go through
Additions paused text:
The text to display when just the events are paused
Additions and Countdown paused text:
The text to display when the countdown and the events are paused
Pause text font size:
The font size of the pause text
Pause indicator font weight:
How thick should the info chart label
font be?
Sleep indicator font size:
The font size of the sleep indicator animation (Zzz)
Sleep font weight:
How thick should the Sleep indicator
font be?
Alert font size:
The font size of the alert text
Alert font weight:
How thick should the alert
font be?
Alert tier font weight:
How thick should the alert tier
font be?
The tier is only displayed for subscriptions.
Each of the toggles below toggles the appearance of an alert when it's event happens.
This does not prevent the event from adding time/points.
Show follows
Show subs
Show resubs
Show gifted subs (Direct)
This event happens when someone gifts a sub to a specific viewer
Show gifted subs (Bulk)
This event happens when someone gifts sub(s) to random people in the chat
Show tips
Show cheers (Bits)
Show raids
Each label has access to the <username>
variable.
Follow text
Sub alert text
Resub alert text
- Variables:
<amount>
`Gifted sub alert text (Direct)
- Variables:
-
<gifter>
- The person who sent the gifted sub -
<recipient>
- The recipient of the gifted sub
`Gifted subs alert text (Bulk)
- Variables:
<amount>
Tip alert text
- Variables:
<amount>
-
<currency>
-The currency of your StreamElements account. The type it displays is controlled byUser currency display
field
Bits / Cheers alert text
- Variables:
<amount>
Raid alert text
- Variables:
<amount>
Note
Sounds may not play when you test your alerts directly in the StreamElements overlay, due to modern browsers "requiring the user to interact with the browser in order to play audio" If you add the widget to OBS, the sound should work just fine.
The fields are pretty self-explanatory
Follow sound
Follow alert sound volume
Sub alert sound
Sub alert sound volume
Resub alert sound
Resub alert sound volume
Gifted sub alert sound
Gifted sub alert sound volume
Bulk gifted subs alert sound
Bulk gifted alert sound volume
Tip alert sound
Tip alert sound volume
Cheer alert sound
Cheer alert sound volume
Raid alert sound
Raid alert sound volume
Theme:
Default
Coffee
Eden
Sakura
Custom
Note
In order to see the changes made to the fields below take effect, the Theme
field needs to be set to Custom
Background
Background for the main widget body, and the subtitle pill
Light background (goals)
Background for the goals above the countdown, info chart title, and the event label of each info chart entry
Dark background (end time)
Background for the end time, and info chart
Text
The text color (end time, info chart, goals)
Accent
The color used for the timer, Time's up!
text, alert text
background, alert tier
text, current amount
text, individual goal amount
, checkmark
(goal completion animation), pause indicator
text, title
, subtitle
, sleep animation
(Zzz), and icons for the total amounts
Goal 2 fade amount: (%)
How opaque should the fade color be for the 2nd goal?
Goal 3 fade amount: (%)
How opaque should the fade color be for the 3rd goal?
Alert background
The color used for alert icon background
Alert text
The color used for alert text
Blink color - Warning
Color for the blinking animation when the timer is below 1 Hour.
Countdown blinking (<1hr)
needs to be enabled in order for this to work.
Blink color - Danger
Color for the blinking animation when the timer is below 1 Hour, and the time meets other criteria.
Countdown blinking (<1min)
or Countdown blinking (every 1 min when <1hr)
needs to be enabled in order for this to work.
Title outline size: (px)
Size of the title text stroke
Current goal amount outline size: (px)
Size of the current goal amount text stroke
Countdown outline size: (px)
Size of the countdown text stroke
Countdown outline color
Color of the countdown text stroke
Current points outline size: (px)
Size of the number which shows how many points you have currently
Widget outline size: (px)
Size of the main widget body stroke
Widget outline color
Color of the main widget body stroke
Time addition chart outline size: (px)
Size of the info chart stroke
Time addition chart outline color
Color of the info chart stroke
Animation:
Animation for the countdown text, Time's up
text, and Current goal amount
Animation duration: (ms)
Duration of the animation above. Best to leave this number pretty low in order for the countdown to display properly.
Countdown blinking (<1hr)
The text changes it's color to Blink color - Warning
every time the countdown updates when the timer is below 1 Hour
Countdown blinking (<1 min)
The text changes it's color to Blink color - Danger
every time the countdown updates when the timer is below 1 Minute
Countdown blinking (every 1 min when <1hr)
The text changes it's color to Blink color - Danger
every minute the countdown updates when the timer is below 1 Hour
Sleep (Zzz) animation when paused
Should a sleeping (Zzz) animation play when the widget is paused?
The values inside of the (parentheses) is an example to help you figure out what values to use.
-
Bounce (50)
- Pixels -
Fade (0.75)
- Percentage. 1.0 = 100%. Range:0.0
-1.0
-
Flash (1.25)
- Percentage. 1.0 = 100%. Range:0.0
-2.0
-
Scale (1.2)
- Percentage. 1.0 = 100%
Totals toggle animation:
Bounce (50)
Scale (1.2)
The animation when the widget is toggled via the !totals
command
Totals bounce animation value:
This is the amount of pixels used for the animation when Totals toggle animation:
is set to Bounce
Scale
is pre-set and can not be changed to make sure the animation works correctly.
Totals toggle animation duration: (ms)
How long should the animation for the toggling be?
This is the animation duration for each visible box.
Totals toggle animation stagger: (ms)
How much delay should be between each box's individual animation?
The animation starts from the left-most box.
Totals event animation:
Bounce (50)
Fade (0.75)
Flash (1.25)
Scale (1.2)
Totals event animation value:
The value to use for the animation when an event happens.
E.g. If the Totals event animation:
is set to Scale
and this fields value is set to 1.2, the boxes will enlarge by 20%, then go back to their original scale.
Totals event animation duration: (ms)
Totals event animation stagger: (ms)
How much delay should be between each box's individual animation?
The animation plays outwards on each visible box, starting from the one the event happened for.
Check for updates when the widget loads
Should the widget automatically check for updates whenever it loads?
This setting may cause the notification to show up when changing scenes in OBS
Check for updates
On demand update check
Reset Widget
Resets the widgets to a "default" state. Allowing you to configure it from a near out of the box point. Fields will not be reset since this can only affect the inner workings of the widget, and not the StreamElements overlay directly.
Deleting the widget and then re-installing it, does not reset it! Although it will reset the fields to their original values.