Create a tip jar to your Ghost blog
Add a tip jar to your Ghost site using your preferred payment link, without editing the theme files.
A tip jar is a great way to encourage reader support on your blog. With Ghost editor's built-in button, you can add a tip button to individual posts or pages. However, it becomes laborious and repetitive if you have many posts to add, or becomes difficult if you need a tip button on non-editable pages, such as the homepage, tag pages.
A simple solution is to inject a tip button 👇👇
Inject a floating tip button
The tip button floating on this page serves as an example of what we'll build.
Simply copy and paste the following code into Ghost Settings > Code injection > Site footer, and replace the https://your-tip-link
with your own tip link, you can have a site-wide floating tip button.
More discussion about payment gateway at Payment gateway choices
<script src="https://cdn.jsdelivr.net/gh/rakihub/[email protected]/tip-button/built/tip-button.min.js"></script>
<script>
addTipButton({
tipLink: "https://your-tip-link",
});
</script>
Customization options
The floating tip button is customizable. You can tweak it using the parameters inside the addTipButton({...})
function.
- Display tip button on specific posts or pages with
allowTag
. For example, you can create a private tag (not visible to readers)#show-tip-button
and pass the tag slug toaddTipButton
, and the tip button will only display in posts or pages with the tag.
<script>
addTipButton({
tipLink: "https://your-tip-link",
allowTag: "hash-show-tip-button",
});
</script>
- Hide the coffee icon with
showIcon
<script>
addTipButton({
tipLink: "https://your-tip-link",
showIcon: false,
});
</script>
- Modify CTA (call to action) text with
ctaText
<script>
addTipButton({
tipLink: "https://your-tip-link",
ctaText: "CAT text",
});
</script>
- Modify text color with
color
<script>
addTipButton({
tipLink: "https://your-tip-link",
color: "#fff",
});
</script>
- Modify the background color with
bgColor
<script>
addTipButton({
tipLink: "https://your-tip-link",
bgColor: "#fff",
});
</script>
- Change the tip button position to the left-bottom with
side
<script>
addTipButton({
tipLink: "https://your-tip-link",
side: "left",
});
</script>
- Combine multiple options
<script>
addTipButton({
tipLink: "https://your-tip-link",
color: "#fff",
bgColor: "#000",
showIcon: false,
ctaText: "Buy me a tea",
side: "left",
allowTag: 'hash-show-tip-button',
});
</script>
Add a tip jar to newsletters
Since email doesn't support JS scripts, the tip button generated using the above method won't be visible in the newsletter emails. It's better to use the button or header in Ghost editor to add a tip jar in newsletters.
Button example:
Header example:
Enjoy this blog?
Leave a small tip to help me keep sharing useful tools, tips, and tutorials!
🍺 Buy me a drinkPayment gateway choices
Popular payment gateways include platforms like Buy Me a Coffee and Ko-fi, as well as options like Stripe and PayPal. Ghost recently rolled out a Stripe-based Tip & Donation feature, which can be enabled directly in your blog’s settings.
Different regions have different preferred payment gateways. For example, PayPal is quite popular in Europe. By tailoring your payment options to your readers, you can maximize their support.