Firebot to OBS

Adding Firebot As An Overlay in OBS

Firebot to OBS

 

In order for your Firebot images or video files to show up on your live stream, you need to link Firebot to OBS as a Browser Source. This the final step in my guide to get your Firebot overlays up and running. Make to check out the other guides to ensure you have all the other steps complete:

  1. Link Firebot to Mixer Developer Lab
  2. Create Buttons in Mixer Developer Lab and connect to Firebot
  3. Connect Firebot to OBS so it displays as an overlay in your stream.

 

  1. Open up Firebot and go to 'Settings'
  2. Click the 'Overlay' tab
  3. Click the 'Get Overlay Path' button.

firebot overlay settings

 

A window will pop up with your link to connect Firebot to OBS. Click the 'Copy' button and click 'Okay' to close this window.

Make note of the warning box at the bottom of the window. A lot of streamers run into this issue when OBS is opened before Firebot when going live. Try and get in the habit of opening Firebot first so the source is refreshed and ready to go in OBS. Otherwise you will have to manually refresh in OBS to get your graphics to appear.

firebot overlay info

 


 

Head over to OBS

  1. Select your Scene that you want to display the graphics. Or create one if you have yet to set this up. In my example, I am picking my sample - Xbox scene.
  2. Under the 'Sources' column, click the '+' sign to add a new source.
  3. Select 'BrowserSource' from the list.

 

 

Add Firebot source to OBS

 


 

  1. Give this source a name. In this example we will name it 'Firebot'.
  2. Click 'OK'

 

obs firebot browsersource

 


 

In the properties window:

  1. Paste the Firebot Overlay File Path that you copied from Firebot.
  2. Fill in your streaming resolution Width and Height as this overlay will encompass the entire screen. In our case I will use 1280x720 since I am streaming at 720P resolution.
  3. Click 'OK'.

 

obs firebot browsersource

 


 

You will now have a red outline on screen which represents your newly created Firebot overlay. If the red box does not fill the entire screen, click one of the red corners and drag to fill the entire screen. It is a good idea to now lock the window so you do not accidentally move the source. Click the lock icon next to your source name.

 

OBS firebot browsersource

 

You are all set! Firebot is now linked to OBS and your graphics are ready to be triggered and displayed in OBS and on your stream. You can now customize your Firebot buttons.

 

Spread the word
Posted in Guides and tagged , , , .

Leave a Reply