Ko-fi Donation Widget
Use the new Ko-fi Donation Widget to give your audience a super-easy way to support you without leaving your own site or blog.
As always with Ko-fi, you’ll pay 0% platform fees on the donations you receive! 🙌
Widget Types
There are 2 Widget options. The Floating Button option expands when clicked to reveal your donation panel. A bit like a 'chat-bot'. It's really quick to set up and doesn't need any other signposting on your site.
The Donation Panel is a great option if you want to create a dedicated page of your website or blog to take donations. You can also add it to your sidebar, footer, or a popup window.
Using the Donation Panel
It’s super simple to set up! Just head over to the Ko-fi Donation Widget, choose Donation Panel, copy the code, then paste it in any html area of your site.
Using The Floating Button
The Floating Button version of the widget can be used anywhere that allows you to use JavaScript. Simply head over to the Ko-fi Widget menu, select a call-to-action, select a color and copy the code.
Adding The Floating Button Widget to The HTML of Your Website
To implement the widget, simply paste the Widget script snippet in your site, ideally before the closing body tag of your website. 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>
Wordpress
Self-hosted WordPress Site
If you are hosting your WordPress site on a custom domain, there are two ways that you can add the widget without touching your website's HTML code.
1. Check whether your theme has a place to paste external javascript code, this is usually the same place that you would paste your Google Analytics tracking code.
or
2. Add a plugin such as Header and Footer Scripts and paste your Widget code there.
wordpress.com sites
To use the Widget on site hosted by wordpress.com, you need to be subscribed to their Business plan in order to be able to install plugins to support the use of custom JavaScript on your site. A widely used plugin that you can use to achieve this is the Header and Footer Scripts plugin.
Squarespace
Adding JavaScript to a code block in Squarespace is a premium feature, which means that in order to use the Ko-fi Widget on your Squarespace website, you need to be subscribed to their Business or Commerce plan.
In your Squarespace dashboard, select "Settings" in the menu on the left side of the page and select "Advanced" in the next menu.
In the settings menu, select "Advanced".
And finally, select "Code Injection".
On the code injection page, you will be able to add code to the header, footer or lock page.
The Ko-fi widget should be injected into the footer.
Head over to the Ko-fi Widget manager, customize your widget as desired, and copy the code.
Then go back to the Squarespace code injection page and paste the Widget code into the footer section and don't forget to save!
Your supporters can now donate to your Ko-fi page without leaving your website!
Wix
In order to use the Widget on a Wix site, you will need to be subscribed to one of their paid plans and make sure that you have a domain set up for your site.
Then you should head to the Custom Code section in your settings to add the Widget code snippet to the body end.
For more information, please have a look at Wix's Embedding Custom Code to Your Site article.
Google Sites
The Widget is currently not compatible with Google Sites, however, we are working on a solution.
Please stay tuned for a Widget update that will allow it's usage with Google Sites.
FAQ
It is currently not possible to change the Widget's position, however, the widget is very new so we might release an update in the future to allow this.
Do you have any feedback regarding the Ko-fi Website Widget that you would like to share with us? Please reach out and let us know!