How to add a Browser Source to OBS Studio

Configure the overlay first, then copy its generated URL. In OBS, open the destination scene, select Add in the Sources panel, and choose Browser. Give the source a descriptive name such as Twitch Chat — Gameplay instead of Browser Source 3.

Paste the complete URL into the URL field. Do not remove query parameters: they hold details such as the channel, colors, alignment, and timer state. URLs that include an account identifier or token should be treated as private and excluded from screenshots or shared scene collections.

• Use a separate source for each independently positioned overlay.
• Keep the generated URL in a password manager or another private project record.
• Use the same source across scenes when you want its state to continue uninterrupted.

The Browser Source width and height define the page viewport, not merely the size of a crop. Start with the output canvas dimensions—1920 by 1080 for a standard full-HD scene or 1080 by 1920 for a vertical scene—when the overlay uses position controls. For a compact card or ticker, use a smaller viewport that matches the graphic.

After saving, transform the source in the preview. Scaling a large browser viewport down usually produces more predictable typography than starting with a tiny viewport and enlarging it. Hold Alt while dragging an edge to crop only after the overlay layout is correct.

Shutdown source when not visible saves resources, but it also closes the page. Reopening the scene reconnects chat, reloads API data, and may restart timers that are based on page load. Leave it disabled for overlays that must maintain a continuous connection or state.

Refresh browser when scene becomes active reloads the page every time the scene is selected. This is useful for a static announcement that must pick up a new URL, but harmful for a countdown, authenticated session, or real-time connection. Test scene transitions with Studio Mode before enabling either option.

A correct editor preview is not the final test. Start a short local recording using the same canvas, frame rate, and encoder settings as the real broadcast. Trigger the longest chat message, largest count, timer end state, and any alert audio. Review the recording at normal size on a phone and desktop monitor.

If a change does not appear, open the source properties and choose Refresh cache of current page. If the page is still stale, confirm that OBS contains the latest generated URL before deleting and rebuilding the source.

• Check text against bright and dark scenes.
• Confirm private configuration values are not visible.
• Monitor CPU and missed frames with all browser sources active.