Many streamers might want to display viewer comments on their streaming screens during their broadcasts.

Real-time communication with viewers is a crucial element that enhances streaming. However, checking comments in a separate window while streaming can become quite cumbersome.

This article explains how to use OBS Studio to display comments directly on your streaming screen, offering a clear explanation. We also introduce various customization options to help you create your unique streaming screen.

How to Display Comments on Your Stream Using Just OBS Studio

With OBS Studio alone, you can display comments on your streaming screen. The setup is relatively simple, and using a browser source is a handy method.

OBS Studio comes with a browser source feature, which allows you to display web page content on your streaming screen. Here, we will focus on explaining how to display comments from YouTube Live.

How to Display YouTube Live Comments

To display YouTube Live comments using just OBS Studio, you can exploit the fact that YouTube Live comments can also be displayed as a web page.

Here’s how to do it:

1. Open the YouTube Live streaming page and pop out the chat.
2. Copy the URL of the popped-out chat.
3. In OBS Studio, click the add source button and select “Browser.”
4. Paste the copied URL into the displayed window.
5. Adjust the width and height to display the comments on your streaming screen.

Item	Description
URL	The URL of the popped-out chat
Width	The width of the comment section displayed on the streaming screen
Height	The height of the comment section displayed on the streaming screen
Custom CSS	Write CSS to change the design of the comment section

By following the settings above, you can display YouTube Live comments on the OBS Studio streaming screen. You can freely adjust the display position and size. Furthermore, using custom CSS allows further customization of the comment section design, which we will continue to explain.

Customize the Position and Size of Comments Using CSS

When displaying YouTube Live comments using OBS Studio, simply displaying them is not enough. To improve the appearance of the streaming screen, customizing the position, size, and CSS of comments is important.

• Basic Position and Size Adjustments
  : First, select the “Browser” source added to OBS Studio, and drag and drop it on the streaming screen to freely adjust the comment display position. Also, change the numbers for “width” and “height” in the source properties to adjust the display size. Find the optimal position and size while looking at the layout of the streaming screen and the balance with other elements.

• Advanced Customization with Custom CSS
  : Furthermore, by utilizing custom CSS, you can make finer customizations, such as font type, size, color, background color, and borders of comments.

Item	Description
Font	You can change the font type, size, and color of comments.
Background	You can adjust the background color and transparency of the entire comment section.
Border	You can set the presence, color, and thickness of the border around the comments.

Custom CSS can be easily created using generator sites available on the internet. These sites allow you to visually change the settings and generate CSS code in real-time, which can be used without programming knowledge.

To apply custom CSS, paste the generated code into the “Custom CSS” field in the properties of the browser source. By using these customizations effectively, you can create a comment section that is easy to read and matches the overall atmosphere of your streaming screen.

However, it’s important to note that comment display with just OBS Studio has limited functionality. If you require advanced customization or comment management features, consider integrating with external tools like the Chat Style Generator mentioned later.

Displaying Comments with OBS Studio and Chat v2.0 Style Generator

If you want even more advanced customization than comment display with just OBS Studio, consider linking with an external tool to display comments. Here, we will explain how to display comments on your streaming screen by combining OBS Studio with Chat v2.0 Style Generator.

What is Chat v2.0 Style Generator?

Chat v2.0 Style Generator is a tool for customizing the chat section of YouTube Live. It allows you to finely adjust the appearance of the chat displayed on your streaming screen to suit your preferences. No difficult programming knowledge is required, and it automatically generates a stylesheet called CSS, just by setting it on the website.

Using this tool, the following customizations are possible:

Customization Item	Description
Background Transparency	By making the chat section background transparent, you can display comments without obstructing the video on the streaming screen.
Font Change	You can change the type and size of the comment font. Choose a readable font that matches the vibe of your stream.
Icon & Badge Hiding	You can hide user icons and membership badges to simply display the chat section.
User Name Hiding	You can hide the user names of those posting comments.
Chat Section Size Adjustment	By adjusting the width and height of the chat section, you can display it in the optimal size for your streaming screen.

By freely combining these setting items, you can achieve the best chat display for your streaming screen. The tool is simple to use; just set it on the website, copy the generated CSS, and apply it by pasting it into streaming software like OBS Studio.

How to Integrate OBS Studio with Chat v2.0 Style Generator

The integration of OBS Studio with Chat v2.0 Style Generator is done through the following steps.

1. Open Chat v2.0 Style Generator in your web browser.

2. Set the design for comment display on the site.

• Font: You can change the type, size, color, and weight, among other options.
• Background: You can set color, transparency, and images.
• Icon: Display/show options for user icons, various types can be selected.
• Animation: You can configure animation effects when displaying comments.
• Others: Adjust the display position, padding, margin, etc., of comments. The settings screen on the right displays a preview, allowing you to confirm changes in real-time as you adjust.

3. Once the design settings are complete, click the button labeled “CSS” at the bottom of the page to copy the CSS code.

