Skip to content
StreamerCatalyst Docs

Setting up a Live Gameplay Overlay

The Widgets module provides browser-source overlays for your streaming software, such as OBS or Streamlabs. You can use built-in native templates for quick setups or use the custom widget editor to write your own HTML, CSS, and JavaScript overlays.

This recipe walks you through a realistic end-to-end task: creating a “Gameplay” scene that combines an Alerts widget and a Chat display widget.

Prerequisites

  • A StreamerCatalyst account.
  • Access to the Widgets module (available on the Free tier and above). See Module access by tier for details.
  • Note that widget connections and asset storage are subject to limits based on your subscription. See the Tier comparison for more information.

Step 1: Create and configure your widgets

In this step, we will create the individual widget instances and configure their settings.

  1. Open Widgets in the dashboard sidebar.
  2. Click Add Widget.
  3. Configure the Alerts widget:
    • Select a native template for Alerts. This widget will automatically handle follow, sub, gift, cheer, and raid alerts with sound and animation.
    • Configure your preferred settings within the dashboard.
  4. Configure the Chat display widget:
    • Click Add Widget again.
    • Select the Chat display template to create a styled live chat overlay.
  5. Assign to a Scene: For both widgets, ensure you assign them to a new scene named Gameplay.

Step 2: Organize widgets into a Scene

Scenes allow you to group multiple widgets into a single named layout. Instead of adding every individual widget to your streaming software, you add one Scene URL that renders all widgets in that scene with the correct positions and sizes.

  1. Navigate to the Scenes section in the dashboard.
  2. Locate your Gameplay scene.
  3. Arrange the Alerts and Chat display widgets within the scene layout to ensure they are positioned correctly for your stream.

Step 3: Add the scene to your streaming software

Now that your layout is ready, you need to bring it into your broadcast.

  1. On the Gameplay scene page in the dashboard, copy the browser-source URL.
  2. Open your streaming software (e.g., OBS).
  3. In the Sources dock, click + and select Browser.
  4. Name your source (e.g., “StreamerCatalyst Overlay”) and paste the URL into the URL field.
  5. Set the width and height to match your stream’s resolution and click OK.

Pro-Tip: Real-time layout updates

One of the primary advantages of using Scenes is that they allow for seamless updates. If you want to change the position of your Chat display or adjust the size of your Alerts, simply update the layout in the StreamerCatalyst dashboard. Your streaming software will update the overlay automatically without you having to touch the browser source settings in your streaming software.