Make it yours.
Tune the look, then head to Install. Your choices are saved in this browser.
01 / Theme
Let's set up your chat.
Three steps, about five minutes. Use the computer you stream from.
-
Create a custom widget
Open StreamElements and go to Streaming tools → Overlays → New overlay. Choose 1920 × 1080.
Click + (Add widget), then Static / Custom → Custom widget. Select the new widget and press Open editor in its settings.
-
Paste your design
The editor has five tabs. For each one: delete everything inside, click the matching button here, paste.
Press Done, drag the widget box to where the chat should sit, then Save the overlay.
-
Bring it into OBS
In StreamElements, copy the overlay URL with the link icon at the top.
In OBS choose Sources → + → Browser, paste the URL and set the size to 1920 × 1080.
Send a message in your Twitch chat. It should appear on stream.
Help
Quick answers to the usual questions.
My messages do not show up
Check that the overlay is saved and the OBS browser source uses the overlay URL. Messages that start with "!" and messages from ignored users are hidden on purpose; both can be changed in Customize.
How do I change the look later?
Every setting here also appears in the StreamElements side panel when the widget is selected. To redo the look from scratch, come back to this page, adjust it, and paste CSS, Fields and Data again.
Why paste Data too?
StreamElements remembers old settings in the Data tab. Pasting the empty Data makes it use your new design.
The font looks plain
Theme fonts load from Google Fonts, so the computer running OBS needs an internet connection.
What are pixel smileys?
When a viewer types :) :D ;) :( :P :O B) xD >:( or <3, the widget draws its own pixel-art smiley. Turn it off in Customize to show the text instead.
How do alerts work?
Follows, subs, gifted subs, tips, bits and raids appear in the chat as a banner. Edit each text in Customize; {name}, {amount}, {sender} and {currency} are filled in automatically. Leave a text empty to turn that alert off.
What is demo mode?
It makes the widget show sample messages and alerts by itself, so you can place and size it in OBS without a live chat. Turn it off before you go live.
License
For use on your own streams and channels. Please do not resell or share the files.