How to embed a donate button on any webpage

Tuesday, December 15, 2020 (2 years ago)

Mark Jackson

In a few minutes, you'll be up and running with a button like this on your website:

If you're unfamiliar, Coindrop is a 100% free, zero-fee, open-source way to accept donations. Simply list all payment methods you accept (e.g. PayPal, CashApp, Bitcoin, etc.) and Coindrop provides a simple interface for donors to pay you directly. No middleman involved.

On what sites can I embed the button?

Any website that supports HTML code blocks or Markdown.

This includes:

Website builders like SquareSpace and Wix
Blog platforms Wordpress and Ghost
Github README pages
and many more

Step 1) Create a Coindrop page

Click here to get started. It only takes ~2 minutes to get it up and running.

If you already have a Coindrop, Log in and open the one you want to create a button for.

Step 2) Copy embed code

On your Coindrop page, click "Share":

Then click "Copy HTML Code":

Step 3) Paste the code on your website

How to do this will vary based on the website platform you're using. Look for an option to "Add custom HTML", "Add Markdown", or something similar. Paste the code there.

Wordpress Example

In Wordpress 5.5, click the "Add Block" button and search for "Custom HTML".

JSX Compatibility

If you're using JSX, you just need to convert the style attribute of the embed code to an object:

Before:

style="border-radius: 10px; height: 57px; width: 229px;"

After:

style={{
    borderRadius: "10px",
    height: "57px",
    width: "229px"
}}