> For the complete documentation index, see [llms.txt](https://docs.donatepr.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.donatepr.com/communities/widgets.md).

# Buttons & Banners

## Donate Button

```
<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".

![](/files/M8ke7NNbcpXVfzlYa4uu)

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/button@2x.png?color=blue" width=300 />
</a>
```

Result:

[![](https://donatepr.com/webpack/donate/button@2x.png?color=blue)](https://donatepr.com/webpack/donate)

Here is an [example](https://medium.com/open-collective/open-collective-donate-button-e7e6d5965b2c).

## 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:**

* <https://www.donatepr.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:

```
#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 <legal@donatepr.com>

## Related:

* Website [badge](/financial-contributors/website-badge.md) showing the Communities you back
* [Export SVGs](/communities/collective-settings/data-export.md) showing your supporters, sponsors, or contributors