Buttons & Banners

Donate Button
1
<script src="https://donatepr.com/:projectSlug/:verb/button.js" color="[white|blue]"></script>
Copied!
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.
1
<a href="https://donatepr.com/webpack/donate" target="_blank">
2
  <img src="https://donatepr.com/webpack/donate/[email protected]?color=blue" width=300 />
3
</a>
Copied!
Result:
​​
​​
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:
1
<script src="https://donatepr.com/:projectSlug/banner.js"></script>
Copied!
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.
1
<script src='https://donatepr.com/:projectSlug/banner.js?style={"a":{"color":"red"},"h2":{"fontFamily":"Verdana","fontWeight":"normal","fontSize":"20px"}}'></script>
Copied!
Note: make sure that your style object is parsable with JSON.stringify
Examples:
​http://apex.run/#links​
​https://www.spinacms.com/​
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:
1
#donatepr-banner h1 {
2
  color: black;
3
}
Copied!
Show Events
1
<script src="https://donatepr.com/:projectSlug/events.js" width="500"></script>
Copied!
Example:
Related:
Website badge showing the Projects you back
​Export SVGs showing your backers, sponsors, or contributors

Last modified 1yr ago

Copy link

Contents

Donate Button

Show Backers & Sponsors

Show Events