Ko-fi donation widget
The Ko-fi donation widget lets you embed a donation button or widget directly onto your website or blog. Supporters can easily donate or become a member without leaving your site. It's hassle-free support, right where your community is. ☕
Types of widgets
When it comes to widgets, Ko-fi offers two options - a floating button and a donation panel.
The Floating Button expands when clicked, revealing your donation panel.
To set it up, head to your Widget setup and click Floating Button.
-
You can change the Call-to-Action that will be shown on the button, e.g. Support Me, Support Us, Donate, etc. You can also choose the background color of the button here.
-
Once you’ve customized your button, just copy the script and paste it into your site’s code before the closing body tag. It should look something like this:
<HTML>
<HEAD>
<TITLE>My website</TITLE>
</HEAD>
<BODY>
<P>
Welcome to my website!
</P>
Paste Widget Script here, just before the closing body tag.
</BODY>
</HTML>
Tip
You can check how your Floating Button will appear by clicking the preview button on the bottom left side of your screen.
If you have any questions on the Floating Button widget, feel free to reach out!
Opt for the Donation Panel if you prefer a dedicated space, such as a sidebar, footer, or page on your website or blog, exclusively for donations. Unlike the Floating Button, the Donation Panel remains fully visible at all times, offering immediate access without the need to click to expand.
To set up your Donation Panel, go to your Widgets page and click Donation Panel. Here you can see a preview of your widget and find the code. To embed the panel on your site, just copy the code and paste it anywhere that lets you embed HTML.
Questions on how the donation panel works? Contact us here!
Adding your widget
Ko-fi provides you with code for both the floating button and the donation panel, which you can use on your own website or blog. Here are a few places you can use them.
Creators who use WordPress can use the official Ko-fi Button plugin. To install the plugin, you'll need a WordPress Business account for sites on wordpress.com, or hosting with a third-party service such as Hostgator, GoDaddy, Bluehost, among thousands of others.
If you use WordPress, you can use the official Ko-fi plugin. To do this, you'll need to be using a version of WordPress that allows custom plugins. If you use wordpress.com, you'll need a Business account. If you host elsewhere, custom plugins are usually allowed.
For an in-depth guide on how to set up your widget on WordPress, check out our help article here.
For self-hosted sites, it’s just a matter of adding the code to your site’s HTML.
The floating button will need to be added to your site’s footer. The donation panel can be added anywhere you have dedicated space for it, such as the Header, Footer, Sidebar, or even its own page!
You can use Code Injection to add the Ko-fi Widget to your Squarespace site.
Note
Code injection is a premium feature on Squarespace, requiring one of their Business, Commerce, Professional, or Premium plans.
- Open the Code Injection panel.
- Navigate to the Footer field.
- Go to your Ko-fi Widget page and copy & paste the Floating Button code.
- After adding your code, click Save.
For a full guide on code injection, check out Squarespace’s help article here.
To add the widget to your Wix site, you must have a connected domain, which requires a Wix Premium Plan.
If you have a connected domain and want to add the Ko-fi widget, you can follow Wix’s guide here.
You can also add the Ko-fi Donation Panel to your Wix blog if you have one.
-
Go to Blog in your site's dashboard.
-
Click Edit on the relevant blog post, or Create New Post to write a new one.
-
Click Add on the left side, and select HTML code.
-
Click Edit HTML and select HTML Code.
-
Copy & Paste the code for the Donation Panel via the widget page.
-
Click Save.
Voila! Now your blog post will have your donation panel embedded, allowing readers to support you directly.
Note
This method works with the donation panel only.
Check out Wix’s full guide on adding HTML to a blog post here.
You can add the donation panel to your Google Site
-
Navigate to your site editor and click Embed on the right side of the page.
-
Click Embed Code.
-
Navigate to your Ko-fi Widget page and copy the code for the Donation Panel.
-
Copy & Paste the code into the field and click Next.
-
A pop-up will appear previewing your widget. After confirming it’s appearing properly, hit Insert.
-
Position the donation panel where you’d like.
And there you have it! Your Donation Panel will now show on your site, allowing visitors to support you without leaving the page!
More information can be found on Google’s official help article here.
Frequently Asked Questions
If you’re using one of the hosts above, check out the guide to make sure you’ve followed the steps and have a website hosting plan that supports adding custom code. If you’ve done that and you’re still having trouble, feel free to reach out!
Yes! Memberships/monthly payments are offered through the widget as well as one-time donations.
Your widget can even default to memberships so that’s the first thing offered. Simply go to your Payment Settings > enable Default to Memberships.
You can change the floating button’s color and the call-to-action (Support Me, Donate, Tip Me, etc.).
Consider creating buttons in your own style and linking them to your Ko-fi page directly!
At this time, there isn’t a way to embed your Ko-fi Shop or Commissions using the widget.
You can link directly to your shop or commissions page by adding /shop or /commissions to your Ko-fi page link. Consider creating custom buttons that link directly to your Shop and Commissions!
The widget lets you implement the Ko-fi donation panel on your page. Payments will have a 0-5% fee.
For a breakdown of how fees work on Ko-fi, check out our help article here.
We're here if you need us. Feel free to send any questions our way. 💌