Ko-fi.tools 
Many of you will be familure with the donation platform Ko-fi. If not, its a website where you can host a page and point people to so they can leave you a donation. You can set goals, sell digital and physical goods, accept commissions, offer services and commissions and even use to blog on.
Ko-fi is an amazing service and its used by loads of creators around the world. Its especially popular with artists and people who make hand made items.
This is a project of mine I started in 2024 after I noticed, and knew from friends that many of them often have their own websites. Sometimes they even had a shop on their site and they struggled keeping both their Ko-fi and shop sites up to date. Looking to reduce their work and help them promote their Ko-fi pages I created a tool that would let them embed their Ko-fi shop into their own pages.
Ko-fi.tools now lets you embed your shop, commissions, feed and top supporters on your own website.
Frontend 
Obviously, the frontend is all Bootstrap 5. As with every site I develop I like to utilise Bootstrap as much as I can and write as little custom CSS of my own as possible. This helps the sites load times and I always enjoy creating sites using Bootstrap. This site has only has 7 custom CSS classes, and I think I could cut that down to maybe 1 or 2.
Backend 
For this site it uses pure vanilla PHP. PHP is a great language choice for this project as its great at getting data from API’s and parsing HTML too. The backend gets data from Ko-fi by accessing some API data that Ko-fi’s own website uses, and by scraping data from pages too.
How does it work? 
Ko-fi pages all use a unique ID, this ID stays constant so that if you change your username your page can still be found by the system. For my page, my ID is B0B8KZ30.
each embed works by adding a HTML div with parameters added to it that the JS code uses to fetch the right data from my API.
For instance, the embed code for the shop looks like this:
<div id="kofi-shop-embed" data-shop-id="B0B8KZ30" data-shop-theme="default" data-shop-soldout="show" data-shop-currency="£"></div>
id: Is to identify the div so that the JS file knows where you want your embed to be.data-shop-id: Is the Ko-fi page ID.data-shop-theme: This tells the JS what CSS theme you want the embed to use. There are three options available.defaultwhich is a fully setup theme created by me.lowis just the CSS needed to get a nice layout for the embed.nonemeans no external CSS is loaded, giving you full access to style the content yourself.data-shop-currency: Is the currency symbol used on the Ko-fi store, this can be changed by the user, although it doesn’t mean their shop will use the currency provided in the widget. You can even put anything you want in this attribute and the system will use it, giving you some extra creative freedom if you wanted to be silly with it.
Once the results show on the page, the JS file caches them to your browser for 15 mins so that if you reload the page, or come back to the site often there is fewer requests sent to my API.
Next steps 
This is still a project I am working on, and developing features for. Ko-fi lets you post text, blogs, images, videos and audio on your feed. Right now the feed feature only supports text and image posts with the other posts just being rendered as empty boxes in the feed embed. I am looking to improve this and add the other post types to the embed.
On the demo page I plan to implement a text box where users can enter their pages in to see how their content will look in the embeds, right now this isn’t implemented, however the box does exist on the demo page since I am still working on it.
I am considering adding an iframe option to the system for those using website services that don’t let you add your own custom HTML and external JS.
The gallery embed is still to be designed and developed, this is a challenging one as I am not sure right now how possible it is to create. The data is not easy to work with, and I don’t know what kind of layout I will give it.
Feedback 
Since this is a personal project that I am still actively developing, I can and do welcome feedback! Please let me know if you use this tool, or if there is any possible features you can think of. The selection of embeds I have already are pritty much all I can get easily from Ko-fi’s website.
I have to thank the amazing team over at Ko-fi for letting me develop this site, and giving their green light for me to use their data.