How to Set Up Live Stream Overlays and Alerts

Install Your Overlay Alerts and Widgets

OBS Studio

Install quickly or manually set up your overlay. Includes details on stinger transitions and scenes (intro, outro, be right back).

Get Started

Streamlabs

Install your alerts, widgets, and Streamlabs OBS overlays.

Get Started

StreamElements

Import all your overlays, alerts, and widgets directly to your StreamElements account.

Get Started

Customization Guides

Change overlay colors and learn our recommended export settings for After Effects.

Get Started

Streamlabs

Installing Streamlabs OBS Overlays

The following steps are specific to Streamlabs OBS and the .overlay file. Only Streamlabs OBS can make use of the .overlay file. If you’re using streaming software other than Streamlabs OBS, please follow the steps in the “Overlays” and “Scenes” sections.

  1. Download and install StreamLabs OBS if you haven’t already
  2. Unzip the files you’ve downloaded onto your computer.
  3. Open/Run Streamlabs OBS.
  4. Open the Streamlabs OBS settings by clicking the settings wheel at the bottom left corner
  5. Click on “Scene Collections” on the left of the pop-up menu
  6. Click on “Import Overlay File”
  7. Browse to your unzipped files
  8. Select the “.overlay” file

*NOTE: After selecting the file, it may take several minutes to for all the resource to load. This will setup the transition (if included) and multiple Scenes (Starting, Ending, BRB etc…)

Streamlabs OBS Overlay Install

Streamlabs Alerts

In your downloaded files, open up the standard alert folder.

  1. Click the Alerts Quick Setup link to begin installing these alerts.
  2. If you’d like, choose “Create Widget Theme” and name it something appropriate such as package name. The import link will only override your alert package. This means you can combine these alerts with any other scene collection/widgets you’ve made in Streamlabs. If you want to save your old alerts, it’s highly recommended to do this in a new profile.
  3. Select “Use” for the profile you want to import into.
  4. Navigate to “Alert Box” and copy your unique URL.
  5. Paste this URL as a “Browser Source” in your streaming software.

Once you’ve added this into your streaming software test the alerts to make sure they’re working properly.

Streamlabs Alert TutorialAlert Customizations

Streamlabs Widgets (Chat Box, Event List, and Goals)

In your downloaded files, open the folder to the widget you would like to install.

*(Alerts are a separate download. All other widgets can be found with the Overlays download)
  1. Click the Quick Setup link to begin installing the Widget.
  2. If you’d like, choose “Create Widget Theme” and name it something appropriate such as package name. The import link will only override your selected widget. This means you can combine these with any other scene collection/widgets you’ve made in Streamlabs. If you want to save your old widgets, it’s highly recommended you create the new profile.
  3. Select “Use” for the profile you want to import into.
  4. The page will automatically take you to the Widget settings for the widget you just imported.
  5. Click on the “Copy” button next to the unique URL.
  6. Paste this URL as a “Browser Source” in your streaming software.

Once you’ve added this into your streaming software, test the widget to make sure they’re working properly.

Streamlabs Chat Box GuideStreamlabs Goal Widget GuideStreamlabs Event List Guide

Stinger Transitions in Streamlabs OBS

  1. Click the gear icon above your scenes
  2. Set the “Transition” option to “Stinger”
  3. Set the “Duration” to 1000
  4. Select Browse for the “Video File” and choose the stinger file found in the “Screens” folder
  5. Make sure “Transition Point Type” is set to “Time (milliseconds)”
  6. Set the “Transition Point (milliseconds)” to 500
  7. Leave other settings on their defaults
  8. Hit Done

SLOBS Stinger Transitions

StreamElements

StreamElements Overlay Import

In your downloaded files, open up the Streamelements alert folder.

  1. Head over to Streamelements.com and ensure you’re logged in.
  2. Double click the Streamelements Overlay set up link from your downloads
  3. This link will automatically open up the Streamelements website and begin the import.
  4. You should get a notification at the top of the Streamelements website stating the import was successful
  5. Head over to “My Overlays”
  6. You should now find the imported Overlay scenes named after the pack they are from, and what they’re intended for.
  7. Click on the “Launch Overlay” to get the URL for your alerts
  8. Paste this URL as a “Browser Source” in your streaming software.

*NOTE: The Streamelements links are specific to your platform. You can only use the Twitch link for Twitch, and YouTube for YouTube.

Once you’ve added this into your streaming software, test the widget to make sure they’re working properly.


StreamElements Alerts Install

In your downloaded files, open up the Streamelements alert folder.

  1. Head over to Streamelements.com and ensure you’re logged in.
  2. Double click the Streamelements Alert set up link from your downloads
  3. This link will automatically open up the Streamelements website and begin the import.
  4. You should get a notification at the top of the Streamelements website stating the import was successful
  5. Head over to “My Overlays”
  6. You should now find the imported alerts named after the pack they are from.
  7. Click on the “Launch Overlay” to get the URL for your alerts
  8. Paste this URL as a “Browser Source” in your streaming software.

*NOTE: The Streamelements links are specific to your platform. You can only use the Twitch link for Twitch, and YouTube for YouTube.

Once you’ve added this into your streaming software, test the widget to make sure they’re working properly.

StreamElements Alerts Install Guide

StreamElements Widgets Installation (Chat Box, Event List, Goals)

