XSplit Broadcaster

XSplit Broadcaster shows your elements with a Webpage source: a source that displays a web page, here a small file the app keeps on your PC. The app gives you the file and the steps, and it takes about a minute.

XSplit is Windows only

XSplit Broadcaster runs on Windows only. On your computer, use OBS Studio: the app adds elements to it for you.

Note

Menu names in XSplit Broadcaster can differ slightly between versions. If a name doesn’t match exactly, look for the closest one.

Open the XSplit guide in the app

Already picked Something else when you first opened Stream UI Fun Studio? Skip to step 3.

1. Click your channel name at the top right of the app. If you haven’t set up your channel yet, it says Set up your channel. The Your channel panel opens.

   

2. Scroll down to What do you stream with?, click Something else, then click Save. You only do this once: the app remembers it.

   

   OBS Studio is picked in this picture. Click Something else instead.

3. In Elements, click the element you want. It opens in the editor, where you can customize it first.

4. Click Add to my stream (1), at the bottom right of the editor.

   

5. The Add it to your stream window opens on Streamlabs Desktop, the first app in the list. That’s normal: it does this every time. In the list of apps on the left (1), click XSplit Broadcaster.

   

Use OBS Studio too?

OBS Studio stays at the top of the list. Its Set it up automatically button still adds elements to OBS for you.

Copy the path and note the size

The top of the guide shows The file for a browser source (Local file):

• Click Copy path (1). The button says Copied for a moment, and the path is ready to paste.
• Note the size (2), shown next to Show in folder, for example Size 1000 × 340. You’ll type it into XSplit in a moment.

Each element has its own path and size. This one is YouTube Subscribe Bar.

Keep this window open while you work in XSplit, so you can check the steps and the size.

Add it in XSplit Broadcaster

These are the app’s four steps, with a little more detail.

1. In XSplit Broadcaster, pick the scene you want the element in. Click Add Source (under the list of sources) and choose Webpage.

2. XSplit asks for an address. Press Ctrl + V to paste the path you copied as the address, then confirm. The path ends in index.html.

3. Right-click the new source and open its properties. Find the resolution setting, choose Custom resolution, and type the size shown in the app (for example 1000 and 340).

4. Move the source into place on your scene. Drag its corners to make it bigger or smaller.

The element plays once as soon as the source loads, so you may just catch it sliding in and out. That’s a good sign: it works.

The file has everything the element needs, so Stream UI Fun Studio doesn’t have to be open while you stream. Open it when you want to change the element, and it updates the file for you.

Leave the file where it is

Don’t move, rename or delete the file or its folder. XSplit reads the element from there, and the app updates it there when you make changes.

Full-screen elements

Elements that are 1920 × 1080, like YouTube Channel Intro and YouTube End Screen, cover the whole scene on a 1920 × 1080 canvas. Use 1920 × 1080 as the custom resolution.

How it plays in XSplit

• It plays once each time the source loads: when you add it, when XSplit Broadcaster starts, and when you refresh or reload the source.
• Between plays, the source is see-through. After the animation it disappears, so an “empty” source is normal. Elements that stay on screen, like Socials Bar, animate in and then stay.
• There’s no repeat timer here. Play it again every and Play when the scene becomes visible are options of the automatic Add to OBS dialog, which only works with OBS Studio. The XSplit guide doesn’t set them.
• Also added it to OBS with the app? Then OBS and XSplit use the same file, so a Play it again every time you picked in Add to OBS repeats the element in XSplit too. To keep them apart, add a copy to XSplit instead. Make the copy before you add the element to OBS: a copy starts with the play settings of the element it’s made from.
• It doesn’t react to follows or subs. Free elements are animations you play on cue, not alerts. How elements play explains this in more detail.

To play it again, reload the source. Look in the source’s right-click menu or its properties for a refresh or reload option. If your version has an option to refresh the page when the scene loads, turning it on makes the element play each time you switch to that scene.

Update it after you change something

You don’t need to copy the path again. When you change the element (or your channel name or picture), the app updates the file at the same path within a couple of seconds. XSplit keeps showing the old version until the source reloads:

1. Make your changes in the app’s editor.

2. In XSplit Broadcaster, refresh or reload the source (right-click menu or properties). Restarting XSplit works too.

3. The element plays again with your changes.

Caution

Reloading plays the element. If you reload while you’re live and the source is in your live scene, your viewers see it play.

Want two versions of the same element, like a Light one and a Dark one? Make a copy. Each copy has its own path, so you can add both.

Test it before you go live

1. In XSplit Broadcaster, switch to the scene with the element.

2. Reload the source (look in its right-click menu or properties for a refresh or reload option). Watch the element play once.

3. Check that it’s the right size and in the right spot.

Happy with it? Don’t reload the source again while that scene is live.

If something looks wrong

• The source stays empty. It probably already played. Reload the source and watch it.
• XSplit shows a blank page or an error. Check that you pasted the whole path and that it ends in index.html.
• It’s cut off or the wrong size. Set the custom resolution to exactly the size shown in the guide.
• Copy path didn’t work. The app says “Couldn’t copy. Select the text and press Ctrl+C instead.” Click in the path box, press Ctrl + ACmd + A, then Ctrl + CCmd + C.

More fixes are in Troubleshooting.

Next steps

How elements playWhen an element plays, and when it doesn't.

Test your elementsMore checks, mostly for OBS.

Customize an elementChange the text, colors and pictures.

Pick your streaming appGuides for the other apps.