Tuesday, September 26, 2023

Colorado Plays

Playing in Colorado in all forms.

How to StreamUsing OBS

How to Add Stream Alerts from Ko-fi in OBS

Last Updated on March 16, 2022 by Michael Brockbank

Adding Ko-fi stream alerts when you’re broadcasting helps inspire additional donations, follows or subscriptions. It’s a way to engage the audience and make them part of the stream. And adding them to OBS can help you accomplish this.

I’ve seen the ball get rolling with a single $1 donation only for others to try and one-up each other. This resulted in the streamer making more than $500 that day just in donations alone.

And it all started with viewers seeing when someone gives money to their favorite broadcaster.

In this article, I’ll show you how to add Ko-fi to OBS so you can benefit from this method as well.

ColoradoPlays Extra Life

What is Ko-fi?

Ko-fi is a platform many creators use to accept donations, sell commissioned work, create a supporting audience and share “supporter-only” content. Setting up your own account is free, though there is a $6/month fee if you want to upgrade to gold.

And gold status gives you all kinds of perks ranging from more in-depth content sharing to tracking statistics through Google Analytics. The best part is, even if you use Ko-fi without being a gold member, there are no fees when accepting donations.

Well, outside of the fees from PayPal if you use it to process payments.

Personally, I prefer to use PayPal simply because I have a PayPal business debit card and have access to the funds as soon as they hit the account. Plus, I’ve never had an issue with PayPal since signing up in 2003.

Quick Benefits of Using Ko-fi

There are a lot of good donation platforms on the Internet. The hardest part is finding the best that works for you. And out of the several that I’ve tried so far, Ko-fi is one that is high on my list.

Before we get started, here are a few benefits you should consider about using Ko-fi:

  • It’s Free to accept donations.
  • It’s a simple process to add Ko-fi to OBS stream alerts.
  • You can expand greatly as to what you offer supporters.
  • It comes with a variety of ways to monetize your blog, should you have one.
  • You have multiple ways to market your donation page on social media.
  • Ko-fi has a blogging platform complete with creating an image gallery, which is perfect to show off screenshots of previous streams.
  • You can even add videos to integrate your YouTube channel.

And these are just a few that I can think of off the top of my head. There’s no doubt that Ko-fi has a lot to offer anyone who streams games on Twitch, YouTube or Mixer.

Adding Ko-fi Stream Alerts to OBS

OK, let’s jump into setting up Ko-fi stream alerts. I’m going to assume you have a Ko-fi account and have OBS installed on your computer.

This tutorial is for OBS version 27.2.1. But I’m sure it’ll work fine with earlier and later versions. Though, I will check back regularly to make sure this stays up to date.

Step 1. Get the Stream Alerts URL from Ko-fi

Log into your Ko-fi profile and click the “Stream Alerts” option on the left. If you don’t see it, go to the “Home” page for your profile.

Stream Alerts from Ko Fi

In this screen, you can change the alert text, the option to play sound, and show your Ko-fi link.

Ko-fi has support for three different placeholders in the stream alert. They are: the name of the donor, a message he or she includes, and the amount donated. Set these options how you see fit.

You can also choose to show your goals from Ko-fi in the stream alerts by copying a second URL and following the same steps I’m about to show you. I’ll go over that in a moment.

NOTE: Keep in mind that anyone can send any message. So if you want to keep the live stream clean or child-friendly, you might not want to enable the “message” part of the Alert Text.

Once you’ve adjusted your settings, copy the Browser Source URL. You can do this by simply clicking the “Copy” button.

Copy Stream Alerts URL

Now, leave this browser window open. We’ll need it a bit later.

Step 2. Add the URL to OBS

Open your OBS software and select the scene you want to use. Personally, I have different scenes for things like holidays, specific games, Extra Life streaming, and more.

In the “Sources” window, click the “Add Sources” button and select “Browser” from the list. The Add Sources button is the large plus sign in the bottom left corner of Sources.

Select OBS Browser

Give the browser a new name. For instance, I’m going to call it Ko-fi Alerts. This way, I know which source to edit should I need to come back to it later.

Name the Browser Source

Click the OK button, and this will open a Properties window.

Save OBS Browser Source

From here, you can make all kinds of modifications to the stream alert. You can change the height, width, and add custom CSS if you know how to code. For now, I’m just going to leave everything default.

Paste the URL from Ko-fi into OBS.

Paste URL from Ko-fi to OBS

Click the “OK” button when you’re finished.

The browser window will load and it should pull your URL from Ko-fi for all to see.

As with anything in OBS, you can resize the stream alerts by grabbing the red lines. You can also move the window by holding down your mouse click within the box and dragging it to where you want.

Position Ko-fi Stream Alerts Box

