

If set to false this disable broadcaster/VIP/moderator badges This sets the default background/bubble colour for users who don’t have a colour set Careful: By default this will be overridden by OBS Set to “horizontal” this will scroll the text from right to left instead of bottom to topĭisplays bubbles instead of the standard chat log displayīackground of the whole chat page. file:///C:/path/to/stream-chat/chat.html?default_color=FF0000&bubbles=true To use them just add them as URL parameters, e.g. To get started with using this method go to ¶ Config There is no guarantee that this will always work.Īlso keep in mind that Github has their own data collection policies. First and foremost that Github has a soft limit on Bandwidth and Availability. While this is the easier method, using the online method comes with some drawbacks.
Obs studio chat overlay download#
To use the Chat overlay locally just download the newest release from the releases page and unpack it somewhere OBS can reach it.Īfter unpacking you can open generator.html in a browser to open the configurator.

You may have to play with the color and opacity a bit to get something you like.Chat Overlay for OBS based on Streamer.bot’s websocket, using pronouns from. Lastly, open the Color Source filters window, add a Color Correction filter, then use the Opacity slider to adjust the transparency of the chat background so that you can read the chat but still see things behind it. Move the color source box so that it covers the chat box, then move the Color Source below the chat source in the sources window.ġ4. This can be any color you like, however darker colors tend to work best. My chat window ended up being 500x700, but yours may be different. Set the width and height to about the same size as your chat window. We can do this by adding a Color Source in the sources list.ġ2. Unfortunately, the OBS filters do not allow you to change the amount of the background that you remove, so we will have to add in a new background. Depending on your background, this text may be a bit hard to read. Where did the background go? We've keyed out that color for the chat overlay element, so now the video behind the chat overlay isn't obstructed, and the stream looks much cleaner as a result.ġ1.

You can manually select the color by clicking and holding Pick Screen Color, moving the cursor over the background of the chat overlay, and releasing the mouse button.ġ0. In the HTML section of the Key Color window (bottom right), enter the value: #f3f5f9 (as displayed in the image), and click OK. Add a Color Key Filter, change the Key Color Type to Custom Color, and select Select Color to open the Key Color Window.ĩ.
Obs studio chat overlay plus#
In the Filters menu, select the plus sign beneath the Effect Filters section. Select the Filters option above the Sources section or right click (Control) the browser source for the chat overlay.Ĩ. Let's make the background transparent! Make sure the browser source for the chat overlay is selected. It'd be great to see what was behind it though. Now we have a slimmed down chat overlay that we have more flexibility to position on stream. You should see the border you mouse over turn green. You can crop out portions of image/video source elements by holding Option (or Alt) and clicking/dragging the edge of the source element. We think our name is pretty cool, but it might be taking up too much space on the screen. Areas that won't have movement, usually closer to corners, are recommended.Ħ. Position the overlay in an area that won't obscure the video of your stream. Now to integrate it into the stream video.ĥ. After you click 'OK', you should see your chat overlay in the video window. We recommend starting with a Width of 625 and Height of 800.Ĥ.
Obs studio chat overlay free#
Feel free to experiment with the Width and Height values to find the best fit for your chat overlay. You can adjust the text size using the text-size parameter.ģ. Enter your Volume stage chat link in the URL section: (Replace "username" with your username). (For convenient chat monitoring, we'd recommend using a chat dock).Ģ. It's a great way to encourage viewer interaction as well as viewing chat for yourself. A chat overlay allows you display your chat directly on your stream.
