A widget reaches your scene through a webpage source: OBS Studio calls it Browser Source, while XSplit Broadcaster calls it Webpage. Choose the source that matches how the widget is supplied, then set its viewing area and position it above or below the other scene elements as needed.
The steps are similar, but the menus and a few controls differ. This guide covers hosted URLs and local pages, sizing and layer order, and what to check when the source appears blank or stale. A widget being added to a scene does not by itself mean its account connection or provider settings are complete.
Choose a widget URL or built-in source
First find out how the widget provider expects you to add its content. A hosted overlay or alert page usually comes with a URL, sometimes labelled “Overlay URL”, “Widget URL” or “Alert URL”. Copy the URL from the provider’s setup page; it may be specific to your account or to one particular widget. Treat it as private if the provider says it grants access to a personalised overlay, and avoid sharing it publicly.
For that kind of URL, use OBS Browser Source or XSplit Webpage. The source displays the webpage inside the scene rather than opening it as a separate browser window. OBS’s alert tutorial documents this route for provider overlays, including examples such as Streamlabs and StreamElements. You do not need to assume that either streaming application contains every third-party widget as a native feature: availability and setup belong to the relevant provider.
There is a second route in XSplit. Its source menu documents platform-specific widget categories, and some supported widgets can be installed through the Plugin Store. The Twitch widget guide, for example, describes installing Twitch widgets there rather than treating them as pre-installed. Check the current menu and the instructions for the widget you want; a source category appearing in documentation does not establish that every platform or widget is available in your installation.
| What you have | OBS Studio route | XSplit Broadcaster route |
|---|---|---|
| A provider-supplied webpage URL | Add a Browser source and enter the URL | Add Source > Webpage and enter the URL |
| A saved webpage file | Enable the local-file option in Browser properties | Browse to the locally saved webpage in Webpage settings |
| A supported platform widget | Follow the provider’s documented method; a URL can use Browser Source | Check Add Source and the Plugin Store for an available built-in widget |
A built-in widget may include a connection or authorisation step that a plain webpage source does not. Conversely, a provider URL may offer controls or appearance options that are not part of an application’s built-in widget menu. Decide based on the widget’s documented delivery method rather than choosing the word “widget” in a menu at random.
If you are building an always-on channel, keep the graphic functional: for example, use a small label for the programme currently playing rather than covering a bhajan image or a rain scene with a large panel. For background on those formats, see running a rain and river sounds stream and streaming Indian flute and nature sounds. The widget is only one element in the scene, so leave room for the video and any information viewers need to read.
Add a Browser Source in OBS
Open OBS and select the scene that should contain the widget. If you have several scenes, check the selected scene name before creating the source: adding it to a “Starting soon” scene will not automatically add it to a separate continuous-play scene. The OBS sources guide explains that a scene is assembled from sources, which can be arranged and transformed in the preview.
In the Sources dock, select the plus button and choose Browser. Give the source a useful name, such as “Chat overlay” or “Now playing label”. A meaningful name makes it easier to find later, particularly if the scene already contains a background, logo, and several text or media sources. Confirm the prompt to create the source, then open its properties.
Paste the provider’s widget URL in the URL field. If the provider supplies separate URLs for separate widgets, use the one for the item you are adding. Do not substitute the provider’s dashboard address unless its instructions explicitly say to use that address; a dashboard and an overlay page serve different purposes.
Set the source width and height to suit the intended display area, then apply the properties. These values describe the Browser Source’s webpage viewport, not a universal canvas size for every stream or widget. The OBS Browser Source documentation lists 800 by 600 pixels as its default viewport, but that is a default, not a recommended size for every overlay. A narrow alert strip and a square chat panel need different proportions.
Once the source is in the scene, use the preview to position and resize it. For more exact placement, right-click the source and use Edit Transform. If the provider gives a recommended widget size, use that as a starting point, then check how it fits the actual scene. A widget can be technically loaded but clipped because the source bounds are too small, or appear tiny because the source bounds are much larger than the visible content.
Load a URL or local page in OBS
The same Browser Source can display a hosted page or a local webpage file. For a hosted widget, leave the local-file option off and enter the URL supplied by the provider. That keeps the source pointed at the online overlay page, where the provider may update the content or read the settings associated with your account.
If you have a locally saved page, open the Browser Source properties and enable Local file, then select the page file. Use this for a page you control or a widget package whose instructions explicitly support local use. A local page may depend on other files, scripts, fonts, or resources in the same folder; moving just the HTML file can break those paths. Follow the package’s own directions and test the page before relying on it in a live scene.
After changing the URL, file selection, or dimensions, apply the properties and inspect the preview. If the page has loaded but still shows old content, the Browser Source properties include a control to refresh the current page’s cache. Refreshing is a sensible check after changing a provider’s overlay, but it will not fix a wrong URL, a missing provider setup, or a page that requires a sign-in which the source cannot complete.
The OBS Browser Source reference covers the URL and local-file options. The alert setup tutorial also describes the provider-URL workflow. Because third-party dashboards and interfaces change, use the current instructions from the widget provider when a button or setting has moved.
For a channel that runs for long periods, remember that a Browser Source is a scene element, not a replacement for the video or audio that carries the programme. If the underlying loop needs maintenance, a guide on updating videos in an FFmpeg playlist without stopping the stream addresses a separate part of the setup. Keep the widget source and the continuous playback workflow distinct when diagnosing problems.
Add a Webpage source in XSplit
Select the XSplit scene or layout where the widget belongs. Choose Add Source > Webpage, enter the widget URL, and confirm. XSplit’s Webpage source instructions describe using a URL or browsing to a locally saved webpage.
If using a URL, enter the overlay page supplied by the provider, not a general account page unless that is what the widget instructions specify. If using a local page, browse to the saved webpage and check that its related assets remain available in the expected locations. As in OBS, a webpage source can load while still showing the wrong thing if the address or file is not the actual widget page.
XSplit’s Webpage settings include display options such as screen area, transparency and scrollbar visibility. Adjust only what the widget needs. For example, if a webpage has a background but the overlay should sit over video, transparency may matter; if the page is intended as a complete panel, hiding its background could make text difficult to read. The preview is the place to judge the result against your scene rather than relying on the property labels alone.
XSplit also documents a 60 FPS option for Webpage sources, while noting that it needs more CPU/GPU resources. Do not turn it on simply because a widget is present. For a mostly static label or alert panel, the extra update rate may not contribute meaningfully to what viewers see. If you are testing an animated widget and considering the setting, compare the preview and overall system behaviour before leaving it enabled. This is a trade-off, not a universal performance benchmark.
For supported platform widgets, inspect Add Source and the Plugin Store. The XSplit sources menu guide describes platform-specific widget categories, and its Twitch widget instructions explain that those widgets need to be installed through the Plugin Store. Availability can change, so check the current application and current documentation before planning a scene around a particular widget.
Set the widget size and position
Sizing has two parts: the dimensions of the webpage area and the size and position of the source on the scene canvas. In OBS, the Browser Source width and height set the page viewport; you can then resize and position the source in the preview or use Edit Transform for precise placement. In XSplit, arrange and resize the Webpage source on the stage. Neither product has one set of dimensions that fits every widget, aspect ratio, or scene.
Start with the provider’s recommended dimensions if it supplies them. Otherwise, decide how much of the scene the widget needs, then adjust its bounds. For example, a chat box may need a tall, narrow area, while a small alert may occupy a compact region near a corner. These are layout choices, not universal presets. Check the content at the scale viewers will see it, and make sure the edge of the source is not cutting off text, animation, or controls.
Keep important information within a comfortable margin from the edge of the overall scene. A widget placed flush against a canvas edge may be hard to read on a different screen or crop. Leave clear space around titles and logos, and do not cover the subject of a looping video. A label that looks tidy over a plain background may obscure a face, a deity image, or subtitles once the actual footage is playing.
If a widget appears to have too much empty space, the page itself may include margins or a transparent area. Resizing the source can change the scale, but it may not remove internal spacing set by the provider. Look for a layout or size option in the widget’s own settings before repeatedly changing the scene transform. When the visible panel is cropped, increase the viewport or source bounds and check whether the provider page itself is being cut off.
Test both the normal scene and any alternate scenes where the widget should appear. OBS sources belong to scenes, and a source added to one scene is not automatically present in every other scene. XSplit likewise arranges sources within layouts. If your stream transitions between a title scene and a programme scene, decide whether the widget should persist in both and add or arrange it accordingly.
Arrange source layer order
Position answers where a source sits on the canvas; layer order answers what covers what. In OBS, a source higher in the Sources list appears above sources lower in the list. Put a widget above the video if it should overlay the video, but below a frame or foreground element if that element should remain in front. The OBS sources guide documents source ordering and positioning.
A practical check is to move the widget temporarily above the other sources and watch whether it becomes visible. Then place it at the intended layer. If it disappears behind an opaque background, it may be loaded correctly but hidden by the source order. If it covers a logo or an important line of text, move it beneath that element or adjust its position. Layer order and canvas position work together; correcting only one may not solve the scene.
In XSplit, arrange the source on the stage so it sits in front of the content it should overlay. The application’s getting-started guide covers adding, resizing and arranging sources on the canvas. Use the stage preview to confirm the result after changing the order. The exact controls differ from OBS, so do not assume that the OBS Sources list instructions map one-to-one to XSplit’s interface.
Think through the intended stack before adding several overlays. A simple arrangement might put the video at the back, a widget above it, and a logo or border above the widget. If the widget has an opaque background, it can hide anything beneath its rectangle regardless of whether those sources are still enabled. Transparency and source order are separate properties: one controls what the page draws, while the other controls what is drawn in front.
Preview the scene and troubleshoot display
Preview the scene before going live. Check that the widget content is current, readable, and positioned where expected; then inspect the scene with the actual background video rather than a blank canvas. An alert that looks visible over black may blend into bright footage, and a chat panel may become difficult to read over a busy image. If possible, preview any animation or changing content that matters to the scene.
If the source is blank, work through the simple causes first. Confirm that you selected the right scene and source, that the URL is the widget URL rather than a dashboard, and that the provider has completed any required setup. For a local page, verify the selected file and its supporting assets. Then check the source’s bounds and layer order. A correctly loaded page can still be off-canvas, clipped, or behind an opaque source.
If an OBS Browser Source displays old content, use its cache refresh control and check the provider’s page again. If XSplit’s Webpage source has a visible scrollbar or unwanted page background, review its display settings. If the content is clipped in either application, adjust the source area and inspect the provider’s own layout settings before assuming the scene transform is at fault.
If a platform-specific XSplit widget does not appear in the source menu, check whether it needs to be installed through the Plugin Store and whether it is supported in the current version. If an alert or chat widget is present but does not show the expected account data, revisit the provider’s authorisation and connection instructions. A generic webpage source and a platform-specific widget do not necessarily use the same account connection process.
For a 24/7 broadcast, a scene can look right during setup and still need attention after changes to a provider page or a local asset. Keep a short record of the URL or file used, the scene name and the intended layer order. If the stream itself stops overnight, that is a different fault from a widget rendering incorrectly; the overnight stream troubleshooting guide covers causes of a stopped stream rather than webpage display issues.
Before committing, compare the operating options on the pricing page. When the file and channel are ready, start free — 24-hour trial, no card.
FAQ
Is Browser Source the same as a widget in OBS?
Browser Source is OBS’s way to display a webpage in a scene; a provider may use that page to deliver an alert, chat box or other widget. OBS does not thereby provide every third-party widget natively, so follow the provider’s instructions for the URL and any account setup.
Can I use a local webpage instead of a URL?
Yes. OBS Browser Source supports a local-file option, and XSplit Webpage can browse to a locally saved webpage. Keep any related files and resources in the locations the page expects, then check the preview for missing content.
Why is my widget behind the video or other graphics?
The source order may place it underneath an opaque source, or the widget may be positioned outside the visible area. In OBS, move it higher in the Sources list if it should overlay the video; in XSplit, arrange it on the stage and check the preview.
Should I enable 60 FPS for an XSplit webpage?
Only consider it if the widget’s motion needs it and your system can accommodate the additional CPU/GPU resources XSplit notes. For a mostly static label or panel, test the normal display first rather than enabling a higher update rate by default.