Add an alerts overlay to OBS¶

Alerts tell your viewers that someone just followed, subbed or raided, and thank that person in front of everyone. In this tutorial you make an overlay (a layer that CroStream draws and OBS shows on top of your stream), put it into OBS with one click, and add a follow alert with the alert wizard, which builds the trigger and macro for you.

What you'll build¶

Every time someone follows, a card pops up on stream with a picture, "NightOwl_TV just followed!" and a sound, then slides away after a few seconds. If several people follow at once, the alerts play one after another.

Time: about 15 minutes. Level: beginner.

Before you start¶

• CroStream is logged in to Twitch and connected to OBS. See Getting started.
• A picture for the alert (an image, GIF or short video) and, if you want, a sound. Add them under Media library with Add files; Play a sound from the media library shows how.

Step 1: Create the overlay¶

1. In the sidebar, under Media, click Overlays, then New overlay.
2. Set Name to Alerts. Under Start from, pick a blank overlay or one of the templates. Pick an Orientation and a Resolution: when OBS is connected, the list offers OBS's own canvas size, which is the best choice.
3. Click Create. The overlay editor opens.

Step 2: Add it to OBS¶

1. Go back to Overlays. Open the menu on the Alerts card (or right-click the card) and choose Add to OBS.
2. Pick the Scene that should show alerts. Source name, Width and Height are filled in for you.
3. Switch on Control audio via OBS so alert sounds go through OBS's mixer and your viewers hear them.
4. Click Add source. The overlay is now a browser source in that scene.

Step 3: Set up the alert¶

1. Open the Alerts overlay. In the toolbar click Alerts, then Add alert. (Add → Set up an alert… opens the same wizard.)
2. Event. Under When someone…, pick Follow, then click Next. For events with options, such as a cheer, an Only when section lets you set a minimum.

3. Look. Pick Quick alert: one ready-made element with a picture, headline, message and sound.

   • Choose a Picture from your library.
   • Choose a Sound if you want one.
   • Keep the Headline {user} just followed! or write your own. {user} becomes the follower's name; the buttons under the box insert the other values the event offers.

   (Custom instead makes a group of plain elements you can move and resize one by one.) Click Next.

4. Behavior. Set Show for (seconds), the Comes in and Goes out animations and the Animation length. Under Sound plays, pick In OBS so viewers hear it. (On this PC plays it only on your speakers; Both does both.)

5. Give it a Name, such as Follow alert, and click Add alert.

The wizard just made three things: an alert element on the overlay (hidden until an alert plays), a macro with a Show an alert step, and a trigger on the Follow event. The last page links to them with Edit trigger and Edit macro.

Check it works¶

1. On the wizard's last page, click Test. Later, click Alerts in the editor's toolbar: the Alerts on this overlay list has a Test button next to each alert. The alert plays on stream with sample values, so look at OBS.
2. Switch on Live in the editor toolbar to see alerts play on the editor's canvas too.
3. For the real thing, follow your channel from a second account.

The switch next to each alert turns its trigger on or off, and the two buttons beside Test open the alert's trigger and macro.

Troubleshooting¶

Next steps¶

• Add alerts for cheers, subs, gifted subs, raids and redemptions by running the wizard again: Alerts.
• Restyle the alert with fonts, text effects and frames in the inspector. See Overlays. For your own CSS, see Custom CSS.
• Show a running count or a goal bar with the Counter and Goal bar elements: Widgets.
• Show a points leaderboard on the same overlay: Run a points system.