Chat Overlay

Build a custom chat overlay for OBS with design, colors, filter options, and advanced layout controls.

Dashboard overview

On this page you set the Twitch channel, design preset, and base settings, fine-tune spacing, colors, glow, borders, and the chat box, and get a preview plus the final overlay link.

Design and layout

Define the base design and customize it:

Presets like Darkglass, Neon, Retro, Pixel, or No background.
Adjust colors (background/text), font (Google Font name), font size, and border radius.
Choose alignment left/right.
Compact look: Small mode and Keep layout slim for tight scenes.

Filters and options

Control display options for the chat overlay:

Show/hide avatars, show/hide bots.
Ignore additional bot logins (comma-separated).
Optional name color, border, glow, and text shadow.
TTL: automatically hide messages after X seconds (0/empty = off).
Keep old messages (flow) instead of removing them automatically.
7TV paints can be gently animated.

Spacing and fine-tuning

Fit the overlay to your scene by adjusting spacing:

Set outer margin, spacing between messages, and inner padding per message.
Leave values empty = auto, 0 = no spacing.

Overlay frame and background (chat box)

You can also customize the outer chat box:

Enable outer box: background, transparency, blur, and corner radius.
Border color, width, and style (e.g. dashed, double).
Outer glow with strength and spread.
Set outer margin so the glow is not cut off.

Link and preview

Generate the overlay link, copy it directly, and test the preview in your browser.

OBS usage

Add the link as a browser source in OBS and adjust size and position as needed.