Step 3. Test the Ko-fi to OBS Stream Alert

Now, before you go live with any add-on to OBS, you want to test it out first. This way, you can see if it’s going to work right with your stream. You might decide the image is too small, the color isn’t right, or perhaps you don’t like the position.

In any case, always test out additions before you have a live audience.

Remember the browser tab from Ko-fi I wanted you to keep open? Let’s go back to it.

Click on the “Send a test alert” button to see if you have the Ko-fi to OBS integration set up correctly.

Test Stream Alerts from Ko fi

NOTE: It will take about 10 seconds before Ko-fi actually sends the test. This gives you plenty of time to move from the browser to OBS so you can see the alert.

You will see a message, “New donation from Ko-fi Team!” Or, it will say whatever you programmed into Ko-fi Stream Alerts.

Test Stream Alert from Ko-fi

From here, you can make any modifications you’d like to make sure the alert fits your broadcast or recording.

That’s all there is to it. Now, when someone donates to your Ko-fi profile, it’ll show in OBS. This means you’ll also see if someone makes a donation from anywhere you have a link.

For instance, if someone goes to your blog to make a donation, you’ll see it show up while streaming on Twitch.

Just don’t forget to add your Ko-fi profile URL to your streaming profiles. I’m talking about the one you get from the system itself, which may look like:

You can add it to your Twitch channel’s panels or YouTube video descriptions. I’ve even seen people use it in their YouTube channel banner links.

Step 4. Adding the Goal Overlay (Optional)

As I said earlier, you can also show your Ko-fi goals on your video’s overlay. Just click the “Copy” button of the Goal Overlay URL and follow Steps 2 and 3 above. Only this time, you’re pasting the Goal URL instead.

Copy Goal URL

NOTE: There is an option under the Advanced tab under Goal Overlay that will let you change the color of the goal in OBS using custom CSS. Of course, this works on any streaming platform that offers CSS coding.

Simply change the hexadecimal code to the color you want to use.

Custom CSS for Goal Overlay

Step 5. Adding Twitch and YouTube Chatbots (Optional)

Once you get a donation from Ko-fi, chatbots will inform viewers through the chat screen. Despite the delay of your live video, which can be up to 30 seconds on YouTube, Ko-fi will let people know in real-time when someone has sent you money.

Ko-fi Stream Alerts has two options for this; Twitch Chatbot and YouTube Chatbot. The YouTube variant is currently in Beta Preview at the moment for Gold members and contributors.

Click the “Connect to Twitch” button.

Connect to Twitch

You’ll be redirected to the Twitch authorization page to connect the chatbot. This tells you what Ko-fi will have access to when the chatbot is connected.

Click the “Authorize” button at the bottom of the page.

Authorize Ko fi for Twitch

You’ll then be redirected back to the Ko-fi Stream Alerts screen. Verify the Twitch Chatbot has access to your channel.

Verify Ko fi Stream Alerts Chatbot

YouTube Chatbot

The YouTube chatbot for Ko-fi works much the same way. Just click the connect button and Google will pop up with an authorization screen. Then, pick the channel you want the chatbot to access.

Because I have several YouTube channels that I manage, I had to verify it was the Colorado Plays channel.

Verify YouTube Channel Access

How Can You Use Ko-fi Stream Alerts?

Stream alerts will show regardless of where you place the URL on the Internet. If you’re using OBS for recording video or streaming live to Twitch or YouTube, the alerts will appear once you receive money.

As an added bonus, Ko-fi also has a Twitch Chatbot and YouTube Chatbot (currently in beta), that will show donations in the chat of your live stream.

Ko-fi stream alerts aren’t just for OBS, either. You can also add them as browser sources to XSplit Broadcaster, Streamlabs OBS, Gamecaster, or any other app that supports the function.

Add Ko-fi Stream Alerts to OBS and Inspire Viewers

When it comes to a live stream, there are a number of ways to accentuate the broadcast. Adding stream alerts from Ko-fi to OBS is one that will help you develop a strong reputation. That is as long as you explore everything Ko-fi has to offer.

What’s your favorite method of making money during a live stream? If you’re a Twitch streamer, do you prefer bits or direct donations? Let me know in the comments down below, I’d love to hear from you.

If you find value in this post, please feel free to share it on social media. You can help us help the charities we support with a simple click of the mouse.

And, you can support ColoradoPlays by checking out any of the other OBS tutorials we currently have available.

Michael Brockbank
(Visited 1,532 times, 1 visits today)

Michael Brockbank

Michael developed ColoradoPlays to help various charities through his favorite pastime. Since then, the blog and Twitch channels have donated several hundred dollars to Extra Life, Geeks of Grandeur and Operation Supply Drop to name a few.