Using and Customizing the OBS Overlay

What is the OBS Overlay?

The OBS overlay is a compact progress bar for your next subscriber goal, designed to sit on top of your stream as a browser source. It has a transparent page background, so only the progress card is visible on your scene. It updates automatically as subs, gifted subs, and (if enabled) resubs come in.

Adding the Overlay to OBS

Make Your Dashboard Public

The overlay is only available for public dashboards. On your dashboard's edit page, check "Make this dashboard publicly viewable" and save.

Copy the OBS Browser Source URL

On the edit page, click the "Public URLs" button. Under "OBS Browser Source URL", click "Copy".

Add a Browser Source

In OBS (or Streamlabs Desktop), add a new Browser source to your scene and paste the copied URL into the URL field.

Set the Size

The recommended browser source size is:

  • Width: 800
  • Height: 120

Customizing the Overlay

Click the "Customize" button next to the OBS Browser Source URL (or go to Dashboards → Edit → Public URLs → Customize). Change any setting, then click "Save Changes". If you have your overlay open in OBS, it will pick up your changes the next time it refreshes (within about 30 seconds), or you can right-click the browser source in OBS and choose "Refresh". If your dashboard is public, the "Preview Overlay" button opens the overlay in a new browser tab.

Colors
  • Background Color: The color of the overlay card. Default is dark gray (#212529).
  • Font Color: The color of all text on the overlay. Default is white (#ffffff).
  • Font Outline: Adds an outline to the text so it stays readable over busy backgrounds. Turn on "Enable font outline" and pick an outline color (default is black).
  • Accent Color: Changes the color of the progress bar and the sub count badge. Turn on "Override accent color" and pick a color. When off, the standard blue is used.

Colors can be picked with the color picker or typed in as a 6-digit hex code, like #9146ff.

Border
  • Default: A standard thin border.
  • No border: Removes the border completely.
  • Custom color: Keeps the border and lets you choose its color.
Shape & Labels
  • Rounded corners: Uncheck for square edges.
  • Show "Powered by subgoal.gg" text: Shows or hides the small credit line in the bottom corner.
Content & Layout
  • Stretch to full browser width: By default the overlay card is 800px wide. This makes it fill the whole width of your browser source instead, which is handy for wide or ultrawide scenes.
  • Show sub count inline with goal title: Moves the "current / target" badge next to the goal title instead of on the right-hand side.
  • Center goal title: Centers the goal title in the overlay.
  • Show goal title on progress bar: Moves the goal title onto the progress bar itself and hides the percentage. With "Center goal title" on, the title stays centered on the whole bar; with it off, the title follows the filled portion of the bar as it grows.
  • Show progress bar: Turn off to show only the title and counts.
  • Show "subs to go!" text: Shows or hides the "X subs to go!" line.

What the Overlay Displays

  • The next goal that hasn't been reached yet, with your current sub count, its target, and a progress percentage.
  • Once every goal has been reached, it shows "All goals completed!"
  • If you haven't added any goals yet, it shows "No goals have been set yet."
  • The sub count shown follows the same rules as your dashboard: your baseline, bonus subs, bleed protection, resub counting, and count lock all apply. See Subscriber Count Settings.

Good to Know

  • The overlay refreshes automatically within moments of a new sub or gift, and also reloads itself every 30 seconds as a fallback.
  • Overlay customization is available on both Free and Pro accounts.
  • Only the dashboard owner can see the OBS URL and customize the overlay. Moderators with edit access can manage goals but can't change overlay styling.
  • Each dashboard has its own overlay URL and its own overlay settings.
  • If you turn off "Make this dashboard publicly viewable", the overlay URL stops working. If you turn it back on, you'll need to copy the new URL, because the old one will no longer work.