How to add a Ko-fi button to your website
Ko-fi lets creators, makers and independents take tips and support directly. Here's how to put the button or panel on your own website.
Quick answer
Get your widget code from ko-fi.com/manage/widgets. Ko-fi offers two options: a floating button that expands into your tip panel when clicked, or a tip panel embedded in the page. Copy the script and paste it into your site's code before the closing body tag. On WordPress there's a Ko-fi Button block and a [kofi] shortcode instead.
Step-by-step
- 1
Open your Ko-fi widget settings
Go to ko-fi.com/manage/widgets. This is where all the embed options live, including the floating button and the tip panel. Customise the colours and text here before copying anything so the widget matches your site.
- 2
Choose the floating button or the panel
The floating button sits in a corner of the page and expands to reveal your tip panel when clicked — unobtrusive and works on every page. The tip panel embeds directly in your content, which suits a dedicated support page where you've explained what the support funds.
- 3
Paste the script into your site
Copy the script and paste it into your site's code before the closing body tag. Most builders provide a footer or custom-code area for exactly this. On Adviita, ask the AI editor to add a support button linking to your Ko-fi page if you'd rather avoid custom scripts.
- 4
On WordPress, use the block instead
WordPress has a Ko-fi Button plugin that gives you a Ko-fi Button or Ko-fi Donation Panel block in any block-based editor, plus a [kofi] shortcode for classic themes. That's simpler and cleaner than pasting the script by hand.
- 5
Say what the support is for
A bare 'Support me' button converts poorly. A sentence explaining what the money enables — materials, studio time, keeping something free — does far more work than the button design. Put that sentence directly above the panel.
Tips & best practices
- ▸The floating button works site-wide; the embedded panel suits a dedicated support page with context around it.
- ▸Third-party scripts can affect page speed — if PageSpeed scores matter to you, look at the lighter community implementations.
- ▸Explain what support funds; that sentence matters more than the widget.
- ▸Ko-fi works alongside a shop or commissions page rather than replacing it.
Common questions
How do I add a Ko-fi button to my website?
+−
Get the widget code from ko-fi.com/manage/widgets, customise it, then paste the script into your site's code before the closing body tag. On WordPress, use the Ko-fi Button plugin's block or the [kofi] shortcode instead.
What's the difference between the Ko-fi floating button and the tip panel?
+−
The floating button sits in a page corner and expands into your tip panel when clicked, so it's available everywhere without taking up space. The tip panel embeds inline in your content, which works better on a dedicated support page.
Does the Ko-fi widget slow down my site?
+−
It loads an external script, so it has some cost. If page speed is a priority there are lighter community-built implementations designed to keep PageSpeed scores healthy, or you can simply link to your Ko-fi page with an ordinary button.
Can I use Ko-fi without embedding anything?
+−
Yes. Your Ko-fi page has its own URL — put it behind a normal button or link on your site. You lose the inline panel but avoid the script entirely, which is a reasonable trade for many small sites.