Add to OBS by hand

You can add any element to OBS yourself as a browser source (a source that shows a web page) by pasting one file path. If OBS runs on a different computer, use the HTML folder instead: see OBS on a second PC.

When to add it by hand

• You’d rather not turn on OBS’s WebSocket server.
• The automatic way won’t connect, and you want to get going.
• OBS runs on another computer. Go to OBS on a second PC.

Otherwise, the automatic way is easier: it keeps OBS up to date when you change the element, and gives you the play options.

Open the steps in the app

There are two ways in:

• Open the element, click Add to my stream, then click Add it manually at the bottom of the Add to OBS window. It’s there in almost every view, even while the app can’t connect to OBS.
• If Add to my stream opens the Add it to your stream guides instead (it does when What do you stream with? is Streamlabs or Something else), click OBS Studio on the left. The same file and steps are under Or do it yourself.

The Add it to OBS yourself window shows the file, its size and the steps:

Add the browser source in OBS

1. In the app, click Copy path. It says Copied for a moment. Note the size next to Show in folder, for example Size 1000 × 340.

2. In OBS, click + under Sources and choose Browser.

3. Name it (for example after the element) and click OK.

4. Tick Local file and click Browse. In the window that opens, paste the path into the File name boxpress Cmd + Shift + G, paste the path with Cmd + V and press Returnpress Ctrl + L and paste the path with Ctrl + V and click Open. The path ends in index.html.

5. Set Width and Height to the size shown in the app. If you picked a sound for the element, also tick Control audio via OBS, so its sound goes through OBS and you can set its volume in the Audio Mixer. Then click OK.

6. Full-screen elements (1920 × 1080): right-click the source, then Transform → Fit to screen.

7. Drag the source where you want it in your scene.

Tip

• If copying doesn’t work, the app says “Couldn’t copy. Select the text and press Ctrl+C instead.” Click the path box (that selects the whole path) and press Ctrl + CCmd + C.
• Show in folder opens the folder that holds index.html, if you’d rather find it yourself.

How a hand-added source behaves

	Added by hand	Added automatically
When you change the element	The app updates the file, but OBS doesn’t reload it by itself. Refresh it in OBS (see below).	OBS updates by itself.
When it plays	When it loads: when OBS starts, and when you refresh it.	When it loads, plus Play it again every, Play when the scene becomes visible and Play now.
In OBS badge in the app	No: the app doesn’t keep track of sources you add yourself.	Yes.

To see your changes in OBS, double-click the source to open its properties and click Refresh cache of current page. The element reloads and plays.

Keep the file where it is: it lives in the app’s own folder, and the source reads it from there.

Make a hand-added source play on cue

Like every free element, it won’t play by itself when someone follows or subscribes. But a reload plays the element, and OBS’s browser source can reload by itself. In its properties, tick:

• Refresh browser when scene becomes active to play it each time you switch to its scene.
• Shutdown source when not visible to play it each time you show the source, for example with a hotkey.

These are OBS’s own options, so their names can change between OBS versions.

OBS on a second PC

Lots of streamers play on one computer and stream from another. The automatic way and Add it manually both need OBS on the same computer as the app, because the file path points at this computer. Instead, save the element as an HTML folder and copy it to your streaming PC.

1. Open the element in the app and customize it.

2. Click More formats under Add to my stream (for live widgets from packs, Get the files).

3. Choose HTML folder: “The element as a web page folder, for OBS on another PC or advanced setups.”

   

   Click HTML folder (bottom left). The button at the bottom then changes from Save video to Save folder.

4. Click Save folder and pick where to save it, such as a USB stick or a shared network folder. The app makes a new folder there, named after the element and your channel, like YouTube Subscribe Bar - Nova Byte. A message says Folder saved. with a Show in folder button.

5. Copy that whole folder to the streaming PC. Put it somewhere it can stay.

6. On the streaming PC, in OBS, click + under Sources, choose Browser, name it and click OK.

7. Tick Local file, click Browse and choose index.html inside the folder.

8. Set Width and Height to the element’s size. The folder’s README.txt file tells you the size, for example “Set the width to 1000 and the height to 340.” If the element has a sound, also tick Control audio via OBS. Click OK.

Inside the folder you’ll find index.html (the page OBS shows), README.txt (the size and these steps) and the files the element needs. Keep them all together. The same folder also works in Streamlabs Desktop, XSplit Broadcaster, PRISM Live Studio and Meld Studio on the other PC, as a browser source pointing at index.html.

The HTML folder doesn’t update

The folder is a snapshot of the element as it was when you saved it. After you change the element or your channel:

1. Save the folder again and copy it to the streaming PC.
2. If the old folder is still in the place you save to, the new folder’s name ends in (2): the app never overwrites the old one. On the streaming PC, delete the old folder and rename the new one to the old name, so the source finds it. Or point the source’s Local file at the new folder’s index.html.
3. Refresh the source in OBS: Refresh cache of current page in its properties.

An element in an HTML folder plays when it loads. The tip above about OBS’s reload options works for it too.

Next steps

Add to OBS StudioThe automatic way, when OBS is on this computer.

Choose a formatEverything in More formats, from videos to the HTML folder.

How elements playWhen an element plays on stream, and how to choose.

Hotkeys and Stream DeckPlay elements on cue with a key or a button.