tChat – Twitch chat overlay for OBS or browser

[broadcaster/1] [ghlf-pledge/1] He/Him crazysmc this is a chat message

[broadcaster/1] [ghlf-pledge/1] He/Him crazysmc this is a longer message containing emotes like and meow which will make these bots answer as well

[moderator/1] [partner/1] Fossabot meow

[moderator/1] [partner/1] Nightbot meow

[broadcaster/1] [ghlf-pledge/1] He/Him crazysmc this is an announcement

crazysmc added emote otag.

FirstTimeChatter yo bro kinda different question but can you please explain me how do people fill a chest with shulker boxes and when they put a hopper to the chest it starts filling the shulkers that are inside

[broadcaster/1] [ghlf-pledge/1] He/Him crazysmc this is a longer message containing emotes like :3 and meow which will make these bots answer as well @crazysmc this is a reply to myself

Highly customisable chat reader with support for

Pronouns.Alejo.io;
BetterTTV emotes, badges, glow and live updates;
FrankerFaceZ emotes and badges; as well as
7TV emotes, badges, name paints and live updates.

This also includes emote effects like w! meow meow or meow ffzX meow .

Mod actions like deleting a message or clearing the chat are actioned as soon as possible. Announcements and sub messages are highlighted by default.

First time chats are also highlighted as this information is publicly available and many chat extensions and clients will show this. (see Options below if you want to disable this)

Shared chat uses the badges and emotes from the respective source channel of each message. The source channel is indicated by default via channel avatar icons, using animated ones if enabled in 7TV. You can also join several channels simultaneously and get a combined view.

Runs without a backend, fully in Javascript. Open source

Options

Main Parameters

Channel(s) to join (if multiple, separate with white-space)

Time in seconds until each message disappears again (if unset, only messages scrolling out the top will be removed)

Image Options

Size of the emotes and badges to load (the font size scales accordingly)

Replace animated emotes, badges and paints with static ones

Optional Predefined Styles

Add a colon after regular chat messages that are not a /me action

Do not highlight first time chats

Hide messages from bots (according to the bot badge from FrankerFaceZ)

Force the message to wrap all the way, even in wide viewports. (Removes the hanging indent from long messages, especially useful with long user names in narrow spaces.)

Extra Features …

Show a notice when someone was banned/timed out (messages are still deleted from the chat)

Show chatters joining and parting from chat (not received in chats with more than 1,000 chatters)

Load recent messages and keep the chat history. This is not useful as an overlay but a nice way to scroll chat history in browser using recent-messages.robotty.de.

Disable Cool Features?

Disable Pronouns.Alejo.io

Disable BetterTTV

Disable FrankerFaceZ

Disable 7TV

When adding the browser source to OBS, make sure to use the width and height values in the properties to resize the source. Dragging the edges of the box will distort the browser content.

Custom Styles

The structure of the document generated by the chat overlay should allow for great customisability using added CSS snippets.

Adding a new browser source in OBS will give you a default CSS that looks like this:

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

This will make the overlay transparent and make sure it has no scrollbars.

You can add more CSS rules to this; here are some examples. Just pick the one you want and append them in the Custom CSS option. (To make the textbox bigger, you can drag the divider below the preview at the top upwards.)

Change the font of the page, for example to a monospace one
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap'); body { font-family: 'Roboto Mono', monospace; }
Hide messages by their text content, for example hide commands starting with an exclamation mark
.chat-line[data-text^="!"] { display: none; }

→
Make the Purple Pixel Heart badge less similar to a VIP badge
img[alt="[purple-pixel-heart---together-for-good-24/1]"] { filter: grayscale(.3); }