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

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

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

Copy<a href="https://www.buymeacoffee.com/YOUR-USERNAME" target="_blank" rel="noreferrer">

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

**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]

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.

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

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