# Buttons & Banners

## Donate Button

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

Just replace `:collectiveSlug` with the slug of your Collective (e.g. webpack for <https://opencollective.com/webpack>). The verb can either be "donate" or "contribute".

![](https://2144118745-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnScH_KG1YJixOv0LJB%2F-LrtZDhGbYm2tRxhPmkZ%2F-LrtZG9Zql_8nizOfoW7%2Fscreen-shot-2019-01-24-at-2.48.23-pm.png?generation=1571850103707449\&alt=media)

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 collective.

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

Result:

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

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](https://help.medium.com/hc/en-us/articles/115004808847-Image-links)). Here is an [example](https://medium.com/open-collective/open-collective-donate-button-e7e6d5965b2c).

## Show Backers & Sponsors

Use this script:

```
<script src="https://opencollective.com/:collectiveSlug/banner.js"></script>
```

where `:collectiveSlug` is the slug of your collective, e.g. `apex` for <https://opencollective.com/apex>.

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

```
<script src='https://opencollective.com/:collectiveSlug/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`

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

```
#opencollective-banner h1 {
  color: black;
}
```

## Show Events

```
<script src="https://opencollective.com/:collectiveSlug/events.js" width="500"></script>
```

Example:

![](https://2144118745-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnScH_KG1YJixOv0LJB%2F-LrtZDhGbYm2tRxhPmkZ%2F-LrtZG9bZI91NaffJGgR%2Fscreen-shot-2019-01-24-at-2.50.59-pm.png?generation=1571850103392204\&alt=media)

## Related:

* Website [badge](https://documentarians.gitbook.io/metadocumentation/master/financial-contributors/website-badge) showing the Collectives you back
* [Export SVGs](https://documentarians.gitbook.io/metadocumentation/master/collectives/data-export) showing your backers, sponsors, or contributors