Restream Chat

Connect Twitch and YouTube Gaming Chat Together With Restream.io Chat

In this post I’m going to walk you through how you can connect multiple different streaming chat rooms in to one easy to use program. This will include Twitch, YouTube Gaming, Hitbox, BeamPro and more. We’re also going to add chat into OBS Studio for our viewers to see.

Arguably the most important part of being a streamer is interacting with your viewers in some form. In another post I showed how to stream to multiple platforms at the same time. Let’s take time and see how to combine all of our chat rooms into one place, so that we can easily interact with viewers across multiple platforms.

Downloading and Installing ReStream.io Chat

To start we can head to Restream.io/Chat. We can see a brief preview of how our chat will look – where it shows the icon for the platform our viewers are chatting on, their nickname, a time stamp, and the message. By the way, all of this can be customized a bit as well.

Let’s go ahead and download and install this program just like any other. Before we actually launch this app – I’m going to go back to Restream.io and login to my account. Once I’m in, I’m going to make sure the channels I want to connect in chat are added inside of my ReStream dashboard. If you need more help on how to do this, make sure to watch this video about setting up your account.


Restream Chat

Anyways, let’s go ahead and launch the program, and login to our ReStream account. You might not see much, but let me walk you through its interface. First, in the top left we’ll see an icon that shows how many services we’re connected to, as well as how many people are in all the rooms. If we click this area on the top left, it will show and hide our services, as well as give us a better break down of what all is connected. You can also clear history in the bottom left.

You’ll notice that some services show “read-only” – this is because the program is not able to send chat messages to these services. However, the other ones that show Online can have messages sent form the ReStream Chat program to their chat rooms.

Connect Twitch And Youtube Chat

Hide this section and you can see more about how we can send messages. With the program open type a message in my your Twitch and Hitbox chat(the one on the actual website, not inside the program), to see that things are connected. Again, you’ll see the icons that represent where the message is from. Already, I think this application is pretty awesome, but there’s much more!

At the bottom, there’s a drop down and an area to “Write to chat…”. This is where we can enter commands to various platforms. If you click the drop down you’ll also be shown different channels that you can specify your message to go to. This will filter your chat messages for each service, in case you want to check out what’s happening on just Twitch, just YouTube, etc.

Leaving it on the all chats option will attempt to broadcast your message to any services that are not marked as read only.

So far, I hope you’ll see how easy it is to communicate with your various users. However, it might be confusing to some if you’re streaming in one place and talking to another. Let’s go into the settings and I’ll show you in just a second how to add this window into OBS Studio the right way.

Configuring the Settings

First, we can check out the general settings. Make sure that Force chat auto scroll is enabled.

Settings

Next, we have Chat Accounts. This allows us to double check which accounts are connected. As I mentioned earlier it will sync with our settings in the ReStream dashboard. If you’re having issues with a chat room, you can always try to reconnect here.

Chat filters allow you to specify any words you’d liked not shown in either the app window or the web UI. Put the words you want to filter, separated by a comma, and enable both of these options. One small quirk about the programs is that it is space sensitive. Meaning after the comma don’t use a space – or else it might not filter out the words you put.

In the window settings we can disable Always on top if we’d like, as well as enable Window Background Transparency. You can play around with the sliders for a look that you prefer.

For fonts, you can only specify sizes and visibility of each item. Hopefully they add a bit more to this in the near future. I’d love to add my own custom fonts and colors here.

Next is notifications. Basically we can set a sound that’s played when we have a new message or a sound that plays when our nickname is mentioned. I think it could be a bit annoying for all messages to have a sound, but I could definitely see some use for the second option here. This could be especially useful in busier chats.

Adding Restream.io Chat into OBS Studio

With all those set up, we’re finally at the sections that allow us to add this chat system into OBS Studio. There’s 2 different ways to do this and they’re very easy!

Save Chat to Image

Let’s start with the easiest way which is Save Chat To Image. After you enable the option, we can select where this image saves to. By default is should be stored in your pictures folder with the name RestreamChat.png. This seems fine to me, but make any change that you’d like, next hit save and open up OBS Studio. In OBS Studio simply add in an image source and browse to where that image is saved.

Select it the image file and that’s pretty much it. If you don’t see anything yet, it’s because a new image only generates when a chat message is shown. You might not have an image generated since you just installed this app. Go ahead and type something into one of your chat rooms and you should see the image appear!

Feel free to use OBS Studio filters and cropping to further customize as needed. I also recommend typing out a lot of lines slowly to see how everything looks and reacts. Remember, you can change the font size and window appearance in the settings as well.

Setting Up The Web Server

The second way we can add this into OBS Studio is through the Web Server settings. If this is enabled you can go to the address localhost: and then the port number you have entered, by default this is 8080. You can change the port number if you need to, but hopefully this doesn’t cause you any issues.

So, if I go to http://localhost:8080 in my browser, I should see some chat history since I had this enabled from the start. If yours wasn’t enabled, you will need to type a few messages for something to show.

Copy the localhost url from your browser and go to OBS Studio. Add a browser source, paste the url you have copied (which should be http://localhost:8080) into the url box, specify a width and height, and hit Okay to add it in. We’ll now see our chat logs inside of OBS studio as a browser source. If you know CSS, you can even override the CSS in the source properties to further customize the appearance. This is my preferred method, but I still think the Image Source is pretty great.

Saving Chat to a File

Let’s go through the last options of these settings before we finish up this post – which is to save chat to a file. Basically, this option allows you to save your chat history to text files. You can simply enable it, select where you’d like your file to save, and if you want a general log and daily logs. Basically, this will save different chat files for you that contains everything people say in your different chat rooms.

The ReStream account tab only allows us to logout and the About tab shows us the version we’re using.

With that, you should know everything you’d need to properly communicate to your viewers across many different streaming platforms. I’m a huge fan of this program, and ReStream in general and I can’t wait to see how it improves in the future. As I mentioned, according to ReStream’s Twitter, there will be a new way to add chat into OBS soon. Keep an eye out for a post that walks you through the new process when it’s launched.

  • DonSerrot

    Thanks for all these awesome tutorials! They’ve been really helpful while getting things started. I was just wondering if you had any plans on making a CSS tutorial for the Restream.io chat web server? That sounds like the best option for getting multiple chats on the screen by far.

    • Derek

      This is a great question – the answer is yes and no. No, because I’m not 100% sure if I will direct the tutorial towards styling the chat specifically for Restream.io . Yes, because the tutorial will cover what you’d need to know to style Restream.io’s chat.

      Also, Restream is releasing an update (hopefully) this week, and they may have better ways to customize. But regardless, a CSS tutorial is on my list.

      • DonSerrot

        That’s great news! I played around with CSS a while back trying to get something that looked the same for both a Twitch chat and a YouTube Gaming chat and it was a nightmare of trial and (mostly) error. There’s a lot of stuff out there for Twitch CSS but next to nothing for YouTube.