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.

Issues

If you start a poll / prediction or have something pinned, they will be shown in the overlay.

Hi @Chaotic060 I'm sorry for the late response. I'm not able to reproduce this error and this script is still working fine in my OBS

@EchtkPvL hey there, i forgot to comment/edit my post, i managed to fix this! it was because the local time on my pc itself was set wrong! it fixed the hypetrain in my chat and also fixed your overlay in the process, leaving this here if anyone ever has the same issue. thank you so much for your fantastic tool!