Wirecast Dashboard Guide

To use the new dashboard overlay, you must be using either XSplit Broadcaster, Wirecast, or Open Broadcaster Software (OBS) - Studio. (Older versions of OBS may be used, but will not be covered in this guide)

Wirecast Software Setup

Note: Please remember to select transparent background and have it positioned correctly in the layer hierarchy for your desired display.

STEP 1: To get started add a new ‘Web Display’ layer to your shot


STEP 2: By Default, you should see the following 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/events/your-campaign/overlay/dashboard

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


STEP 4: Change the width to your stream width

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 Transparent Background! & Click OK, Thats it!~

 

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



Advanced Customization

Custom Skinning

Wirecast 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

}

 


Feedback and Knowledge Base