Are you struggling with how to make your Twitch comments appear stylish on your stream without dealing with the complexities of OBS and CSS settings?

The bottom line is, even beginners can easily design Twitch comments and display them on their streaming screen.

This article will walk you through the basics of displaying Twitch comments using OBS, ways to make them cute and customizable, and detailed setup procedures using handy tools.

By the end of this article, you’ll learn how to display Twitch comments in a way that’s easy for your viewers to see and stylishly beautiful, ready to implement right away.

Please read to the end.

Four Ways to Display Twitch Comments in OBS

Displaying comments on the screen during a Twitch stream is essential to deepening real-time engagement with your viewers.

OBS Studio allows you to display comments using the following four methods:

• Browser Source
• Streamlabs
• CastCraft
• Twitch Studio

By choosing a Twitch streaming method that suits you, you’ll be able to interact more closely with your audience and enjoy streaming even more.

If you’re a beginner and unsure of how to use OBS Studio, it’s recommended to read the introductory article first.

OBS Studio Guide: Basics to Streaming & Recording for Beginner

Displaying Twitch Comments Using OBS’s Browser Feature | Transparent & Cute Designs Possible

By using the browser feature in OBS Studio, you can easily add Twitch comment displays to your screen.

Moreover, by customizing with transparency and cute designs, you can create a more attractive streaming screen.

The specific steps are as follows:

• Pop out Twitch chat
• Set up a browser source in OBS
• Change design with custom CSS

Let’s take a look at each step.

Pop Out Twitch Chat

First, pop out the Twitch comment section and obtain a dedicated URL.

Using this dedicated URL allows you to easily set up comment displays in OBS, making preparation smooth.

Set Up a Browser Source in OBS

Launch OBS Studio and select the scene where you want to display the comments. First, click the “+” button below the source list.

Select the browser from the list and create a new source.

Once the settings screen is displayed, paste the copied Twitch comment pop-out URL into the URL field.

Adjust the position and size on the preview screen to fit your streaming screen.

Change Design with Custom CSS

Using OBS Studio’s browser source, you can use CSS to change the comment section into transparent or cute designs.

Various styles, such as speech bubble shapes, can be customized.

Templates can make settings easy even for beginners.

Sites for displaying comment sections and chats with OBS’s custom CSS are explained in the following article.

Top 3 Sites to Display Comments & Chat with Custom CSS in OBS

In addition, our site introduces the basics of screen design for streaming and tips on creating attractive screens that capture viewers’ attention.

If you want to enhance viewer satisfaction and liven up your stream, feel free to refer to it.

How to Create a VTuber Streaming Layout: Design Basics and Tips

Displaying Twitch Comments Using Streamlabs in OBS

Streamlabs is a multifunctional web service that not only displays Twitch comments but also notifications for followers and subscriptions.

With Streamlabs, you can customize the design of the comment box to create a viewer-friendly and stylish display.

Proceed with the setup by following these steps:

• Log in to Streamlabs
• Edit the chat box
• Display in OBS using browser source

Let’s take a look at each step.

Log in to Streamlabs

First, open the official Streamlabs site and sign in with your Twitch account.

By selecting the free plan, you can immediately use the comment display feature and make basic settings.

Once your account is linked, the necessary features are enabled, and you can move on to the next step.

Edit the Chat Box

From the Streamlabs menu, select “All Widgets” and open “Chat Box”.

You can freely customize the design, font, color, and animation of the Twitch comment section.

After completing the settings, copy the widget URL to display it on the streaming screen, then proceed to the next step.

Display in OBS Using Browser Source

Launch OBS Studio and select the scene you will use. Click the “+” button in the source panel.

Add a new source by selecting “Browser”.

Paste the copied widget URL.

By adjusting the width and height, you can appropriately display Twitch comments on the streaming screen.

Displaying Twitch Comments in OBS Using CastCraft

CastCraft allows comment display by utilizing two functions: Overlay and Screen.

Specifically, we will explain according to the following:

