Add your stage chat overlay in OBS

A chat overlay allows you display your chat directly on your stream. It's a great way to encourage viewer interaction as well as viewing chat for yourself. (For convenient chat monitoring, we'd recommend using a chat dock).

Screen_Shot_2022-01-19_at_6.04.59_PM.png

Getting Started

1. Add a browser source in OBS

2. Enter your Volume stage chat link in the URL section: https://volume.com/username/chat/?static=1&text-size=30  (Replace "username" with your username). You can adjust the text size using the text-size parameter.

3. Feel free to experiment with the Width and Height values to find the best fit for your chat overlay. We recommend starting with a Width of 625 and Height of 800.

Screen_Shot_2022-01-19_at_6.04.38_PM.png

4. After you click 'OK', you should see your chat overlay in the video window. Now to integrate it into the stream video.

Screen_Shot_2022-01-19_at_6.15.25_PM.png

5. Position the overlay in an area that won't obscure the video of your stream. Areas that won't have movement, usually closer to corners, are recommended.

Screen_Shot_2022-01-19_at_6.18.19_PM.png

6. We think our name is pretty cool, but it might be taking up too much space on the screen. You can crop out portions of image/video source elements by holding Option (or Alt) and clicking/dragging the edge of the source element. You should see the border you mouse over turn green. We're going to crop the Volume name.

Screen_Shot_2022-01-16_at_2.05.05_PM.png

7. Now we have a slimmed down chat overlay that we have more flexibility to position on stream. It'd be great to see what was behind it though. Let's make the background transparent! Make sure the browser source for the chat overlay is selected. Select the Filters option above the Sources section or right click (Control) the browser source for the chat overlay.

Screen_Shot_2022-01-19_at_6.31.33_PM.png

8. In the Filters menu, select the plus sign beneath the Effect Filters section. Add a Color Key Filter, change the Key Color Type to Custom Color, and select Select Color to open the Key Color Window.

Screen_Shot_2022-04-11_at_1.39.47_PM.png

9. In the HTML section of the Key Color window (bottom right), enter the value: #f3f5f9 (as displayed in the image), and click OK. 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.

Screen_Shot_2022-04-11_at_1.41.26_PM.png

10. 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.

Screen_Shot_2022-01-16_at_2.11.00_PM.png

11. Depending on your background, this text may be a bit hard to read. 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. We can do this by adding a Color Source in the sources list.chat_overlay_add_color_source_1.PNG

12. Set the width and height to about the same size as your chat window. My chat window ended up being 500x700, but yours may be different. Next choose a color. This can be any color you like, however darker colors tend to work best. I chose a medium gray for this. chat_overlay_color_source_properties.PNG

13. 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.

chat_overlay_source_order.png

14. 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. You may have to play with the color and opacity a bit to get something you like.

chat_overlay_color_opacity.PNG

Was this article helpful?
0 out of 0 found this helpful