Open Broadcaster Software Open Broadcaster Software


We have created a walk-through to help you set up OBS(Open Broadcaster Software) with the built-in Tiltify overlay.


Topics Covered

  • Create a new browser source
  • Configure the URL field
  • Adjust the width to your stream width
  • Advanced customization



Walk-through

The following walk-through will help you set up OBS - Open Broadcaster Software.  We assume you already have installed OBS(https://obsproject.com/wiki/install-instructions).


OBS by default does not have a browser plugin installed, which is required to use the dashboard overlay.
You can find the most compatible browser plugin
 here.
After that is done installing, you must restart OBS if it was already open.


Step 1 - Create a new browser source


Open sources by clicking on the '+'.  Select BrowserSource.


If you do not see BrowserSource, make sure you downloaded the Browser plugin above and/or restart OBS to make sure it picks up the new plugin.








This should result in the following default window:



Step 3 - Change the URL field with the provided overlay URL


NOTE: THE URL YOU USE IS IN YOUR CAMPAIGN EDIT SCREEN ON THE TOP RIGHT and ADD overlay/dashboard to it.  The overlay WILL NOT work with the URL you see your campaign at due to our current update.


The url should be something like http://tiltify.com/@your-username/your-campaign/overlay/dashboard


http://tiltify.com/@your-username/your-campaign is the url of your campaign.


Step 4 - Change the URL field with the provided overlay URL


For 720p Streams set your width to 1280.
For 1080p streams set your width to 1920.  




Height should be no less than 70 to avoid issues. 


You can go larger/smaller depending on your ideal setup. Just note that the overlay is built for your maximum screen/stream width.


Step 5 - Click OK!


You should now see the overlay on your stream setup - It will automatically get donation data directly from your campaign!



Advanced Customization

Custom Skinning


OBS on windows allows you to edit CSS for the loaded dashboard. Below is a simple reference of the CSS you can change.

If you're tech-savvy enough, you can simply visit the url and check the inspector for other CSS you can modify to fit your needs


.dashboard-wrapper {
  background-color: #222; // For the main background color
  color: #FFF; // For main text
} 
.dashboard-wrapper .label {
  color: #CCC; // Change the lighter text label color
} 
.progress-bar-wrapper .progress-bar {
  background-color: #069; // Change the progress bar color
}  


Conclusion

OBS is a free and open source software for live streaming(https://obsproject.com/).  Following this simple walk-through you should be able to have a Tiltify overlay working on your stream in no time at all!   


If you feel like you have the experience and ability to create your own overlay please let us know what you create so we can share it with the community!