• Setting up CastCraft
• Using overlay features to display comments
• Using screen features to display comments
• Displaying pop-up comments
• Display scrolling comments (Niconico-style)
• Add effects triggered by comments

Let’s take a look at each one.

Setting Up CastCraft

The initial setup for using CastCraft is done with the following steps:

• Download and install the CastCraft app
• Log into your account
• Grant moderator privileges

Download and Install the CastCraft App

Download the CastCraft app from the official website.

Once downloaded, open the downloaded file and follow the on-screen instructions to complete the installation.

Log Into Your Account

After launching CastCraft, click the “Log In” button and enter the account information you use for Twitch streaming, then log in.

Grant Moderator Privileges

Open your Twitch account’s stream manager and enter “/mod castcraftbot” into “My Chat”, then send.

This allows you to grant moderator privileges to CastCraft Bot.

Using Overlay Features to Display Comments

Proceed with the comment display using overlays by following these steps:

• Customize comment box settings
• Copy the URL and set it in OBS
• Sync comments with Live Dashboard

Customize Comment Box Settings

First, select “Create Overlay” in CastCraft and add a chat box.

Adjust the font, color, and background design to your liking and save the changes.

Copy the URL and Set It in OBS

Once the overlay settings are complete, copy the generated URL.

Next, launch OBS and click the “+” button in the bottom left to add a source.

Select “Browser” from the list and create it as a new source.

When the source settings window opens, paste the copied overlay URL into the URL field.

Adjust the width and height of the comment box to the size that best fits your streaming screen.

Click “OK” to display the comment section on your streaming screen.

Sync Comments with Live Dashboard

Launch CastCraft’s Live Dashboard and sync the streaming data and comments to reflect comments on the streaming screen in real time.

Using Screen Features to Display Comments

The screen feature is a convenient means of displaying Twitch comments in OBS, characterized by its high design customizability.

Set it up following these steps:

• Install Screen
• Import Screen into OBS
• Check in Test Run Mode
• Finely adjust the design
• Sync comments with Live Dashboard after starting “Screen”

Install Screen

To use the screen feature, first, a pre-installation from the Screen tab in the CastCraft app is required.

Open the downloaded file and follow the instructions on the screen to proceed with the setup.

Once the setup is complete, start the Screen tab to ensure the feature works correctly.

The initial launch might take some time, so be patient.

Import Screen into OBS

Launch OBS and select “Video Capture Device” when adding a source.

Next, choose “CastCraft Screen” from the displayed device list and set it for screen display.

Check in Test Run Mode

Select “Cast Mode” in Screen and set the demo messages to “On”.

By clicking on the on-screen comments, you can pick them up and display them in a different location.

Be sure to check how the comments look and behave beforehand.

Finely Adjust the Design

By selecting “Craft Mode” at the top of the screen, you can freely edit the size, location, and design of the comment box and pickup area.

The “Chat Box” designates where comments flow, and the “Pickup Appearance Area” marks where selected comments are fixed.

In the preview screen, you can intuitively adjust the size and placement of widgets by dragging the green frame.

Moreover, by clicking the “+” button in the “Widget Settings” tab, new widgets can be added.

In each widget’s settings screen, you can utilize templates or create detailed designs yourself.

By toggling on the “Stream Demo Messages” feature, you can proceed with adjustment while checking the design.

Once the adjustment is complete, it can be saved as a preset.

Sync Comments with Live Dashboard After Starting “Screen”

Before starting the broadcast, open the Screen tab in CastCraft and launch the screen feature.

Next, launch the Live Dashboard and sync the streaming data and comments.

By performing this setting, Twitch comments will be reflected on the streaming screen in real time.

Displaying Pop-Up Comments

By utilizing craft mode to set up the “Chat Pop-up” widget, comments can be displayed in pop-up form at specific locations.

Using the “Chat Pop-up” allows you to emphasize viewers’ comments or add noticeable effects to match streaming events.

You can adjust widget size and placement, so customize it to fit your streaming layout.

Display Scrolling Comments (Niconico-Style)

CastCraft allows you to set up a style where comments scroll horizontally on the screen, similar to Niconico Douga.

