Jump to content
Sign in to follow this  
reaper8281

Twitch Adding Twitch chat to your stream (Open Broadcaster Software)

Recommended Posts

reaper8281

Do note that this will NOT show up in your actual game. It shows up in your Open Broadcaster Software screen (OBS) so if you have a second screen or play in windowed mode, you can see the chat on your OBS preview that you watch.

 

Credit to this tutorial: Please login or register to see this link.

 

In this tutorial I am assuming that you do not have the CLR Browser plugin installed yet. If you do have it, you can skip to step 4!

1. Download the OBS CLR browser plugin (depends on the OBS version, if your computer is 64Bit and your OBS is 32Bit, download the 32Bit version and put it in Program Files (x86), if your OBS is 64Bit, download 64Bit and put it in Program Files – Refer to step 3):
32Bit: Please login or register to see this link.
64Bit: Please login or register to see this link.

2. Install the latest version of .NET framework:
Please login or register to see this link.

3. Open your OBS plugin folder (Drive:Program FilesOBSPlugins for 64Bit OBS.Drive:Program Files (x86)OBSPlugins for 32Bit OBS)
extract everything from the first download into the plugin folder,provide Administrative rights if prompted. It should look something like this:

Please login or register to see this link.

4. downloading OBS Chat
Now that the CLR plugin is set up, we’ll get the Nightdev OBS Chat from this link:Please login or register to see this link.
(you can either follow the instructions on that page or do as I tell you)

5.1, download OBS Chat. this should be pretty straight-forward.
5.2, Enter your username. Again, it’s hard to mess up here. I’ll go into CSS detail later, so you can select ‘none’ for the styling option.
5.3, Things will get a bit trickier here. Open up OBS, right click and select: ”add > CLR Browser” (is the option not there? then re-read step 1-3 and make sure you got the right downloads and put them in the correct places!).
In the URL box, paste the URL that you see at Step 3/5 on the OBS Chat webpage, in the box, as shown, width and height are completely up to you. I prefer 800×300 since it fills up the left-over space in your stream when you’re streaming a 4:3 game.
Please login or register to see this link.

There’s also a CSS tab, I will explain this once we’re finished setting up! For now, head to step 5/5.
5.4, Skip 4/5, we will be doing this in OBS later!
5.5, Once you’re finished setting up, close the page.

6. CSS
Here is an example of what the OBS Chat will look like without CSS Styling:
Please login or register to see this link.

Not so clear eh? Well, with CSS you can pretty much change anything you want!
I don’t know any advanced stuff, but I know enough to teach you how to Style your chat properly!

The next part will be based on Google Chrome. I suggest you use Chrome so that this is easier to follow. You don’t have to keep using Chrome, it’s just for this part of the tutorial!
First of all, open your OBS Chat in your browser. (Please login or register to see this link. [yournamehere])
You will see an instance of your chat load up, right click on anything you want to change and select ‘inspect element’.
A box should pop up with a bunch of coding in it, it should look something like this:
Please login or register to see this link.

The only thing you need to focus on is the element name of the section you clicked on, in my case I clicked on a chat message. you can confirm that you have the right element by hovering over the element name at the bottom of your screen, this will highlight the thing you’re about to edit in the actual window (in the screenshot I am hovering over span.message, which highlighted my chat message)

Now what you want to do is add a new line in the CSS tab in OBS, first off you will state the element name, followed by a space and an opening bracket ( { )

On the next lines we’re going to add properties, for a list of properties, refer to Please login or register to see this link. .
For this example I will add a drop shadow, make the text bold, and make it bright white.

Now our chat will look something like this:
Please login or register to see this link.

span.message {
text-shadow1px 1px #000000; //1px, 1px determine the location of the shadow, #000000 is the Please login or register to see this link.
font-weightbold; //makes your text bold
color#FFFFFF; //Colors your text white, refer to Please login or register to see this link.
}

You can see that the messages are already a lot easier to read despite them being relatively small!

If it’s hard to read, try lowering the dimensions in the CLR browser and stretching the chat a bit,
alternatively you can add the following property in CSS to make your text bigger:

Next up we’re going to apply the same effects to Usernames, you can do that by using the following CSS:

font-size150%;

Now that we’ve set things up, your chat should look something like this:
Please login or register to see this link.
For those of you that are too lazy to do everything yourself, here’s a ready-to-go css that you can use!

span.message {
text-shadow1px 1px #000000;
font-weightbold;
color#FFFFFF;  //This does not apply to chat names, but will affect server-sided messages!
}

body {
background-color: rgba(0, 0, 0, 0.2); //Sets a slightly visible black background, recommended with white text! change 0.2 to 0 if you don’t like it
margin: 0px auto;
overflow: hidden;
}

span.message {
text-shadow: 1px 1px #000000;
font-weight: bold;
color: #FFFFFF;
}

span.nick {
text-shadow: 1px 1px #000000;
font-weight: bold;
color: #FFFFFF;
}

Editor's note: I took out the last portion as it had nothing to do with the OBS Twitch chat plugin.

  • Upvote 2

Share this post


Link to post
Share on other sites
Sign in to follow this  

×