In your downloaded files, open the folder to the widget you would like to install.

*(Alerts are a separate download. All other widgets can be found with the Overlays download)

In your downloaded files, open up the Streamelements Widget or Alert folder.

  1. Head over to Streamelements.com and ensure you’re logged in to the correct account.
  2. Double click the Streamelements Quick Setup link for the widget you want to import.
  3. This link will automatically open up the Streamelements website and begin the import.
  4. You should get a notification at the top of the Streamelements website stating the import was successful
  5. Head over to “My Overlays”
  6. You should now find the imported widget named after the pack they are from.
  7. Click on the “Launch Overlay” to get the URL for your alerts
  8. Paste this URL as a “Browser Source” in your streaming software.

*NOTE: The Streamelements links are specific to your platform. You can only use the Twitch link for Twitch, and YouTube for YouTube, and Facebook for Facebook.

Once you’ve added this into your streaming software, test the widget to make sure they’re working properly.

OBS Studio

Quick Import – Supercharged

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

  1. The first step is to start
  2. Now, you’ll want to do something else
  3. If you’ve made it this far, you should keep going
  4. A bit more
  5. And finally, you’re done and looking good

OBS Studio Quick Install Overlays

Manually Install OBS Overlay Files

While we highly recommend using the quick installer for OBS Studio, you might need to import individual files. To do so:

  1. Open OBS Studio
  2. In the source panel, click the + icon and select the type of source you’d like to add
  3. Use the Browse button to select the file you’d like to add.

Note: Depending on the version of OBS Studio, you may be able to drag in your media, image, and text files directly into your preview window to add them as sources.

The most common sources to use are:

  • Media Source – Add your video files using this source
  • Image Source – Use this source for static images
  • Browser Source – Commonly used for alerts, chat boxes, event lists, and any type of widget
  • Text Source – Add static or dynamic text to OBS Studi

OBS Studio Install

Stinger Transitions in OBS Studio

  1. Under the “scene transitions” section, click the “+” under the drop down and select “Stinger”
  2. Give the “Stinger” a name and click “Ok”
  3. For “video file” click browse and select the stinger.webm found in the “Screens” folder
  4. Set the “transition point type” to time and “transition point” to 500
  5. Enable sounds by setting “Audio Monitoring” to “Monitoring and Output”
  6. Click OK

Stinger Transitions in OBS Studio

Scene Setup in OBS Studio

Setting up your scenes in standard streaming software:

  1. The scenes will be divided up into media sources (video files), image sources, and text sources.
  2. Add any new media sources for each scene
  3. Set thees sources to looping, and select a local file
  4. To reduce CPU or encoding resources, make sure “Close File When Inactive” is checked
  5. Add in image sources for icons (found in the icon folder) if desired
  6. Add in text sources, using the recommended font, and place next to the icon if desired.
  7. Duplicate scenes and change as needed.

Overlay Customization Guides

Stream Pack After Effects Guide

While we have prepared this file up to be very user friendly, we do expect that you have experience with After Effects and methods of exporting video files. If you are not comfortable with the software, we do not recommend you include this in your purchase. Here are some basic instructions to get you started:

  1. Once you’ve unzipped your product contents, navigate to the Source Files folder
  2. Open the .AEP file
  3. Select the “@Master Control” composition from the project list
  4. Open the Essential Graphic tab (Window > Essential Graphics)
  5. Tweak these values to your liking
  6. “File > Export > Add to Adobe Media Encoder” each composition as required. You will need to save as a format that supports alpha (.mov and .webm). For webm support in Adobe Media Encoder, you must first install this plugin.

After Effects Source Filters Tutorial

Best MP4 Export Settings for Overlays

For compositions with no transparency/alpha

  • Format: H.264
  • Preset: Match Source – High bitrate
  • Switch OFF Audio
  • Unless you plan on streaming at 4k, we highly recommend changing large “scene” resolutions to 1920×1080.
  • Frame rate: 60 (or 30 if you’re struggling with stream performance)

MP4 Settings

Best WebM Export Settings for Overlays

To achieve WebM exports from Adobe Media Encoder you will need to install this plugin.

  • Format: WebM
  • Preset: none
  • Switch OFF Audio
  • Unless you plan on streaming at 4k, we highly recommend changing large “scene” resolutions to 1920×1080.
  • Frame rate: 60 (or 30 if you’re struggling with stream performance)
  • Codec: VP8
  • Include Alpha Channel (very important)

WebM Settings

Customizing Your Overlay Colors

Adjustment of colors can be done in OBS Studio and StreamLabs OBS by using color correction filters. If you’re not familiar with filters, please watch this video.

If you’d like to adjust your Twitch panels, please use the .psd file found inside the “Panels” folder. You may also use the blank.jpg file with any image editing software.

OBS Studio Filters Guide

Usage Terms

The user is granted permission for personal and commercial use. It is intended for one (1) end user. These usage permissions do not expire. Re-distribution is strictly prohibited. The alert graphics and code remain the property of Nerd or Die unless written permission is granted.

Please refer to our Terms and Conditions for more information.

Future Updates and Download Information

This version of the alert is provided as is. If there are missing elements or you think something critical needs addressing, please contact us outlining the issue and provide the email used to purchase the product. You are allowed up to 5 downloads per product.

Follow us on Twitter or join our Discord for more information about updates.