About A HTML Twitch Overlay that displays goals of a subathon and the remaining time (using StreamElements chat phrases to trigger)
https://jamesbroadberry.github.io/TwitchSubathon/
Take the following template and adjust as necessary, then minify it and then base64 encode it and put it in the URL like so: https://jamesbroadberry.github.io/TwitchSubathon/?config=[YOUR_CONFIG_STRING]
{
"goals": {
"10": "Goal 1",
"25": "Goal 2",
"50": "Goal 3"
},
"twitchUsername": "LowerCaseTwitchUsername",
"initialMinutes": 60,
"secondsPerPrimeSub": 120,
"secondsPerTier1Sub": 120,
"secondsPerTier2Sub": 240,
"secondsPerTier3Sub": 480,
"secondsPerBit": 0.6,
"secondsPerPenny": 0.6
}The example config's URL would be the following:
- Decodes the config from the URL and connects to the Twitch chat of that user
- Looks at messages from the 'streamlabs' user, using the default message text to automatically update the counter and timer
- Also looks at messages from the host to be able to use commands for manual adjustment
The broadcaster of the Subathon can use the following commands:
!addsubs [number]- adds the number of prime subs!addminutes [number]- adds a number of minutes to the timer!subathonreset- resets the subathon (all subs and time will be remembered but the end date of the subathon will be re-calculated from now)
If you can specify custom CSS, you can change the appearance of the subathon timer using the following overrides. You don't need to specify all of them if you only want to override a few.
.SubathonContainer {
--subathon-criticaltime: red;
--subathon-lowtime: red;
--subathon-addedtime: green;
--subathon-textcolor: black;
--subathon-progressbarcolor: blue;
--subathon-background: transparent;
}- If the page refreshes for whatever reason, all of it's state will unfortunately be lost so ensure that the HTML overlay doesn't reset
- If the config isn't perfectly formatted, it might break when running so ensure it's set up correctly!