Ko-Fi widget on header

Wondering if anyone in the community will be able to help.

This is my blog (work in progress) and I want to add a Ko-Fi button for donations within the header, aligned with the rest of the elements.

I am using Simply as the blog’s theme, see below:


I am totally clueless on where to start, got the code from Ko-Fi but I’m unable to embed it nicely. Code injection within Ghost admin page places the header right above all content so I’m guessing I need to edit one of the .hbs files, question is which one and how.

Below the bit of code I’m trying to embed to generate the widget:

<script type='text/javascript' src='https://ko-fi.com/widgets/widget_2.js'></script><script type='text/javascript'>kofiwidget2.init('Bríndanos un café', '#000000', 'BLABLABLA');kofiwidget2.draw();</script>

If you could either assist me or point me to the right direction, that would be great!

Many thanks in advance!

Not sure about your theme, but you need to add the code under the header .hbs file. It might be in your partials folder.

What you need to do is first download your theme from Ghost Admin > Design > Theme. You’ll get a zip file of the Simply theme. Unzip it, and find the .hbs file where the header is coded. Not sure how yours looks like. It might be called header.

Once you find it, put the ko-fi code in there.

Found this thread and asked for a bit of clarification there.

Will try to create a .hbs file with the code given by Ko-Fi and then embed it to my footer first, if I manage to get it to work I will then start playing around with the header.

For reference, this is the theme I am using.

Ok after downloading your theme, go to this file, at simply/partials/header.hbs.

Go to this code here:

{{else}}
     {{!-- Social Media - partilas/widget/social-media.hbs --}}
     {{> "widget/social-media"}}
{{/is}}

If you want to replace your social media buttons, then replace the

{{> "widget/social-media"}}

with your kofi-code. Otherwise, just paste it above it.

1 Like

Thank you! Didn’t exactly do as you shared but your input helped me understand the logic behind it.

I ended up placing the widget in the footer, not as intrusive, it’s arguable whether it’s better UX to have it on the header or not, but that’s something I will be able to do in the future if need to :smiley:

1 Like