Open Collective
Open Collective

Open Collective Widgets

For collectives

<script src="" color="[white|blue]"></script>

Just replace :collectiveSlug with the slug of your collective (e.g., webpack for The verb can either be "donate" or "contribute". Example:

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="" target="_blank">
  <img src="[email protected]?color=blue" width=300 />


On Medium, just download the image then upload it to your post (make sure the image file ends with "@2x" to make it retina size). To link it, select the image then 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 and sponsors

Just add this script:

<script src=""></script>

where :collectiveSlug is the slug of your collective, e.g., apex for

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

<script src='{"a":{"color":"red"},"h2":{"fontFamily":"Verdana","fontWeight":"normal","fontSize":"20px"}}'></script>

Note: make sure that your style object is parsable with JSON.stringify.


How to customize it?

This will use the default styling of your h1 and h2 on your page. You can target them with CSS to customize them:

#opencollective-banner h1 {
  color: black;

For backers, sponsors and core contributors

To show the list of collectives that you are backing or managing on your website, just add this script:

<script src=""></script>



If you would like a different or custom widget, let us know. Send us your feedback to or join us on our slack:

Stay updated about our news and progress.