How to set up a tip jar in Ghost

Well. This week has been a bit of a loss, as I came down with COVID and have spent several days worthless lying on the couch. My goal this year is to do a blog/newsletter weekly, and I'm not going to let COVID beat me. (It helps that the first part of this post is already done. I often have a few ideas and drafts lurking around my dashboard.)

I'll readily admit that Buy Me Coffee and ko.fi and others make it pretty easy to add a tip jar. If you want to drop one of their embeds into an HTML card, that'll get the job done. I tried Buy Me Coffee for a while, and it as ok, but I didn't feel like I had as much control as I wanted. (What do you mean I can't set the button to the right shade of purple?) So here's what I did instead.

Simplest tip jar = Stripe payment links!

If you're taking paying memberships in Ghost, you already have a Stripe account. Stripe offers payment links. This is the perfect opportunity for a donation button.

Stripe actually provides code that you can cut and paste. Here's mine:

That's easy, but it's invisible to email users. Not a win, if you want your newsletter readers to click it. Instead, it works much better to grab the payment link (not button) from Stripe and make a built-in Ghost button, like this:

That's 100% Ghost, and works fine in email. If you'd like a tutorial, the Ghost team has a tip jar tutorial focused on this solution. Email readers, you should feel free to test it out!

And there you have it, instant donation button!

Getting only a bit more complicated...

<style>
    @media screen and (max-width:767px) {
        .twofer {flex-direction: column}
    }
</style>
<div style="display: flex;" class="twofer" >
    <div style="min-width: 300px;"><p>Hey, before you go... If your finances allow you to keep this tea-drinking ghost and the freelancer behind her supplied with our hot beverage of choice, we'd both appreciate it!</p>
<div class="kg-card kg-button-card kg-align-center"><a href="https://donate.stripe.com/5kA9DScbD6CleMUcMO?ref=spectralwebservices.com" class="kg-btn kg-btn-accent" style="color:white; background-color: #66298e; border-radius: 5px; padding: 12px 25px; height: 2.4em; line-height: 1em; font-size: 0.95em; font-weight:600; text-decoration: none;">Buy me a tea ☕️</a></div>
    </div>
    <img width="300" height="277" loading="lazy" src="https://www.spectralwebservices.com/content/images/size/w400/2023/10/ghost-with-mug-01.png">

Actually, maybe a better option would be to set it up as a header? I don't much care for how the header looks on the webpage (too big!), but that's controllable by the theme, so I could fix it. I do think it looks better in email than my html version does.

Header card version:

Hey, before you go... If your finances allow you to keep this tea-drinking ghost and the freelancer behind her supplied with our hot beverage of choice, we'd both appreciate it!

Buy me a tea ☕

HTML card version:

Hey, before you go... If your finances allow you to keep this tea-drinking ghost and the freelancer behind her supplied with our hot beverage of choice, we'd both appreciate it!

Buy me a tea ☕️

For coverage in a future post:

(Because it isn't going to happen today...)

• Offering a newsletter subscription to donators - there's a redirect option in the payment link, so this should be pretty easy!
• Tracking what pages are generating donations - just need to customize the button! Theme level or JavaScript rewrite? Choices!