Buttons & Banners

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

Just replace :communitySlug with the slug of your Community (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 community.

<a href="https://donatepr.com/webpack/donate" target="_blank">
  <img src="https://donatepr.com/webpack/donate/[email protected]?color=blue" width=300 />
</a>

Result:

Here is an example.

Show Supporters & Sponsors

Use this script:

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

where :communitySlug is the slug of your community, e.g. apex for https://donatepr.com/priloveyou.

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

<script src='https://donatepr.com/:communitySlug/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

Example:

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:

#opencollective-banner h1 {
  color: black;
}

About the Copywrite

The designs of the buttons are licensed by Donate PR under a Creative Commons Attribution–Share-Alike 4.0 Unported license (“CC-BY-SA”). . . . Donate PR, the Donate PR Logo, are trademarks of Donate PR, Inc. and therefore they can’t be modified or used individually, for more info or request reach out to [email protected]

Related:

  • Website badge showing the Communities you back

  • Export SVGs showing your supporters, sponsors, or contributors

Last updated