Wildcat Chat Overlay

Overview

The Wildcat Chat Overlay displays Twitch and YouTube Live chat messages inside OBS Studio. You can configure settings in the Chat Scene Creator on the web or directly inside the OBS browser source.

Get Started with the Chat Overlay

Platform Support

The chat overlay connects to streaming platforms. You can configure your target platform in the settings menu.

Customization & Themes

The chat overlay provides visual customization tools. You can change styling directly in the settings menu.

Configuration Options: You can configure chat settings in two ways:
  1. Web Chat Scene Creator (Recommended): Configure channel connections, fonts, themes, colors, and layouts on the web. The Chat Scene Creator automatically syncs your edits live to OBS.
  2. In OBS Settings Panel: Right-click the Browser Source in OBS and select Interact. Hover over the chat and click the settings gear () to customize settings locally.
  3. Settings save automatically for each scene source.

Automatic AI Themes

The overlay includes a natural-language AI theme generator. In the settings panel, type a text description of the aesthetic you want (for example, "cyberpunk neon night" or "cozy wooden cabin"). The overlay generates CSS variables, adjusts color contrast, sets matching pronoun badge colors, and applies the theme live.

Theme Carousel & Custom Themes

Use the theme carousel to select preset themes, AI-generated themes, or user-created themes. The carousel stores up to 50 saved themes. You can delete custom themes with a confirmation modal. Active themes synchronize across pages.

Saving Custom Theme Presets

You can save your current visual settings as a named theme preset. Save presets from the Chat Scene Creator or the OBS settings panel. Presets save to the cloud theme carousel.

Color Customization

You can set the color of every chat element. Enter hex color codes directly (for example #FF5500). Dynamic swatches show your current colors. You can also enter transparent or hex codes with alpha values for transparent background colors.

Tip: You can search Google for "color picker" to use an interactive color picker tool. Copy and paste hex codes into the settings fields.

Available Color Settings

Google Fonts & Typography

Customize font styles, sizes, and layout constraints to match your broadcast layout.

Searchable Google Fonts

Use the searchable font picker UI to search and select from available Google Fonts. The font manager loads Google Font stylesheets live across preview and OBS sync.

Typography & Layout Settings

Third-Party Emotes & Stacking

The overlay supports third-party Twitch emote providers: BetterTTV (BTTV), FrankerFaceZ (FFZ), and 7TV. Global and channel emote sets load automatically for Twitch channels.

Zero-Width & Overlay Stacking

Zero-width emotes (like hats or rain effects) stack on top of the preceding emote when separated by a space (for example catJAM cvHazmat). You can chain zero-width emotes to create multi-layered stacks. Single-emote enlargement applies automatically to stacked emote combinations.

Priority & Matching

Emotes match as exact case-sensitive words. Twitch native emotes take priority over third-party emotes. Channel emotes take priority over global sets.

Content Safety & Customization

You can configure third-party emote settings in the settings panel:

Display Modes & Animations

Choose between Window mode (continuous scrolling list) and Popup mode (transient message bubbles). Message entry and exit animations use the Web Animations API for smooth performance.

Popup Animation Directions & Controls

In Popup mode, configure message entry directions: From Bottom, From Top, From Left, or From Right. You can also configure message duration (2 to 60 seconds) and maximum popup count (1 to 10). Popup messages stay visible during customization so you can preview changes.

Reduced Motion Support

The overlay respects system prefers-reduced-motion settings. When enabled, window mode entry animations are disabled and popup transition durations are minimized.

Config Panel Features

Right-click the Browser Source in OBS and select Interact to open the settings menu. Available options include:

Chat Scene Creator

The Chat Scene Creator lets you create and manage named chat overlay scenes for different stream layouts (for example, Gaming or Just Chatting).

Key Features

Automatic Live Sync

The Chat Scene Creator automatically generates a unique sync token in your OBS URL: chat.html?scene=NAME&sync=TOKEN. Edits saved in the web interface update your OBS browser source live without refreshing the page.

If you configure settings directly inside OBS, settings save locally in the OBS browser source cache.

Exporting & Importing Scene Files

You can back up or transfer chat scene settings with JSON files.

Linking Existing Scenes (Sync Token)

You can link an existing cloud-synced scene to a new browser or computer using its sync token.

  1. Click Link Scene in the left panel.
  2. Enter the sync token from your OBS URL (the alphanumeric token after sync=).
  3. Click Link to pull scene settings from the cloud. Linked scenes update live when you save changes on any device.

URL Parameters

The overlay URL accepts query parameters. The Chat Scene Creator adds the scene and sync parameters for you. You can add the other parameters by hand.

Parameter What it does Example
scene Loads a named scene. The overlay loads the scene named default when you omit this parameter. chat.html?scene=gaming
sync Links the browser source to a cloud-synced scene. Read Automatic Live Sync for more information. chat.html?scene=gaming&sync=TOKEN
demo Shows sample chat messages. The overlay does not connect to Twitch or YouTube in this mode. chat.html?demo=1
debug Shows status and diagnostic messages on screen. The overlay hides these messages by default. chat.html?scene=gaming&debug=1

Diagnostic Messages

The overlay hides all status messages by default. Connection notices and error text stay off your stream. The parameter debug=1 shows these messages on top of your chat.

The overlay always writes the same messages to the browser console. The console keeps a record of them even when the URL has no debug parameter.

The connection status for Twitch and YouTube is in the config panel. Right-click the browser source in OBS and select Interact to see it. The status shows Connected, Connecting, Reconnecting, or Disconnected.

Remove debug=1 from the URL before you stream. The messages are visible to your viewers.

Demo Mode

The parameter demo=1 shows sample chat messages in a loop. The overlay does not connect to a chat platform, and it hides the connection prompt. The Chat Scene Creator uses this mode for the live preview.

OBS Setup Instructions

Follow these steps to add the chat overlay to OBS Studio:

  1. In OBS Studio, open the Sources panel, click +, and select Browser.
  2. Enter a recognizable source name (for example, "Twitch Chat").
  3. Paste the URL generated from the Chat Scene Creator into the URL field. If you cannot paste the URL, uncheck "Local file".
  4. Set Width to 320 and Height to 600.
  5. Click "OK" to add the browser source to your canvas.
  6. Configuring Settings: Save your settings in the Web Chat Scene Creator to sync live to OBS. Alternatively, right-click the Browser Source in OBS and select Interact to adjust settings locally.
  7. In the interactive window, enter your channel information, click the settings gear (), and click "Connect".

Advanced OBS Tips