Step 1: Create an account on

Step 2: Retrieve your "buy me a coffee" link, i.e.,

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="" target="_blank" rel="noreferrer">

src=" 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"/>


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

Step 8: Click the "Create" button to save your change.

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="">
src=" 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"
Did this answer your question?