Niconico Douga style chat overlay - Simply set it up.
"What kind of style are you referring to?" you might be asking. Well, here are some examples you might recognize!
One-click installation is on its way, all we need is overlay sharing approval from StreamElements!
- On your StreamElements overlay (if you don't already have an overlay, create one on StreamElements' overlay dashboard), add a new custom widget by selecting "+" then
STATIC/CUSTOMthenCustom widget. - On your left side panel, select your widget →
Position, size and style→ Width and Height. Change your widget size to be the full resolution of your overlay. For example, if your overlay was 1080p, then your widget size should be 1920px by 1080px. - Center your widget by clicking on
CENTER WIDGET. - On your widget, select
SettingsthenOPEN EDITOR. - navigate to the StreamElements folder on our repository and paste each file content to the appropiate field on StreamElements.
layout.html→HTML,chat.css→CSS,chat.js→JS,chat.json→FIELDS. Do not mess with theDATAfield, it's just your current widget settings.
The Streamlabs version is still very much a prototype. It was not tested against things like XSS attacks and lacks a lot of features compared to the StreamElements version.
- Navigate to the
Streamlabsfolder on our repository and copy each of the files. - Head into Streamlabs' chatbox configuration dashboard
- Navigate down to
Enable Custom HTML/CSSand selectEnabled. - Replace the code in each of the fields with the code from our repository.
Super straight-forward. Upon installing the widget correctly, new sections will appear on your left side panel with options to configure character limit, command hiding, bot and user chat hiding, and a ton of typography options as well.
💬 Chat
| Option | Default | Description |
|---|---|---|
| Message characters limit | 250 | Limit of characters in a message, if exceeded, the message will not be shown on the overlay. You can override the max value of this field by modifying your the max value within CharLimit in your fields code. Do keep in mind that this will mess with the scrolling speed, modify your CSS keyframes to match your characters. Max characters in a Twitch chat message is 500 characters, this includes unformatted emotes. |
| Users to hide messages from | 25PStreamElements, Nightbot, Moobot, Cloudbot | The listed usernames you add here (separated by comma and space) will not be shown on the overlay. Great for bot messages. |
| Hide command messages starting with (!) | True | If a message represented a command by starting with the exclamation mark prefix, then it will not appear on the overlay. |
🌈 Typography
| Option | Default | Description |
|---|---|---|
| Font name | Roboto | A Google Fonts font name or a locally installed font name. Changes the messages' font. |
| Font size | 7 | Font size relative to the height of the overlay. Can be changed to your favorite metric within your CSS file. |
| Message opacity | 0.9 | The opacity of the appearing message, less makes the background more clear. 1 makes the text solid. |
| Font weight | Bold (700) | The thickness of your font. Options vary from font to font. |
| Enable static color | False | By default, the chat text's color is going to be the username the user sets in the chat appearance tab on Twitch. Enabling this will set the color of all chat messages to a single static color. |
| Static font color | Enable static color must be enabled for this option to work. This will be the static color your chat messages will have. |
|
| Let users choose their own message color by commands | False | This option will let chat choose their own message color by adding a color prefix to their message. For example, #red That's pretty pog!. The #red part will be erased and the message will be colored according to the desired color. This can be a hex code, an RGB value or a color name from the supported CSS color list. |
| Text shadow | rgb(0, 0, 0) 1px 0px 0px | A CSS property to add shadow to your text. Can make texts seem more readable. |
| Emote size | 8 | Similar to font size. Relative to the overlay's view height as well. |
As the Streamlabs' current widget theme is experimental, configuration is unfortunately manual for the most part through code modification. chat.js contains comments documenting what each line of code does. For beginners, we'll recommend you use StreamElements until the Streamlabs version is user-friendly to some extent <3
Feel free to use this panel in your channel's bio to help your viewers understand how color commands work!
- Support StreamElements 🦄
- Built-in customization options
- Secure against XSS attacks
- Color commands 🌈
- Rich text formatting
- One-click installation
- Event options
- Cherry-pick mode
This project and everyone participating in it is governed by our Code of Conduct. By participating, you are expected to uphold this code.
Don't be afraid to ask whatever's floating in your mind or you're having trouble with. We don't judge here (* ￣▽￣)ノ”(^ー^*). Just make sure your issue had not been discussed and solved before first and label your issue appropriately.
Pull requests are more than welcome, they are encourged, even! Feel free to try and breathe your creativity into this project!