Skip to content
DesertIce Wiki

Hype Train Countdown

Prerequisites

Section titled “Prerequisites”

How to Install

Section titled “How to Install”

Unzip HypeTrainCountdown.zip and verify it contains the following files:

  • index.html
  • script.js
  • style.css
  • fields.json (this is only needed for StreamElements hosting)

StreamElements

Section titled “StreamElements”
  • Within an overlay, create a new custom widget.

  • Open the widget editor

  • Copy / paste the contents of the four files into their respective tabs in StreamElements

    1. index.html ⇒ HTML
    2. style.css ⇒ CSS
    3. script.js ⇒ JS
    4. fields.json ⇒ FIELDS

  • Click done when the copy / pasting has been completed. If successful, you should now be presented with gour settings groups.

  • The groups are organized as such
    1. Streamer.bot - overall settings for the Streamerbot connection. E.g. IP, port
    2. Test Buttons - Various buttons to inject hype train cooldowns one minute, ten minutes, one hour and two hours out.
    3. Behavior - Opacity animation setting for if you want the widget to fade in / out slowly over time. Cooldown hours is how many hours you have set for your hype train cool downs.
    4. Appearance - Selecting desired colors for different parts of the widget to fit your branding.

Local Hosting

Section titled “Local Hosting”

⚠️ This method is more advanced and nuanced. If this method is elected, I’m going to assume you know what you are doing in some regard. E.g. Know how to edit CSS and have a base level web frontend experience.

  • Unzip HypeTrainCountdown.zip and verify it contains the following files:
  • index.html
  • script.js
  • style.css
  • Ensure these files are in the same folder and reachable by your OBS instance.
  • Create a new browser source in desired scene(s) and click the “Local File” checkbox

  • Use the Browse button to set the file path to the “index.html” file

  • The width and height should be a fairly horizontal aspect ratio to fit the contents.
  • Customization can be done via the style.css

Support / Help / Etc

Section titled “Support / Help / Etc”
  • Join the Discord
    1. Make a post under 『❔』support channel
    2. Or make a ticket under 『🎫』open-a-ticket