Skip to main content

Create Your First Overlay

Overlays are visual layers that display on top of your stream. They contain widgets — alert boxes, text, images, progress bars, and more. Let's create one and add it to OBS.

Step 1: Create an Overlay​

  1. Navigate to Overlay Manager in the sidebar
  2. Click Create Overlay
  3. Enter a name for your overlay (e.g., "Main Overlay")
  4. Your overlay is created with a default canvas size of 1920x1080

Step 2: Add an Alert Box Widget​

  1. Click on your new overlay to open the Overlay Editor
  2. Click the Add Widget button
  3. Select Alert Box from the widget list
  4. Give it a name (e.g., "Alerts")

The Alert Box widget is where your stream triggers (follows, subs, cheers, etc.) will display. Position and resize it on the canvas where you want alerts to appear.

Step 3: Copy the OBS URL​

  1. Go back to the Overlay Manager
  2. Find your overlay in the list
  3. Click the Copy OBS URL button — the browser source URL is now on your clipboard

Step 4: Add to OBS Studio​

  1. Open OBS Studio
  2. In your scene, click + under Sources
  3. Select Browser
  4. Name the source (e.g., "Streamerly Overlay")
  5. Paste the URL you copied into the URL field
  6. Set the resolution to match your overlay (default: 1920x1080)
  7. Click OK

Your overlay is now live in OBS. Any alerts from your stream triggers will display through this browser source.

Tips​

  • One overlay, many widgets — You can add multiple widgets to a single overlay (alert box, text, images, goals, etc.)
  • Layer order matters — Widgets higher in the list render on top
  • Preview in the editor — The Overlay Editor shows a live preview of your widgets so you can position everything before going live

Available Widget Types​

When adding widgets, you can choose from several categories:

CategoryWidgets
CoreAlert Box, Image, Text, Colour
MediaYouTube, Animation
GroupsGroup, Animation Group, Custom Alert Group, Ad Group
InteractiveTreasure Trove, Super Cheers

For a full reference of all widgets, see the Overlay Editor documentation.

Next Step​

You're set up! Check out the next steps to explore the rest of what Streamerly can do.