Integrate Live Chat Widget into OBS Studio

Adding a live chat overlay to your stream is one of the best ways to boost viewer engagement and make your broadcast look professional. This guide provides a direct, step-by-step walkthrough on how to integrate a third-party live chat widget—such as those from Streamlabs, StreamElements, or Restream—directly into OBS Studio. You will learn how to retrieve your unique widget URL, add it as a Browser Source in OBS, and customize its appearance for your live stream.

Step 1: Generate Your Chat Widget URL

Before opening OBS Studio, you must generate a unique widget URL from your preferred third-party streaming service.

  1. Log into your account on a third-party service like Streamlabs, StreamElements, or Restream.
  2. Navigate to the dashboard and locate the Widgets section.
  3. Select Chat Box or Live Chat.
  4. Customize the widget settings (such as theme, font size, and delay) to match your stream’s aesthetic.
  5. Click Copy next to the widget URL (often hidden behind a “Show” button for security). Keep this URL private, as it is unique to your account.

Step 2: Add a Browser Source in OBS Studio

Once you have copied the widget URL, you can embed it directly into your OBS Studio scene.

  1. Launch OBS Studio.
  2. Go to the Scenes dock and select the scene where you want the chat to appear.
  3. In the Sources dock, click the + (Add) icon.
  4. Select Browser from the drop-down menu.
  5. Name the source (e.g., “Live Chat Overlay”) and click OK.

Step 3: Configure the Browser Source Settings

A properties window will appear for your new Browser Source. Configure it using the following settings:

  1. URL: Delete the default OBS URL and paste the third-party chat widget URL you copied in Step 1.
  2. Width & Height: Set the dimensions of your chat box. Standard dimensions are 400 (Width) x 600 (Height), but you can adjust this based on your screen layout.
  3. Custom CSS: If you want to make the background transparent or apply custom fonts, you can paste CSS code here. Most third-party widgets handle transparency automatically.
  4. Click OK to save the settings.

Step 4: Position and Test the Chat Widget

The chat widget will now appear as a red-bordered box on your OBS canvas.

  1. Positioning: Click and drag the red box to place the chat overlay wherever you want it to appear on your screen.
  2. Resizing: Grab the corners of the box to scale the widget size up or down.
  3. Testing: Go to your streaming platform’s dashboard (such as Twitch, YouTube, or Kick) and type a test message in your chat. The message should appear in your OBS Studio canvas within a few seconds.