How to Add Alerts and Chat Overlays to OBS
OBS displays many alert and chat overlays through a Browser source. The overlay provider supplies a widget URL; OBS displays the resulting page in your scene.
The provider must support your streaming platform and the events you want to show. OBS cannot create that connection merely by displaying a web page.
Check compatibility before choosing a widget
Confirm that the platform permits the integration and that the provider supports its chat or event system. A widget designed for Twitch subscriptions is not automatically a tipping widget for another site.
Check what information it displays, including usernames, messages, sounds, images, and links. Make sure the content and any external branding fit the destination's rules.
Configure the widget
In the provider's supported setup, choose the events, appearance, and sound you want. Use its preview or test event before adding it to a live layout.
Locate the widget's Overlay URL, Widget URL, or equivalent. Treat it as private if it includes an access token or other secret. Do not show the full address in a screenshot or public screen share.
Add it to OBS
- 1.Select the intended scene.
- 2.Click + in Sources and choose Browser.
- 3.Create a source with a recognizable name.
- 4.Paste the widget URL into URL.
- 5.Set the width and height recommended for the widget.
- 6.Confirm and position the overlay.
Move it above the camera in the source list if it should appear in front. Avoid making the browser canvas much larger than needed, particularly when using several overlays.
Test alerts and chat separately
Trigger a supported test event and check placement, duration, and volume. For a chat box, confirm which messages appear and whether long messages obscure the picture.
Make a local recording to inspect what viewers would see and hear. Confirm the event connection separately: a visible blank widget is not proof that it receives live platform events.
If nothing appears
Check that the URL is correct, the source is visible, and the widget has an event or message to display. Review the provider's account permissions and connection status.
A plugin is not normally required simply to show a standard browser widget. Install additional components only when that integration's own documentation requires them.
Do not use an unsupported overlay or payment link as a workaround for the platform's official tools.