Adding Donation Buttons, Badges and Banners#

There are a number of ways to display your Collective information on your own site, including buttons and banners.

Accessing widgets and badges from your settings#

A selection of badges and widgets are available for you to edit and customize from the “Export” section of your Collective’s “Settings” menu.

You can find:

• a script to add a banner widget for your Collective to your site
• a script to export images showing your contributors in each of your tiers

Screenshot of different Contributor widgets as featured on the docusaurus Github.

Adding donate buttons#

To place a donate button on your website, add this script:

{% code overflow="wrap" %}

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

{% endcode %}

Replace YOURCOLLECTIVE with the handle you selected for your collective URL.

You will also need to replace VERB with the action you want to invite your reader to complete (for example, use “donate” if you want the button to say “Donate to our Collective” or “contribute” if you want it to say “Contribute to our Collective”.

To add your donate button to a blog post, use this script to load an image of the logo with a link to your collective’s “contribute” page.

For example:

{% code overflow="wrap" %}

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

{% endcode %}

{% code overflow="wrap" %}

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

{% endcode %}

Displaying supporters and sponsors#

Showing a list of sponsors can be a good way to recognize those who have supported you. To do this, add this script:

{% code overflow="wrap" %}

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

{% endcode %}

Remember to replace YOURCOLLECTIVE with your Collective’s handle

You can also style how your display looks by using this script template (in React style). If you alter this example script, remember that your version must still be parsable with JSON.stringify.

{% code overflow="wrap" %}

<script src='https://opencollective.com/YOURCOLLECTIVE /banner.js?style={"a":{"color":"red"},"h2":{"fontFamily":"Verdana","fontWeight":"normal","fontSize":"20px"}}'></script>

{% endcode %}

This script will use the default h1 and h2 tags that you have set on your website, but you can edit them with a command such as the one below:

#opencollective-banner h1 {
  color: black;
}

An example of a styled banner can be found on the Spina site.

Screenshot of Open Collection contributions embedded on the Spina website.

{% hint style="warning" %}
Open Collective and the Open Collective logo are trademarks of Open Collective, Inc. They cannot be modified or used individually. For more information or any requests, contact legal@opencollective.comOur button designs are licensed by Open Collective under a Creative Commons Attribution-Share-Alike 4.0 Unported license (CC-BY-SA).
{% endhint %}

Creating a contributor badge#

You can create a badge in an SVG format showing the number of financial contributors to your Collective. You can adapt the script to change the label and color:

{% code overflow="wrap" %}

https://opencollective.com/YOURCOLLECTIVE/tiers/backers/badge.svg?label=Backers&color=brightgreen

{% endcode %}

Creating a contributor image#

You can also create an SVG image showing all the profile icons of your financial contributors.

Here is an example code that you can adapt to suit your needs:

{% code overflow="wrap" %}

<object type="image/svg+xml" data="https://opencollective.com/YOURCOLLECTIVE/tiers/backers.svg?avatarHeight=36&width=600"></object> 

{% endcode %}

You can edit the script based on a range of parameters:

You can also show all your contributors using,

<object type="image/svg+xml" 
data="https://opencollective.com/YOURCOLLECTIVE/contributors.svg
?avatarHeight=36&width=600"></object>