Ko-fi Stream Alerts are here!
Unlike other services, Ko-fi lets you receive donations directly from your viewers with 0% platform fees. Display your Ko-fi link and crowdfunding goal on your overlay and create custom alerts when you receive a donation.
It works with most broadcasting software that supports 'browser alerts' so you can make money on Ko-fi while you stream on Twitch, Facebook or YouTube!
Add your goal so supporters can see their contribution during the stream.
Setting Up Ko-fi Stream Alerts
To get started head over to Stream Alerts settings, from there it's just 3 quick steps:
- Customize your Stream Alerts until you are happy with the look and displayed message.
- Copy the link to paste into your broadcasting software e.g. OBS
- Check it's working by sending a test alert.
Designing Your Stream Alert
From the Stream Alert settings page, you can control how your alerts look, sound, and even how long they stay on screen!
- This is the Preview of what your Stream Alert will look like, refer to this preview to see your changes.
- Select a call-to-action to be displayed with your Ko-fi link, such as "donate at" ko-fi.com/creator. You can also choose no call-to-action so only your Ko-fi link is on display.
- Choose the message that displays when you receive a donation.
Write your own alert text and add donation info such as: {from_name} displays the Supporter name, {amount} shows the value of the donation, {message} displays the messages left by the supporter. - Choose how long the alert stays on your stream.
- Pick a color for your Ko-fi link and Stream Alert.
- Control the opacity of the background lozenge so the call to action and alerts match your overlay.
- Add custom sounds that play when you receive a donation during your stream. If you want to change back to the default sound, you can always remove your custom sound by clicking "Use default sound".
How to Set up Ko-fi Stream Alerts for OBS
We are using OBS as an example but the process for most streaming software like Streamlabs works in the same way.
Download the latest OBS Software and create a new scene by clicking the + in the "Scenes" pane on the bottom left of the screen.
Then in the "Sources" pane click + to add a new source and make the source 'Browser', you might need the latest version of OBS or a plugin from OBS for Browser to be an option.
Give the source a name like... Ko-fi
Paste in the URL from your Stream Alerts settings page and click OK.
Audio Tip
Tick the "Control audio via OBS" option to add a separate track to the Audio Mixer for more control over your Stream Alerts' volume.
Your Ko-fi URL will now be displayed in your scene, you can place it anywhere you like, just make sure that the red frame is completely visible in your scene so the Stream Alert can be properly displayed.
Send a test alert from the Stream Alerts settings page to make sure it's working and boom, you did it!
How to Set Up a Ko-fi Stream Alerts Layer in Twitch Studio
Open Twitch Studio and select the Layout that you want to add the Stream Alert layer to and select "Edit Layout" at the bottom of the screen.
Next, select + next to "Layers".
In the Add Layer menu that appears, choose "Browser Source" and click Add.
Paste the link from your Stream Alerts settings page in the text field on the right panel under "Webpage" and click the little arrow to connect your Stream Alert.
Make sure to send a test alert before you go live to confirm that it's working!
How to Set up Ko-fi Stream Alerts for XSplit Broadcaster
Add the Ko-fi stream alert to XSplit Broadcaster by going to Add source > Webpage and pasting in the URL from your Stream Alerts settings page.
How to Set Up Your Goal Overlay
Make sure you have an active goal on your page. You can learn more about Setting Up a Goal.
In your OBS software, add a browser source layer to your stream.
Name your layer and then copy your Goal Overlay link from your Stream Alerts settings.
In your OBS, insert it in the browser source URL link box.
Your goal overlay should appear with your goal details and position it in your overlay wherever you like.
Any payment you receive will update your goal progress bar.
Customize the Color of the Progress Bar
For OBS or any streaming software that accepts customs CSS, you can add a script that will change the color of your progress bar.
Open the goal overlay which you have created.
In the Custom CSS box, enter your script and add the Hex value of your choice.
You do not need to delete any of the other code.
Copy this CSS and change the hex value to any color you like:
.progress-bar {
background-color: #C31CC3;
}
Tip: If you are not sure what hex color to choose, use a service like imagecolorpicker.com
Stream Alerts Feedback
We're always trying to improve stream alerts, so if you've got a suggestion about how we can make it better, you can share your feedback with us.
FAQ
It is completely free to use our Stream Alerts, unlike other services we take 0% platform fees on donations!
It is currently not possible to add custom gifs or graphics.