How to set up a tip jar in Ghost

How to set up a tip jar in Ghost
This is almost exactly my facial expression when I think about hot tea.

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.

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...

The donation block I'm using below (as a handy HTML snippet) uses a bunch of inline HTML on the button, because I didn't want to use an actual Ghost button. It sacrifices all of the nifty behind the scenes Ghost rewriting that happens for regular buttons. Here's what I'm using, but be warned that it's less tested than Ghost's default button styling, so use with caution:
<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!

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!