Hype Train Advanced

Prerequisites

• Streamer.bot - https://streamer.bot
• StreamElements - https://streamelements.com (optional)

How to Install

---

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

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

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 three settings groups.

• The groups are organized as such
  1. Streamer.bot - overall settings for the Streamerbot connection. E.g. IP, port, debug showing the widget
  2. Appearance - General display / behavior modifications. Showing a pulsate effect in the last 30s of a hype train. If the time remaining should show milliseconds. Desired font / font color.
  3. Appearance Colors - Selecting desired colors for different parts of the widget to fit your branding.

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 HypeTrainAdvanced.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

---

• Join the Discord
  1. Make a post under 『❔』support channel
  2. Or make a ticket under 『🎫』open-a-ticket