VERTICAL CHAT

BRING Clap BACK Clap VERTICAL Clap CHATS!

This is a very simple but also customizable vertical chat overlay you can throw into your OBS. And you can run it all locally (if you wanted to)...
griffinTyping

BROWSER SOURCE URL

https://tawmae.xyz/overlays/vertical-chat.html

SETUP

1. In Streamer.bot, go into the Servers/Clients -> WebSocket Server tab. Check Auto Start WebSocket Server, leave Address at 127.0.0.1 and the Port at 8080. You can set a password if you want, just make sure to leave Enforce All Requests unchecked. Start the server.

Here you can check in real-time if your Websocket server is up and running:

2. Copy the Browser Source URL from above into your clipboard.

3. In OBS, create a new Browser Source, name it whatever you want. Then paste the copied URL into URL and set the Width and Height to your prefered size.

And then you're done Pog Clap

CUSTOMIZATION

If you want to customize the chat widget, you can use the URL builder below.

URL Builder:

https://tawmae.xyz/url-builder/vertical-chat

If you want to add them manually, the URL Parameters are placed at the end of the URL. The first parameter is getting added with a ?, every additional one with a &.

Hide Messages After X Seconds

Hides messages/events after x seconds.

hideAfter=60

Timestamp

Toggle the timestamp. Default is false.

showTimestamp=true

Pronouns

Hide pronouns. Default is true.

showPronouns=false

Avatars

Hide user avatars / profile pictures. Default is true.

showAvatars=false

Badges

Hide chat badges and shared chat icons. Default is true.

hideBadges=false

Icons

Hide the event icons. Default is true.

hideIcons=false

Exclude Events

Exclude specified Twitch events from appearing in the chat overlay. Seperate multiple events with a +.

excludeEvents=sub

excludeEvents=sub+resub+watchstreak+donation+raid

Exclude Accounts

Exclude specified accounts/users like bots from appearing in the chat overlay. Seperate multiple users with a +.

excludeAccounts=tawmaebot

excludeAccounts=tawmaebot+streamelements+kofibot

Exclude Commands

Exclude commands (messages that start with an exclamation mark, !command).

excludeCommands=true

Background

Toggles the background.

background=true

Background Opacity

Changes the opacity of the background.

backgroundOpacity=69

Background Color

Changes the background color of the background box. Supports hex colors, but then you need to replace the # with %23.

backgroundColor=pink

backgroundColor=%23ffc0cb

Background Style

Applies the background just to individual messages instead of the entire browser source, so background=true needs to be enabled. You can choose between regular cards or ones with rounded corners. Opacity and colors apply to them.

backgroundStyle=cards

backgroundStyle=cardsRounded

Font

Changes the font used for the text. Supports standard and google fonts. Spaces are replaced with a +.

font=Arial

font=Comic+Sans+MS

Font Size

Changes the font size and also scales all other elements according to it.

fontsize=10px

fontsize=26px

Dropshadow

Toggle the dropshadow for the text. Default is true.

dropshadow=false

Big Dropshadow

If the dropshadow has not been disabled, you can make it even bigger to give more contrast.

bigDropshadow=true

Minimum Reward Cost

Set the minimum cost of channel point rewards to show in the overlay, so you can exclude cheap high-frequency rewards.

minRewardCost=250

Entry Direction

Change the entry direction of the chat messages. Default is right.

enter=left

Text alignment

Change the alignment of the text. Default is right.

justify=left

Force Casing

force upper- or lower-casing.

forceUppercase=true

forceLowercase=true

CHANGELOG

Date	Changes	Version
February 02, 2025	Fixed an issue with ?hiderAfter	1.0.2
February 02, 2025	Release	1.0.0