We have created a walk-through to help you set up your XSplit Broadcaster Software with the built-in Tiltify overlay.


Topics Covered

  • Create a Webpage URL source
  • Configure the Webpage URL source (resize, position, etc.)
  • Advanced Customization


Walk-through

The following walk-through will help you set up our built-in Tiltify overlay in XSplit. We assume that you have already installed XSplit and are ready to add to an existing scene.


Step 1 - Create a Webpage URL source

On the scene you wish to add our overlay to, click on "Add source" --> "Webpage..." in the bottom left-hand corner of XSplit

Step 2 - Find and Insert your Overlay URL

The Overlay URL for your campaign should look something like http://tiltify.com/events/your-campaign/overlay/dashboard. You can either manually change these fields to get the correct URL or...

Step 2.5 - Find your Overlay URL via the Campaign Dashboard

In the bottom left-hand corner of your campaign dashboard "Campaign Details" page, there is a "Tiltify Overlay" hyperlink. Clicking this will take you to your overlay URL. Copy and paste that into the Webpage URL window and click OK.Step 3 - Configure your Webpage URL Source

Once added, your XSplit should look something like this:

You probably want to make some changes to your newly added Webpage URL source. Our built-in Tiltify Overlay is designed to be placed at either the top or bottom of the screen. To properly fit the source, you can either:

  • Drag the corner to fit the source to the entire screen - and then position it either in the top (by default) or bottom (which requires a bit more movement work).
  • Right click on the Webpage URL source (or click "Settings" in the bottom middle of the screen when the Webpage URL source is selected) and change the resolution of the source

  • 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 also keep it at 720/1080 and position accordingly, but changing the height can help with precise placement


Once resized, your XSplit should look something like this! Whether you place it at the top or bottom, you are now ready to start your fundraising!


Please keep in mind that our built-in Tiltify overlay does not come with pop-up or sound notifications for donations. If you would like to have those tools, please refer to our integrations with Streamlabs or StreamElements.


Advanced Customization: Custom Skinning

XSplit allows you to edit the CSS for the loaded dashboard on the source settings window. Below is a reference of the CSS you can change.


If you are 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


Our built-in overlay is a great start for any fundraiser to have - but there are other options for you to use to really enhance your fundraising game! Make sure to check out all of our integration articles here to see the latest tools that are available to you!