About
Collectives
Financial Contributors
Expenses & Getting Paid
Fiscal Hosts
Independent Collectives
Contributing
Buttons & Banners
Donate Button
1
<script src="https://opencollective.com/:collectiveSlug/:verb/button.js" color="[white|blue]"></script>
Copied!
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.
1
<a href="https://opencollective.com/webpack/donate" target="_blank">
2
<img src="https://opencollective.com/webpack/donate/[email protected]?color=blue" width=300 />
3
</a>
Copied!
Result:
Show Supporters & Sponsors
Use this script:
1
<script src="https://opencollective.com/:collectiveSlug/banner.js"></script>
Copied!
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.
1
<script src='https://opencollective.com/:collectiveSlug/banner.js?style={"a":{"color":"red"},"h2":{"fontFamily":"Verdana","fontWeight":"normal","fontSize":"20px"}}'></script>
Copied!
Note: make sure that your style object is parsable with
JSON.stringifyExample:
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:1
#opencollective-banner h1 {
2
color: black;
3
}
Copied!
Show Events
1
<script src="https://opencollective.com/:collectiveSlug/events.js" width="500"></script>
Copied!
Example:
The designs of the buttons are licensed by Open Collective under a Creative Commons Attribution–Share-Alike 4.0 Unported license (“CC-BY-SA”). . . . 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:
Last modified 3mo ago
Export as PDF
Copy link