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 different overlays for you to choose from to take your fundraising game to the next level, from gotta go fast to transmog is the true end-game.


TABLE OF CONTENTS


Finding Overlays

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


On the left-hand side of your Campaign Dashboard, you’ll find the Branding tab. From there, you can create an overlay using the Default Template and customize it however you like!


The Default

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

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.

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.

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.

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)


You can further customize The Default overlay with additional widgets!


Additional Options

Once you create a new Overlay by selecting the Blank Slate option, you can get started by clicking Add Widget.


Our custom overlays have many options for you to tailor the overlay for your live stream campaign. Depending on which widget you are customizing, you'll have the ability to change the Colors, Font, Position, Animation, Donation Threshold, Alignment, and Gif.


You have many goal progress bar options to choose from:


BETA 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, the amount raised, and highlights the last donor, next milestone, and the top donor in scrolling text. This overlay is more experimental and you can use the Cause Colors and remove various details depending on your needs.

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.

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, the amount raised, and highlights the last donor, next milestone(only shows when you are within 10% of reaching the milestone), and the top donor. A great overlay solution if you want a lot of information in a minimal amount of space!

DYNAMIC TEXT

This gives you the option to have either your Personal Total, Personal Goal, Fundraising Event Total, Fundraising Event Goal, or Next Milestone display on your overlay.

PROGRESS BAR

A clean, streamlined progress bar that also shows any milestones.

CUSTOM PROGRESS BAR

This progress bar can be vertical, horizontal, or even a circle! It displays your progress towards your goal with no text. Works well with the Dynamic Text option.

THROWBACK PROGRESS BAR ONE / THROWBACK PROGRESS BAR TWO

Choose between two of our throwback progress bars and watch Tilty take flight as you progress towards your goal!



You also can add other widgets to enhance your overlay:


REWARDS LIST 

With the event list, you can show your viewers the rewards you have redeemable on your campaign. It can even list how many you have remaining if there is a limited quantity. No more guessing for your viewers how many temporary tattoos they can put on your face during the stream!

HEAD TO HEAD POLL

The head to head poll will display how a two-answer poll is doing. The time it is present and the frequency it appears can be changed (default 15 sec. visual/2 mins delay. All times are in seconds.) See the tug-of-war to determine if a hot dog is a sandwich!

POLL

You will use this when you want to display a multi-answer poll. Viewers can see the clash that is happening with all the answers. Maybe someone will pull for that underdog choice! The time it is present and the frequency it appears can be changed (default 15 sec. visual/2 mins delay. All times are in seconds.)

SINGLE REWARD

If you want to highlight just one reward, this is the way to go! Have the picture displayed along with the quantity of the reward. Highlight that wall of post-it notes people can fill! The time it is present and the frequency it appears can be changed (default 15 sec. visual/2 mins delay. All times are in seconds.)

TARGET

You can use this option to display the progress towards a Target. You will be able to choose which Target to display from a dropdown and can customize how often and for how long it displays on your screen.

CAUSE LOGO

The logo of the nonprofit/charity organization you’re fundraising for.

CAUSE NAME

The name of the nonprofit/charity organization you’re fundraising for.


Adding Overlays To Your Livestream

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


FOR OBS

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

1. On the scene you wish to add the overlay to, click on Add Souce > Webpage at the bottom left-hand corner of XSplit.

2. 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 live stream 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 live stream!


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!