Displaying & Highlighting Live Chats in OBS | Free, No Watermark
For any streamer, displaying Live Chats in your stream is likely a feature that has crossed your mind. It's a pretty simple feature and you’d expect to have dozens of free apps that integrate this feature into your favorite streaming software — OBS!
But after searching for hours looking for plugins and apps and services. You find out that this simple feature is only filled with big expensive software charging hundreds of dollars a year (streamyard, restream.io, vmix social, ecamm live, etc). Or you could settle with spending hours installing and configuring the free versions just to find out that they are super slow and now you have a watermark on your stream!
Nightmare RIGHT!
Well, now you have a simple alternative which is: free, no watermark, not gigabytes of storage space taken, a minute or two to set up, integrates with OBS!
That alternative is Twidget! And best of all! It's not written by some massive money-hungry corporation, instead just an indie developer looking to create some free useful software.
Twidget is a desktop app running Demo of the Twidget App on Windows which enables you to select and display live chat comments from your YouTube stream into OBS. And Twidget is very very simple to use! Here’s how
Step 1: Download & Install Twidget from Windows Store
Twidget is now available in the windows store! This will ease the installation process, so you don’t have to worry about running installers or disabling antiviruses! Simply visit https://www.microsoft.com/en-us/p/twidget/9nvm6slqf60m or search Twidget in the Microsoft Store. Click the Get button and wait a minute or two. Then Boom! Twidget is installed.
Once installed, you can now just launch the app!
Step 1 (alternative): Download the Twidget installer from the official website
If you’re not running Windows 10 though, there’s another way to install Twidget. Although this method is not recommended since you will get virus warnings. But if you’re up for it, visit the Twidget Download Site click the big download button and in a couple of minutes, the installer will be downloaded!
PS: The download from the site only supports 64-bit versions :(
Once the installer has been downloaded from the website. Just click it and wait for the installer to run. You don’t need any setup or configuration, the installer will run it all for you.
PS: If any windows SmartScreen popups launch, you can simply click the “More Info > Run anyway” button. This is simply because Windows takes an additional precaution to indie developer apps.
Step 2: Sign In with Google on Twidget
The next step is pretty simple! In order for Twidget to connect to your Livestream chat messages, it needs to authenticate with Google OAuth. Click the “Sign In With Google” button on the app.
Once you click the button, this will launch a new tab on your browser which prompts you to authorize Twidget to Google. Make sure to choose the Google account which is linked to the YouTube channel on which you are going to be streaming on. After that, a window like this will pop up, click allow.
After successfully authenticating Twidget with your Google account, you should see a browser tab that tells you that you are Logged In. Go back to the app and wait for the app to load your Google account. Soon after, you should see the Twidget main screen. This is where the main app resides. To sign out, you can click the blue “Sign Out” button below your name.
Step 3: Start Twidget’s Chat Feed
Once you’re on Twidget’s main screen, you can now connect your Livestreams with Twidget! Click the big green “Start” button on the top-right corner of the app. This will launch a prompt that asks you to enter your Livestream URLs.
You can choose to connect with only one of the streaming platforms, or even all 3! All up to you. For Facebook though, you will need to first authenticate your account. Just click the Connect With Facebook button and authorize Twidget to Facebook.
PS: Your livestream URL will be the full URL (including https designator) found in the address bar. It will look something like this:
After pasting the Livestream URLs to the app, click “OK”. Twidget will take a few seconds to connect with the stream before it starts showing the stream’s live chat comments in the chatbox.
Step 4: Create an OBS Browser Source for Twidget
As of right now, nothing will happen if you click the “Select” buttons on those live chat messages because we have not created the actual widget which will showcase these chat messages. To do this, we have to create a Browser Source in OBS which will connect to Twidget’s actual widget.
Open OBS and select the scene in which you would like to display the chat widget. Then right-click on the “Sources” tab of the scene and choose the “Add > Browser” option. Select the “Create New” option and just give it any name. Now you should see a window where you can customize the Browser Source:
Set the following properties for the Browser Source:
- URL: localhost:3000/source
- Width & Height: completely up to you (recommended 550x550)
- Custom CSS: leave the default option or leave it blank
- Refresh browser when scene becomes active: enabled
Once you’ve entered the properties for the OBS Browser Source, click “Ok”. And that’s it! Your Twidget widget is configured inside of OBS. Repeat the process for every scene you would like the chat widget to show up in.
Step 5: Selecting and Unselecting Live Chat Comments
Now that you have everything set up! It's time to actually use Twidget! You can select chat messages from the Twidget chatbox, and it will appear in the OBS widget.
You can also unselect the live chats you have selected in order to remove them from the OBS widget.
Why is my OBS widget not appearing?
The simplest way to resolve this is to just refresh the OBS scene which will refresh the browser source and also the widget. To refresh the scene, double click the browser source, scroll down and click the “Refresh Current Page Cache” button.
Step 6: Changing Widget Templates
You can also change the look of your OBS widgets by changing its template. Twidget currently offers 5 different templates for regular chats as well as 2 templates for superchats. These are only base templates though, but you can customize every part of the chat widget through custom CSS.
To change the widget template, click the configuration button which is the right-most button in the chatbox menubar. Once clicked, a prompt will pop up where you can choose your desired widget template.
Once you have selected which templates you would like the widget to have, just click the “X” button on the top-right corner of the prompt. Your selected template will take effect on the next chat selection.
Step 7: Stopping the Chat Feed Connection
Once you’re done with the stream, it’s important to stop Twidget’s connection to the stream. This is pretty simple to do, you can just click the big red stop button on the top right corner of the app and the chat feed will be stopped. Once you’re done using the app completely, you can also just close the app and this will automatically close the stream connection.
Extra: Customize the Chat Widget With Custom CSS
As we’ve seen before, Twidget offers 5 standard prebuilt templates. But you are technically not only limited to these 5 templates, instead you can customize everything about the chat widget using Custom CSS, and I mean everything!
To do this, double click the Browser Source and scroll to the Custom CSS textbox. From here on, you just write your customizations using CSS. Now, we know most people aren’t CSS wizards, and so…. you can contact me through zackvt057@gmail.com or through https://twidgetapp.web.app/#contact and request for a free custom CSS theme to your Twidget widget!
Just to get a little taste of these custom themes, let me show you a few examples of our customized chat widgets through custom CSS:
And that’s Twidget! Go try it out right now — there’s absolutely nothing to lose, it's free! For the macOS and Linux users out there, Twidget will expand to those platforms too. Twidget will also create a lot more features in the future, so keep up!
If you have any questions or issues, feel free to comment them on this post below. I will try my best to answer all of them. Also feel free to email me: zack057@gmail.com (the developer of this app)
You can also take a look at the Official Twidget Website and Windows Store Page