Picture

This overlay is still in a testing phase, so you may experience some hickups. Since I am not a Twitch affiliate, I have a hard time testing everything properly. So if you catch anything or feel like a key feature is missing, let me know in my discord!

Twitch

OBS

StreamerBot

Table of contents

  1. Description
  2. Setup
  3. URL Parameters
    1. Hide Messages After X Seconds
    2. Timestamp
    3. Pronouns
    4. Avatars
    5. Exclude Events
    6. Exclude Accounts
    7. Exclude Commands
    8. Background
    9. Background Opacity
    10. Background Color
    11. Font
    12. Font Size
    13. Dropshadow
    14. Minimum Reward Cost
    15. Enter Direction
  4. FAQ
    1. 1. Can I make the chat horizontal?
    2. 2. Does it support YouTube, Kick, Tiktok and Trovo?
  5. Changelog

Description

A customizable vertical Twitch chat overlay for OBS!

  • Pronouns
  • Timestamps
  • Profile Pictures
  • Removes Deleted Messages
  • Twitch Events (including Watch Streaks, Gigantify, Announcements, Channel Rewards)
  • Kofi Donations
  • Replies
  • and much more…

Picture

Setup

  1. Go into Streamerbot and head to the tab Servers/Clients -> WebSocket Server and start the websocket server. Leave the adress at 127.0.0.1 and the port at 8080. Check Auto Start as well. You can set a password, but you don’t have to. If you do, make sure Enforce for All Requests stays unchecked.

    Picture

  2. Copy the URL

     https://tawmae.github.io/overlays/VerticalTwitchChat.html

  3. Go into your OBS, create a browser source and paste the URL in there. Set it to your preferred size.

    Picture

    Picture

  4. Done 🥳

URL Parameters

You can customize the chat with URL parameters. The first parameter gets added with a ?, every additional one with &.

Example: https://tawmae.github.io/overlays/VerticalTwitchChat.html?background=true&fontsize=21px&showavatars=false&excludecommands=true&excludeaccounts=tawmaebot+kofibot

Hide Messages After X Seconds

Hides messages/events after x seconds.

hideAfter=60

Timestamp

Toggle the timestamp. Default is false.

showTimestamp=true

Pronouns

Toggle pronouns. Default is true.

showPronouns=false

Avatars

Hide user avatars / profile pictures. Default is true.

showAvatars=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

You can copy this to exclude all events: excludeEvents=sub+resub+giftsub+giftbomb+rewardredemption+watchstreak+cheer+raid+donation+announcement

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

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

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

Enter Direction

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

enter=left

FAQ

image

1. Can I make the chat horizontal?

  • No, the Vertical Twitch Chat has no option to make it horizontal.

2. Does it support YouTube, Kick, Tiktok and Trovo?

  • No, the Vertical Twitch Chat does not support any other platforms.

Changelog

Date Changes Version
January 17, 2025 Beta-Release 0.1.0