OBS Twitch Hype Train Overlay

README.md

OBS Twitch Hype Train Overlay

With these settings, you can show the status of your Hype Train in your livestream. Just add a browser source in OBS with the following settings:

URL: https://www.twitch.tv/popout/<channelname>/chat?darkpopout

With: min. 500

Height: min. 150

Custom CSS:

@import url("https://echtkpvl.de/twitch-hypetrain.css");

By using my URL, you will get the latest update automatically. If you are concerned about your security or something else, use this code and visit this tutorial, if something is weird or broken:

html, body, .tw-root--theme-light, .tw-root--theme-dark, .popout-chat-page, .chat-room, .ember-chat-container, .community-highlight-stack__card--wide {
    background: rgba(0,0,0,0)!important;
    background-color: rgba(0,0,0,0)!important;
}

.chat-list--default, .stream-chat-header, .chat-input, .channel-leaderboard { display: none!important; }
.consent-banner, .chat-signup-gate-overlay, .community-highlight-stack__backlog-card, .marquee-animation { display: none!important; }
div.Layout-sc-1xcs6mc-0.hZLfAO, .pinned-chat__highlight-card, div:has(.bits-leaderboard-expanded__header) { display: none!important; }

.chat-room__content {
    padding-top: 25px;
}

.community-highlight {
    background: rgba(0,0,0,0)!important;
    background-color: rgba(0,0,0,0)!important;
    border: unset!important;
    box-shadow: unset!important;
}

div[class^='Layout-sc'] {
    border-bottom: unset!important;
}

div[class^='Layout-sc'] > button {
    display: none;
}

Screenshots

FAQ

Q: Is there always a visible element in my overlay?

A: No. If there is no Hype Train / Poll / Prediction, the overlay is transparent.

Known Issues

If you start a poll / prediction or have something pinned, they will be shown in the overlay. Drops or a shared chat will cause a banner to appear in the overlay, but it disappears after a while.

Hi @jthead9 this doesn't look like the original chat. If you don't use https://www.twitch.tv/popout/<channelname>/chat?darkpopout this will not work. Also adding more CSS Code than what I provide here will most likely cause issues.
Pinned messages will always be shown, this is a known issue.

So this is the settings I have with it in OBS

@jthead9 Thank you for the screenshot of your settings. I was able to reproduce your problem, and it occurs when you are logged into the browser source. To use this overlay, you need to right-click on the source to switch to "Interact" and then log out.
I also found two other issues. If drops or a shared chat are active, a banner appears in the overlay, but it disappears after a while.