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


The following walk-through will help you set up OBS - Open Broadcaster Software.  We assume you already have installed OBS(

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


OBS is a free and open source software for live streaming(  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!