November 30th, 2019

Add Buy Me A Coffee widget to a GatsbyJS site

Buy Me A Coffee has a widget that can be easily integrated with any website.

Buy Me A Coffee - widget

How to generate the widget?

Log in to your account, go to Tools and click Widget generator. Choose your settings and click Copy Widget Code.

Buy Me A Coffee - widget generator

Now it's time to add it to your Gatsby site.

Open or create a file named gatsby-ssr.js in the root of your project. To add the widget, we need to use the onRenderBody function. The code should look like this:

const React = require("react");
exports.onRenderBody = ({ setPostBodyComponents }) => {
setPostBodyComponents([
<script
data-name="BMC-Widget"
src="https://cdn.buymeacoffee.com/widget/1.0.0/prod/widget.prod.min.js"
data-id="eshlox"
data-description="Support me on Buy me a coffee!"
data-message="Thank you for visiting. You can now buy me a coffee!"
data-color="#FF813F"
data-position="right"
data-x_margin="28"
data-y_margin="18"
></script>
]);
};

As you can see the script tag contains the widget code copied from the BMAC site.

Restart the development server and the widget should be ready to use!

Do you want to support me?

© 2019 Przemysław Kołodziejczyk