Add donate.chat alerts to OBS

donate.chat has its own alert overlays. You add one browser source to OBS, and every tip pops up on stream. You can change how alerts look, fire test alerts, and if OBS loses the connection for a moment, the alerts you missed play when it reconnects.

Already using Streamlabs or StreamElements alerts? You can keep them instead. See Connect StreamElements or Streamlabs. If you use both, each tip shows up twice.

1. Create an overlay

1. Sign in and pick Overlays in the dashboard sidebar (donate.chat/dashboard/overlays).
2. Click New overlay.
3. Give it a Name, for example "Main scene", and click Create.

New overlays are 1920 × 1080, the size of a regular 1080p scene.

2. Copy the browser source URL

Right after you create the overlay, a window called Copy this URL into OBS opens. It shows a URL that starts with https://overlay.donate.chat/#t=.

1. Click Copy and keep the URL somewhere safe until it's in OBS.
2. Tick I've saved this URL, then click Done.

We only show this URL once. It works like a password for your overlay, so don't show it on stream. Lost it? Open the overlay and click Get a new URL under Browser source URL. The old one keeps working for 24 hours, so you have time to update OBS.

3. Add a tip alert

A new overlay is empty, so give it something to show.

1. On the overlays page, open the overlay you just made.
2. Under Starter kits, click Apply next to Tip Alert.

Want a different look? Pick the widget under Widgets and edit its HTML, CSS and JS, then click Save.

4. Add it to OBS

1. In OBS, pick the scene you want alerts in.
2. In the Sources panel, click + and choose Browser Source.
3. Give the source a name and click OK.
4. Paste your URL into the URL field.
5. Set Width to 1920 and Height to 1080, then click OK.

The source looks empty until an alert comes in. That's expected.

5. Fire a test alert

1. Back in the overlay editor, find the Test alert panel.
2. Under Event, pick Tip.
3. Click Fire test alert.

The alert should pop up in OBS right away. If nothing shows, check that the browser source URL is the full URL from step 2, including everything after #t=.