Open Collective Docs
Go back to Open Collective
  • WELCOME
  • Welcome
  • Why Open Collective?
    • Why Open Collective?
    • How Open Collective Works
    • Features
    • Pricing
    • Fiscal Host Documentation
  • Getting Started
    • Getting Started
    • Explore
    • Setting up your Account
    • Editing your Profile Page
    • Customizing your Page Layout
    • Adding and Removing Team Members
    • Your Dashboard
    • Understanding Contributions
    • Understanding Expenses
    • Tracking an Expense
    • Creating an Organization
  • Advanced
    • Notifications
    • Preview Features
    • Security For Accounts
      • Logging into your Account
      • Two Factor Authentication
    • Keeping your Community Updated
      • Updates and Contact
      • Conversations
    • Verification
    • Understanding the Ledger
      • Individual Transactions
      • Transaction Pairs, Groups & Perspectives
      • Viewing Transactions
      • Exporting Transactions
      • Fiscal Host Ledger Perspective
      • Contributions in the Ledger
      • Added Funds in the Ledger
      • Expenses in the Ledger
      • Ledger Changelog
    • Exporting Your Data
    • Deleting your Account
  • COLLECTIVES
    • Collectives
    • Creating a Collective
      • Creating Your Policies
      • Security for Collectives
      • Linking Connected Collectives
    • Choosing a Fiscal Host
    • Raising Money
      • Setting Goals and Tiers
      • Customising Thank You Emails
      • Adding Donation Buttons, Badges and Banners
      • Adding Embeds to your Website
      • Creating Custom Fundraising URLs
      • Rejecting and Refunding Financial Contributions
    • Managing Money
      • Budgets
      • Projects
      • Moving money
      • Tagging expenses
    • Spending Money
      • Inviting a Third Party to Submit an Expense
    • Events
    • Changing Fiscal Host
    • Closing a Collective
      • Zero Collective Balance
  • Collective Settings
    • Integrations
  • GIVING TO COLLECTIVES
    • Giving to Collectives
    • Contributing
    • Contributing as a Guest
    • Payment Methods
    • Platform Tips
    • Sharing your Support
    • Making a Recurring Contribution
    • Managing Receipts
    • Giving to Other Collectives
    • Giving as a Company
      • Creating a Fund
      • Bulk Transfers
      • Gift Cards
    • Requesting Refunds
      • Refund Policy
  • EXPENSES AND GETTING PAID
    • Expenses and Getting Paid
    • Submitting Expenses
      • Submitting a Reimbursement
      • Recurring Expenses
      • Multi-Currency Expenses
    • Editing an Expense
    • Payment Processor Fees
    • Getting Paid through Wise
    • Understanding Tax Requirements
  • FISCAL HOSTS
    • Fiscal Hosts
    • Why Become a Fiscal Host?
    • Setting up a Fiscal Host
      • Creating a Fiscal Host
      • Setting your Fiscal Host Fees
      • Fiscal Host Security
      • Fiscal Host Policies
    • Managing your Collectives
      • Hosted Collectives
      • Collective Applications
      • Collecting Local Taxes
      • Vendors
      • Viewing your Host Reports
      • Freezing a Collective
      • Unhosting a Collective
    • Receiving Money as a Host
      • Bank Transfers
      • Stripe
      • Adding Funds Manually
      • Pending Contributions
    • Expense Payment
      • Paying Expenses as a Fiscal Host
      • Understanding Security Checks
      • Asking for Information about Expenses
      • Paying Expenses with Wise
      • Handling Payment Errors Through Wise
    • Processing Refunds
    • Platform Settlements
    • Certified Member
  • INDEPENDENT COLLECTIVES
    • Independent Collectives
    • Creating an Independent Collective
      • Launching an Independent Collective
      • Migrating from Fiscal Host to Independent Collective
      • Migrating from Self-Hosted to Independent Collective
    • Managing Independent Collective Finances
    • Closing an Independent Collective
  • Development
    • API
  • Our Organization
    • About Open Collective
    • Mission And Values
    • Our Team
Powered by GitBook
LogoLogo

Open Collective

  • Open Collective Platform
  • Blog

Support

  • Contact

Community

  • Discord

© 2025 Open Finance Consortium

On this page
  • Accessing widgets and badges from your settings
  • Adding donate buttons
  • Displaying supporters and sponsors
  • Creating a contributor badge
  • Creating a contributor image

Was this helpful?

  1. COLLECTIVES
  2. Raising Money

Adding Donation Buttons, Badges and Banners

You can showcase your Collective contributors and invite donations by displaying buttons and information from your profile to your own website.

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

Adding donate buttons

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

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

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:

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

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:

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

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.

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

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;
}

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:

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

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:

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

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

Parameter

Description

default

width

width of the image

height

height of the image

limit

max number of members to show

(unlimited)

avatarHeight

max height of each avatar / logo

button

show "become a backer/sponsor" button

true

format

format of the image (replace .svg with .png or .jpg)

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

PreviousCustomising Thank You EmailsNextAdding Embeds to your Website

Last updated 2 months ago

Was this helpful?

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

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 Our button designs are licensed by Open Collective under a Creative Commons Attribution-Share-Alike 4.0 Unported license (CC-BY-SA).

Spina site
legal@opencollective.com