Hi there all!
I used to use some plugins (then KappaChat because it was easier) to show my Twitch chat on streams with OBS, but I've since moved to Rumble with friends. There's pretty much nothing here about Rumble so I've had to build my own follower notifications/sound board for users, etc. But the easiest thing to do was the chat.
Assuming you already know how to stream on Rumble (and you have one setup right now), go to your livestream and pop-out the chat like you would on Twitch/others. Copy the link to the page.
Now, add a Browser Resource to your scene (Sources > + > Browser) and put the link as the URL for the source. Mine looks like this:
I generally just keep the chat on one of the right corners, so 300 x 300 fits fine but you're free to play around with it. Take note that you'll have to change the URL for every stream though.
Now, for the custom CSS. This will:
Note that overflow isn't hidden, so the scroll bars will still be visible. This is simply so you can interact with the browser source to scroll down in chat. Usually when first refreshed/added the chat won't continue following the live chat and you have to scroll down. Sometimes it doesn't. You can hide the overflow where I commented it out to hide the scroll bars if you'd like to show it on the left side instead, you'll probably just need to refresh the source until it starts scrolling by itself.
You'll end up with something like this (I'm using some random chat):
I used to use some plugins (then KappaChat because it was easier) to show my Twitch chat on streams with OBS, but I've since moved to Rumble with friends. There's pretty much nothing here about Rumble so I've had to build my own follower notifications/sound board for users, etc. But the easiest thing to do was the chat.
Assuming you already know how to stream on Rumble (and you have one setup right now), go to your livestream and pop-out the chat like you would on Twitch/others. Copy the link to the page.
Now, add a Browser Resource to your scene (Sources > + > Browser) and put the link as the URL for the source. Mine looks like this:
I generally just keep the chat on one of the right corners, so 300 x 300 fits fine but you're free to play around with it. Take note that you'll have to change the URL for every stream though.
Now, for the custom CSS. This will:
- Make the chat transparent
- Hide everything besides the main chat (including sticky rants)
- Rants will have a mostly transparent gradient to them
- Sub chats will also have a gradient to them
CSS:
.chat-form-overflow-wrapper, .chat-message-form, .chat--signin-container, .chat-sticky-rants, .chat-history--rant-sticky--pill {
visibility: hidden !important;
background: 0 !important;
}
/* This hides most visible elements and their backgrounds */
*:not(.chat-history--subscribed) {
background: 0 !important;
border: 0 !important;
/* overflow: hidden !important;*/
/* overflow isnt hidden so you can scroll the chat (doesnt start showing live messages sometimes) */
}
/* This removes all backgrounds and borders (duh) without removing background images (avatars) */
/* completely hides the header/footers and sticky rants */
#chat-sticky-rants, #chat-sticky-rants *, .chat--header, .chat-message-form, .chat-message-form *, .chat--signin-container, .chat--signin-container * {
margin: 0 !important;
padding: 0 !important;
height: 0px !important;
position: relative !important;
top: -100px !important;
}
/* This hides all stick contains and puts them off-screen so they don't "squish" the chat */
.chat-history--subscribed {
background: linear-gradient(to right, rgba(72 ,29,45,.3), rgba(255,0,0,0)) !important;
}
/* This is the color of sub chats, you can remove it if you won't want it colored or change the color */
.chat-history--rant {
/* color: black !important;*/
background: linear-gradient(to right, rgba(255,0,66,.3), rgba(255,0,0,0)) !important;
}
/* Like above, but for Rants */Note that overflow isn't hidden, so the scroll bars will still be visible. This is simply so you can interact with the browser source to scroll down in chat. Usually when first refreshed/added the chat won't continue following the live chat and you have to scroll down. Sometimes it doesn't. You can hide the overflow where I commented it out to hide the scroll bars if you'd like to show it on the left side instead, you'll probably just need to refresh the source until it starts scrolling by itself.
You'll end up with something like this (I'm using some random chat):