Buttons & Banners

<script src="https://donatepr.com/:projectSlug/:verb/button.js" color="[white|blue]"></script>

Just replace :projectSlug with the slug of your Project (e.g. webpack for https://donatepr.com/webpack). The verb can either be "donate" or "contribute".

If you want to add a donate button to a blog post, you can load an image version of the logo and then link to the donate page of your project.

<a href="https://donatepr.com/webpack/donate" target="_blank">
  <img src="https://donatepr.com/webpack/donate/button@2x.png?color=blue" width=300 />


On Medium, download the image then upload it to your post. To link it, select the image and press CMD+K (or CTRL+K on Windows). A pop up menu will show up where you can enter the URL to link the image to (see Medium support page). Here is an example.

Show Backers & Sponsors

Use this script:

<script src="https://donatepr.com/:projectSlug/banner.js"></script>

where :projectSlug is the slug of your project, e.g. apex for https://donatepr.com/apex.

You can also add a style object (react style), e.g.

<script src='https://donatepr.com/:projectSlug/banner.js?style={"a":{"color":"red"},"h2":{"fontFamily":"Verdana","fontWeight":"normal","fontSize":"20px"}}'></script>

Note: make sure that your style object is parsable with JSON.stringify


How to customize?

By default, it uses the default styling of your h1 and h2 on your page. You can target them with CSS to customize:

#donatepr-banner h1 {
  color: black;

Show Events

<script src="https://donatepr.com/:projectSlug/events.js" width="500"></script>


  • Website badge showing the Projects you back

  • Export SVGs showing your backers, sponsors, or contributors

Last updated