Step 1: Create an account on www.buymeacoffee.com

Step 2: Retrieve your "buy me a coffee" link, i.e., https://www.buymeacoffee.com/your-username.

Step 3: Navigate to your Hashnode dashboard and click on the "Widgets" visible on the left-side panel.

Attachment Step 3.png

Step 4: Click on the "Add New Widget" button at the top right corner of the widget area.

Attachment Step 3.png

Step 5: Copy the code below and replace the "YOUR-USERNAME" placeholder with your BMC username.

<a href="https://www.buymeacoffee.com/YOUR-USERNAME">

<img
src="https://img.buymeacoffee.com/button-api/?text=Buy me a Coffee&emoji=&slug=YOUR-USERNAME&button_colour=5F7FFF&font_colour=ffffff&font_family=Lato&outline_colour=000000&coffee_colour=FFDD00"
alt="buy me a coffee"/>

</a>

Paste the code with your BMC username into the create new widget code text area as shown below:

Attachment Step 3.png

Step 6: Create an ID for your widget. This ID will be used to insert the widget anywhere in your articles, i.e. %%[my-bmc-widget]

Attachment Step 3.png

Step 6: If you don't want to manually insert the ID every time you publish a new article, you can enable the Pin Widget to pin the widget to the top or bottom of each article on your blog.

Attachment Step 3.png

  • Pin to the top of each article

    The widget will be visible at the top of each of your blog articles like this:

  • Pin to the bottom of each article

    The widget will be visible at the bottom of each of your blog articles like this:

How to Center the BMC Button Widget?

Wrap the img tag with the <center> tag to position the BMC button at the center of the page:

<a href="https://www.buymeacoffee.com/unclebigbay">
<center>
<img
src="https://img.buymeacoffee.com/button-api/?text=Buy me a Coffee&emoji=&slug=unclebigbay&button_colour=5F7FFF&font_colour=ffffff&font_family=Lato&outline_colour=000000&coffee_colour=FFDD00"
alt="buy me a coffee"
/>
</center>
</a>
Did this answer your question?