Overlay made with React that shows a Tiltify campaign's donations, sorted by newest to oldest or by amount given descendingly. An article about the making of this application is provided here.
-
Get your campaign's id from the campaign's dashboard. This article describes exactly where it is.
-
Go to the account settings, then go to Your applications, create an application, enter its settings and get its access token from the section at the bottom.
-
Enter here.
-
Fill in the form with the campaign and the token, and select some options as you wish. When it's done, click Generate link.
-
Go to OBS and add a browser source, paste the link that was copied to your clipboard and set up the dimensions as you prefer. Make sure to remove the default custom CSS and not mark Shutdown source when not visible or Refresh browser when scene becomes active.
You may modify the overlay's look via CSS, either by entering it in the Custom CSS field of the browser source's config, or by modifying them directly in the source code.
A .donation is composed of its .donor and .amount-display, the last one wrapping the elements with classes .amount and .currency, which might have the appearance order swapped in order to accomodate for both dollars ($5.99) and euros (5.99€), thus it's not recommended to alter the order of .amount or .currency if your styles are going to be run with different currencies.
If you wish to modify the styles without using the custom CSS textarea (eg. you wish to create your own styles), you'll have to run the application locally. Install Node.js, copy this repository and start the application by typing npm start at a command line set on the folder this repository has been copied to. The styles are located at src/App.css.