Create a tip jar to your Ghost blog

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

<!-- Add a tip jar -->
<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 to addTipButton , 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:

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