
How To Add Rumble Chat to Your Live Stream
Have you wanted to have your chat history saved from your Rumble live stream? Or have you wanted to have a "Just Chatting" live stream? Or you just want to have your Rumble chat be shown on screen for streaming to multiple platforms. Well I am going to walk you though the steps to adding your live stream chat to OBS as a transparent overlay that you can edit and display in any scene.
Here is a video that will walk you through the process:

Key Things to Remember:
- Make sure you are logged into the OBS browser source. Use the interact button to interact with the browser source within OBS.
- Keep the default CSS that OBS places in every browser source.
- After creating the video I added a min-width and max-width to .chat. This forces it to be a certain size.
- Also after creating the video I added "align-self: flex-end;" to the #chat-history-list to have the chat sit at the bottom of the chat window instead of being at the very top.
- Play around with the ".chat-history--username" color to customize it to your needs. You can also edit ".chat-history--message" to change the font and color of the message.
- If you get stuck please message me on twitter(only DM available) or email me at [email protected].
UPDATE: Rumble has launched permanent stream URL's. You can still share a direct link, or you can share your permanent livestream URL whenever you go live.
Example 1: http://rumble.com/StevenCrowder/live
Example 2: http://rumble.com/[CHANNELNAME]/live
This does work for those that are streaming from their user profile instead of a channel.
Example 3: http://rumble.com/user/[USERNAME]/live
Example 4: http://rumble.com/user/R3KONT3K/live
EDIT:
New code below for WhatUpIan Supporters with a new look to the Rumble chat customization. I also added CSS to remove all the other unwanted sections of the website. I feel it need a little bit of an update... already. If you want it customized for your chat please let me know and I can do it for you.
If you have any questions please reach out to me!
Want a clean and simplier chat? Check out this article:
https://whatupian.locals.com/post/3837616/clean-and-simple-live-rumble-chat
COPY CODE BELOW LINE
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
.container{
background: #061726; /* Use a source key to remove this background color; */
}
.chat {
z-index: 900;
position: fixed;
top: 0px;
left: 0px;
min-width: 700px;
max-width: 700px;
font-size: 28px;
}
.chat--height {
height: 100vh;
}
#chat-history-list {
overflow: hidden;
align-self: flex-end;
}
.chat-history--row {
background: rgb(2,0,36);
background: linear-gradient(9deg, rgba(2,0,36,1) 0%, rgba(189,189,189,1) 0%, rgba(255,255,255,1) 100%);
padding:8px;
border-radius: 10px;
}
.chat-history--user-avatar{
width:60px;
height:60px;
border-radius:100;
}
.chat-history--username {
color: #008000; /* Username Color */
font-weight:800;
padding:1px;
overflow:hidden;
}
.chat-history--badges-wrapper .chat-history--user-badge{
width:30px;
height:30px;
}
.chat-history--message-wrapper .chat-history--emote{
width:48px;
height:48px;
}
i.user-image--letter{
width:60px;
height:60px;
}
.chat-history--message{
color: #000000; /* Message Text Color */
display:block;
overflow:hidden;
font-weight:600;
}
#chat-message-form {
display: none;
}
/* Below Removes Unwanted Sections */
.header{
display:none;
}
.navs{
display:none;
}
.footer{
display:none;
}
.news_notification{
display:none;
}
.media-content{
display:none;
}
.media-under-title{
display:none;
}
.constrained h1{
display:none;
}
#theatreVideoPlayer{
display:none;
}
.media-sidebar .mediaList-list{
display:none;
}
.chat--header{
display:none;
}
/* Rumble Rants */
#chat-sticky-rants{
z-index:1000;
background: #061726;
padding:10px 0px;
position: fixed;
top: 0px;
left: 700px;
min-width: 1000px;
max-width: 1000px;
font-size: 28px;
}
.chat--history-list-shadow{
display:none;
}