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

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

![](/files/-LrtZG9Zql_8nizOfoW7)

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:

![](/files/-LrtZG9bZI91NaffJGgR)

## Related:

* Website [badge](https://github.com/contraexemplo/documentation-mirror/tree/64a4ad619be01803dff529e94dd2a76f1f227e98/backers-and-sponsors/website-badge.md) showing the Collectives you back
* [Export SVGs](/metadocumentation/collectives/data-export.md) showing your backers, sponsors, or contributors