When it comes to fundraising, having a visual element that displays how much money is raised is a critical key to success for any charitable event! Tiltify has developed 3 different overlays for you to choose from to take your fundraising game to the next level.


Topics covered

  • Finding Our Overlays
  • Adding Overlays To Your Livestream
  • Other Integrations to go even Further Beyond!


Finding Our Overlays

Before you can implement our overlays, you have to find where they are!



On the left-hand side of your Campaign Dashboard, you will see the Overlay tab - click it!



From here you will see our 3 different overlay options:

Compact Overlay: This overlay, designed by @twaz (thanks Twaz!) is typically placed in the top-center and stretches across 60% of the screen. This overlay contains the cause avatar and name, your progress bar, goal, amount raised, and highlights the last donor, next milestone, and the top donor. A great overlay solution if you want a lot of information in a minimal amount of space!


Original Tiltify Overlay: This overlay is placed at either the top or bottom of the screen and stretches the entire way across. It contains the charity avatar and name, your progress bar, goal, amount raised, and highlights the most recent and top donor interchangeable. The Original Overlay Solution for Tiltify - it still gets the job done :)


Tiltify Overlay 2.0: This overlay is placed at either the top or bottom of the screen and stretches the entire way across. It contains the charity avatar and name, your progress bar, goal, amount raised, and highlights the last donor, next milestone, and the top donor. This overlay is more experimental and you can use the Cause Colors and remove various details depending on your needs. We are open to feedback to continue improving this design - feel free to submit a ticket with your suggestions!


Adding Overlays To Your Livestream


No matter which one of the three overlays you choose, you will have to use a Browser/Webpage capture in order to use them! They all require the same settings - just a different link for each one - so follow these steps to make it happen!


For OBS:


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 - Choose Your Overlay



Choose one of the Overlay Links from Campaign Dashboard --> Overlay and paste it under URL:


Compact Overlay: The URL should look something like https://overlay.tiltify.com/@USERNAME/CAMPAIGN-NAME/overlay 


Original Overlay: The URL should look something like https://tiltify.com/events/CAMPAIGN-NAME/overlay/dashboard 


Overlay 2.0: The URL should look something like https://tiltify.com/@USERNAME/CAMPAIGN-NAME/overlay


For Width: Set it to the width of your livestream resolution (Most commonly: 1280 or 1920)

For Height: Set it to at least 70 to avoid any issues

Click "OK" and place the overlay at either the top or bottom of the screen (for the Compact Overlay, we recommend the top middle - for the Original or Overlay 2.0, they can go at either the top or bottom across the entire screen!)


For XSplit:


Step 1 - Create a Webpage URL source

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

Step 2 - Choose Your Overlay


Choose one of the Overlay Links from Campaign Dashboard --> Overlay and paste it under URL:


Compact Overlay: The URL should look something like https://overlay.tiltify.com/@USERNAME/CAMPAIGN-NAME/overlay 


Original Overlay: The URL should look something like https://tiltify.com/events/CAMPAIGN-NAME/overlay/dashboard 


Overlay 2.0: The URL should look something like https://tiltify.com/@USERNAME/CAMPAIGN-NAME/overlay


After pressing "OK" You will need to adjust the overlay. You can either:

  • Click and Drag the corner to stretch the overlay to fit the screen

  • Right Click the Overlay and change the custom resolution to
    • Width - The Width of your Livestream Resolution (Commonly 1920 or 1280)
    • Height - At least 70 to avoid any issues



Other Integrations to go even Further Beyond



While our overlays are great - there are other ways to take your charity fundraisers to the next level! To add a bit more pop to your fundraising efforts, make sure to check out our integrations with Streamlabs, StreamElements, and StreamJar to add pop-up notifications for whenever someone donates to your campaign! While our overlays do animate whenever donations are received, sometimes you need a little more POP to encourage those charitable contributions :)


In addition to their pop-up notifications, Streamlabs, StreamElements, and StreamJar all offer alternatives to our donation bar overlay as well - so if you have a particular brand or style you want to keep consistent within your channel, feel free to take a look at our support articles to learn how you can use their alternatives instead!


Conclusion


Adding a donation overlay to your livestream fundraiser is essential for encouraging monetary donations to your event! Make sure you include one of ours, or one of our Integrated Partners, to make the most out of your next fundraising livestream!