4. Open OBS Studio, click the add source button (+), and select “Browser.” A new window will open; leave the “URL” field blank and paste the copied CSS code into the “Custom CSS” field. Click “OK” to close the window.

5. The customized design comments will be displayed on the OBS Studio streaming screen. If they do not appear, check the properties of the browser source to ensure the CSS is applied correctly.

The Chat v2.0 Style Generator is easy to implement as it only requires applying CSS to the browser source. By linking it with OBS Studio, you can create a comment section that is easy to see and matches the atmosphere of your stream.

Design Settings in Chat v2.0 Style Generator

Chat v2.0 Style Generator allows you to fine-tune the design of the comments displayed on your streaming screen. Specifically, you can adjust the following options:

• Font type, size, color
• Background color, transparency
• Comment display position, animation
• Username, timestamp display format
• Emoji display/hide option

These setting items are written in a language called CSS. If you have knowledge of CSS, even more advanced customizations are possible.

With Chat v2.0 Style Generator, you can freely change the comment design to match the atmosphere of your streaming screen by adjusting the setting options. For example, you can create designs like the following:

• Simple and easy-to-read design
• Designs that make comments stand out with animation
• Designs that match the theme color of the streaming screen

The changes to the settings are reflected in real-time in the preview, allowing you to easily confirm and adjust the design. The created design can be used by copying it as CSS code and pasting it into OBS Studio.

Item	Description
Font	You can set the font type, size, color, etc., of comments.
Background	You can set the background color, transparency, etc., of comments.
Animation	You can set animation for comment display.
Layout	You can set the display position of comments.
Name/Timestamp	You can set the display format for usernames and timestamps.
Emojis	You can set emojis to be displayed or hidden.

If you’re interested in the methods for displaying comments in OBS or the criteria for choosing external tools, refer to this article as well.

Additionally, with Alive Studio, which can be used in conjunction with OBS, you can easily design streaming screens, including comment displays. Check this out if you’re interested.

Alive Studio | Easy and Convenient Design with Tons of Resources for Streaming Screens

Countermeasures for Delayed Comment Display

Incorporating comments into your stream can enhance the sense of unity with your viewers and achieve interactive streaming. However, if there is a delay in comment display, it may prevent you from capturing real-time viewer reactions, potentially disrupting the tempo of your stream.

Delays in comment display can result from three main causes:

1. Network Delay: Communication delays with the streaming platform’s servers and viewers’ internet environments can affect comment display delay.
2. Streaming Software Settings: Depending on the settings of streaming software like OBS Studio, there may be delays in receiving or displaying comments.
3. Load of Comment Processing Tools: When using external tools like Chat Style Generator, if the tool’s processing capability is insufficient, comments may display with a delay.

To minimize these delays, refer to the following countermeasures:

Countermeasure	Description
Improve Network Environment	Use a stable high-speed internet connection. Prefer wired connections, and ensure a Wi-Fi environment with minimal interference if wireless is used.
Review Streaming Software Settings	Adjust settings like bitrate and encoder in OBS Studio to reduce PC load. Use low-latency streaming mode.
Optimize Comment Processing Tools	Review settings in Chat Style Generator and use only necessary features. If your PC has sufficient specs, consider switching to a more powerful PC.

Points to Note When Displaying Comments in OBS Studio

When displaying comments using OBS Studio, apart from delays, there are several important points to be aware of to maintain a comfortable streaming environment and make the stream enjoyable for both viewers and streamers.

• Visibility of the Streaming Screen
  : When displaying comments, you need to consider the placement and size to avoid blocking the game screen or the streamer’s video. If comments make the screen hard to see, it can compromise the viewing experience and prevent achieving the primary goal of the stream. Ensure visibility by adjusting the comment display area or using transparency settings effectively.

• Appropriate Comment Moderation: Inappropriate comments can ruin the stream’s atmosphere and lead to discomfort among other viewers. To ensure smooth streaming progress, remove inappropriate comments or block specific users, and perform appropriate comment moderation.

• Managing CPU Load
  : The comment display function in OBS Studio contributes some load on the PC. If your PC has low specs, the comment display feature might cause the stream to become unstable. Constantly monitor the PC load situation and adjust settings as necessary to prevent issues like delayed streaming or reduced image quality.

Keep these points in mind to maintain a comfortable streaming environment and create a stream that both viewers and streamers can enjoy.

What’s Next After You Can Display Comments?

Once you can display comments, why not pay attention to the overall design of your streaming screen next? The streaming screen design service “Alive Studio” allows you to create a streaming screen that reflects your personality in no time with intuitive operation.

• Over 1,000 background and item materials available for unlimited use, provided by the VTuber material creation team “Usaneko Memory”!
• More than 100 BGM tracks available for unlimited use, provided by music material site “Maoh Damashii”!
• Equipped with a theme roulette and counter function!
• All features available for a monthly fee of 980 yen (tax included)!

“I want to make my stream more unique!” “I want to create an easy-to-see and well-organized streaming screen!”
If you feel that way, definitely try “Alive Studio.”

＼ Try it for free for the first 7 days! Elevate your streams to the next level! ／