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

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/[email protected]?color=blue" width=300 />
</a>
Result:
Here is an example.
Show Supporters & 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
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 Copyright
The designs of these widget buttons are licensed by Open Collective under a CC0 1.0 Universal license. Open Collective, the Open Collective Logo, are trademarks of Open Collective, 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 Collectives you back
Export SVGs showing your supporters, sponsors, or contributors
Last updated
Was this helpful?