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! Sometimes, you may not know exactly how to start designing. Luckily, Tiltify has a simplified overlay that will get you out of edit mode and into fundraising mode!


TABLE OF CONTENTS



Finding Overlays

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



In an individual campaign, on the left-hand side of your Campaign Dashboard, you will see the Overlay tab - click it! If you are in a team campaign, it will be in the Branding section of your Team Campaign dashboard. From here you create an overlay from the Default Template and customize it however you like!



The Default

There are 4 main elements that are pre-loaded into the overlay:

1. Classic Overlay – This overlay is placed defaulted to the top of the screen and stretches the entire way across. It contains the charity avatar and name, your progress bar, goal, the amount raised, and highlights the most recent and top donor interchangeable. You can edit different aspects of this, such as color and font by clicking “Classic Overlay” on the left.

2. QR Code – This is a scannable QR code that is placed in the bottom left corner of the overlay. When people scan it, it will take them to the donation page of your campaign. The code can be moved and resized.

3. Alert Box – This is an alert box that will populate donations as they appear. You can add gifs via the Giphy search box. It can also be set to trigger at the thresholds you specify. *Note: Test Donations will NOT appear on your Broadcast Software, only during design/editing within Tiltify.

4. Event List – This will display the most recent donations that have been made towards your campaign. It can be configured as to how many events to display (default: 4)


Adding Overlays To Your Livestream


Once you have it to your liking, you will have to use a Browser/Webpage capture in order to use them! Getting it ready to go is a simple as the click of a button!


1. You can rename your overlay if you have made any edits to it. 

2. If you make any changes to the overlay, you will click “save changes” to save them. 

3. This will reflect on the live overlay when updated. If you want to run a test while editing, click the “test donation” button. Make sure those changes are as awesome as you want them to be!
 
4. When you’re satisfied and it’s saved, click the “copy overlay url” and, using your favorite streaming software, put the overlay as a browser source.



For OBS:


Create A New Browser Source


1. Create a new Source by clicking on the '+'.  
2. Select 'Browser' and name your source something you'll recognize. 
3. Click "OK" put copied URL in the URL bar. If needed, make the dimensions 1920 x 1080.




For XSplit:


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. The URL will be the one you copied.




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)         Height - At least 1080 to avoid any issues


Other Integrations...


The Tiltify overlay now houses what you would gain from using other integrations, so this is your one-stop shop for your Tiltify needs!

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 to make the most out of your next fundraising livestream!


Want to find other people fundraising with Tiltify? Head over to our official Discord!


Need to start your fundraising journey? Head to Tiltify.com to create your first campaign and support the cause you care about today!