DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Let's Add Buy Me a Coffee Widget to your WebSite in 30 Seconds
Lakira Minlaka
Lakira Minlaka

Posted on

Let's Add Buy Me a Coffee Widget to your WebSite in 30 Seconds

Buy Me a Coffee is a great place to get help from your clients. Maybe you've seen some people put a Buy Me a Coffee widget on their website or in their products. Today I will gonna show you how to add a Buy me a Coffee widget to your website like that. It is simple as ABC and it only takes as little as 30 seconds. I think most of you already know what Buy Me a Coffee is. But it doesn't matter if you don't know. Let’s take a look at what Buy Me a Coffee is and why people use it.

What is Buy me a Coffee? and Why?

Buy me a Coffee is a service for online content creators where you can get tips and donations from your clients for your work. Although the title is "Buy Me a Coffee", subscribers actually donate money to you. All you have to do is start a page. Then your customers can go to it and help you by buying a coffee. Here you can change coffeeβ˜• to whatever you want, like pizzaπŸ• or beer🍺.

buymeacoffee.gif

Let’s move on to our main topic. First, you should have a Buy me a Coffee page. If you do not have a page, go here and create your Buy me a Coffee page. It is completely free and very simple. And it takes just about 1 minute.

Now go ahead to your dashboard, and scroll down to Integrations to take it to the next level. Then click on the button labeled Website Buttons. Now you can see Pop Up like this.

img-1.png
Then go to the overlay widget. Now you can see one of these. You can enter the message you want from the text box here. You can also choose the color you want. Once you have customized it, you have to click on the Generate Widget button.

Then you will see a code like this. Yours may be different than mine.

Screenshot_13.png

Now you go to the HTML file of your website. Now you have to paste the code inside the header tag. And it will be like this.πŸ‘‡

carbon (15).png

Now go to your website and you will be able to see something like this.

Screenshot_9.png
Screenshot_10.png

That's all congratsπŸŽ‰! You did it🀩

Thank you for reading. If you enjoy reading this and find something useful hit the likeπŸ’– and share thisπŸ’¬. If you have any questions or feedback for me, feel free to leave them below.😊

And don't forget to follow me on Twitter for more updates!πŸ˜‰

Thanks again for reading✨!Happy HackingπŸŽ‰

Top comments (0)

Let's team up together 🀝

We're Hiring

We're hiring for a Senior Full Stack Engineer to join the DEV team. Want the deets? Head here to learn more about who we're looking for.