The specific steps are as follows:

• Set up scrolling text
• Display comments based on conditions
• Sync comments with Live Dashboard after starting “Screen”

Set Up Scrolling Text

First, add a “Scrolling Text” widget from the Screen tab in CastCraft.

By using the widget, comments can be displayed horizontally, providing a Niconico-style presentation.

Display Comments Based on Conditions

By utilizing interaction settings, you can set up the display so that only comments that meet specific conditions flow horizontally.

For example, you can customize it to stream all comments or only those containing specific keywords.

Sync Comments with Live Dashboard after Starting “Screen”

Before starting the broadcast, launch Screen and sync the comments using the Live Dashboard to enable the display of scrolling format comments.

Add Effects Triggered by Comments

With CastCraft, you can set up screen effects to appear in response to specific comments.

Proceed with the setup using these steps:

• Create interactions
• Set effect displays based on conditions
• Sync comments with Live Dashboard after starting “Screen”

Create Interactions

First, switch to “Craft Mode” in the Screen tab and open the interaction settings.

Here, create an effect (e.g., penlight) that responds to comments.

Set Effect Displays Based on Conditions

In the interaction’s condition settings, configure it so that an effect appears when a specific chat message is included.

For instance, by setting “Hello” as the condition, the effect will display in response to this word.

Sync Comments with Live Dashboard after Starting “Screen”

Before starting the broadcast, open Screen and sync comments using the Live Dashboard. This allows for real-time effect-laced comment presentation on the streaming screen.

Displaying Comments in OBS Using Twitch Studio

Twitch Studio is a dedicated streaming tool for Twitch, allowing beginners to easily set up comment displays and streaming settings.

Set up comment displays with the following steps:

• Download and log in to Twitch Studio

Download Twitch Studio from the official site, then install it.

After installing, log in using your Twitch account.

• Edit the streaming scene

In the streaming preview screen, select the scene where you want to display comments.

Select “Edit” or “Edit Scene” to open the settings screen.

• Customize the chat layer

Select “Chat” in the layer section and adjust the size, position, and frame color.

By using “Add Test Message,” you can adjust while checking the comment display in the preview.

• Save the settings to complete

Once all settings are adjusted, click “Save” to complete the setup. Comments will now appear on your streaming screen.

Using Twitch Studio, you can easily set up the display of comments and design of streaming screens with simple operations.

Alive Studio, which can be used in conjunction with OBS, makes it easy to design your streaming screen, including comment displays. If you’re interested, please check it out.

Alive Studio | Effortlessly design your stream layout with a rich library of assets

Causes and Solutions for When Twitch Comments Don’t Display in OBS

When Twitch comments don’t display in OBS, reviewing some basic points may solve the issue.

The causes and solutions are summarized below concisely.

Cause	Solution
Account login issue	Re-login with the correct Twitch account
Improper order of sources	Place the “Browser” source at the top in OBS
Comments are outside the frame	Adjust the width and height of the “Browser” source
Settings not saved	Click “SAVE SETTINGS” in Streamlabs
Interference of security software	Temporarily disable security software

By checking the above points in order and reviewing the necessary settings, it’s possible to resolve comment display troubles.

If the issue persists, trying other tools or settings can also be effective.

After Setting Up Twitch Comment Display in OBS, What’s Next?

This time, we explained how to display Twitch comments in OBS and how to customize them. By displaying comments on the streaming screen, communication with viewers can deepen, making for more attractive streaming.

Furthermore, if you’re focusing on the presentation aspect, “Alive Studio” is recommended!

• Over 1,400 background and accessory materials provided by the VTuber material creation team “Usaneko Memory,” available for unlimited use!
• Over 100 BGM tracks available for unlimited use from the music material site “Maou Damasii”!
• Includes topic roulette and counter functions!
• All features available for just 980 yen/month (tax included)!

“I want to focus on the appearance of the stream” “I want a tool for easy management of BGM and backgrounds” If any of these sound like you, why not upgrade your Twitch stream using “Alive Studio“?

＼ Try a free 7-day trial to level up your streaming to a new height! ／