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
  • Input your Overlay URL
  • Browser Source Size/Settings
  • 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).


Step 1 - Create a new browser source


Create a new Source by clicking on the '+'. 

Select 'Browser' and name your source something you'll recognize :) (Ours is already made - Hence the "Add Existing")







Step 2 - Input your overlay URL


The URL should be something like http://tiltify.com/events/your-campaign/overlay/dashboard - it can be found under your Campaign Dashboard --> Overview --> Overlay


Step 3 - Browser Source Size/Settings


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 4 - 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!