Set up Buy Me A Coffee button on Hashnode

The nice thing about adding "buy me a coffee" button on hashnode is that it is easy and you do not have to manually add it in every article you write. All thanks to the Hashnode widget.

Follow the following steps to add "buy me a coffee" (usually abbreviated as bmc) button as a widget to your hashnode blog.

Please note you need to have the following.

• Buy me a coffee account
• Hashnode Blog

Step 1

Once you have created an account, sign in to your Buy Me A Coffee account.

Step 2

Click the "Dashboard" option on top of the page.

Step 3

On the new page that appears, Click "Settings" on the left-hand navigation menu.

Step 4

On the Settings tab, scroll down a bit and you see "My page link" field just like the one below.

Click on the "copy" button.

Step 5

Head over to your Hashnode dashboard. Click on "Widget" on the left-hand navigation menu.

Step 6

Click on "Add New Widget"

Step 7

Copy and paste the HTML code below in the first field that has a placeholder text of "Paste your embed code here"

NB: Replace the placeholder text with your own value.

<div>
<p style="font-weight: bold; color: #fff; font-size: 20px; font-family: sans-serif;">If you find my article useful, you can support me by buying me a coffee using the button below</p>
<a href="<YOUR_PAGE_LINK>" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg"></a>
</div>

Step 8

You can give your new widget an ID.

By entering a value in the "Widget ID" field, you can easily use the widget inside your article by typing the text below.

%%[<WIDGET_NAME>]

If you can don't want the widget to appear on every article, you can skip steps 9 and 10

Step 9

Turn on the switch in the Pin widget.

Pinning a widget will make it appear on all your articles. You can pin up to two widgets.

Step 10

Select the widget location. You can either make the widget appear on top of every article or at the bottom of every article.

Step 11

Once you have completed all the above steps, click on the "Create" button.

Here is what the form will look like after filling it.

As earlier stated, you do not need to edit your existing hashnode article(s). The "bmc" button will be automatically available in every of your article due to the widget we used.

If you are not satisfied with the image button used, you can head over here to download the buy me a coffee creator kit and its assets.

I hope you will find this useful as a creator.