Metadocumentation
open-collective
open-collective
  • Welcome
  • About
    • Introduction
    • Terminology
    • Company
    • Pricing
    • Community Guidelines
    • Values
    • Team
    • Investors
    • Contributing
  • Product
    • Features
    • Roadmap
    • Comparison
    • User Profile
    • Currencies
    • Log-in System
  • Collectives
    • FAQ
    • Creating a Collective
    • Quick Start Guide
    • Customize Collective
    • Change Core Contributors
    • Tiers & Goals
    • Add Fiscal Host
    • Change Fiscal Host
    • Transparent Budget
    • Expense Policy
    • Approving Expenses
    • Updates & Comms
    • Events
    • Funding Options
    • Data Export
    • Buttons & Banners
    • Integrations
    • Zero Collective Balance
    • Closing a Collective
  • Financial Contributors
    • FAQ
    • Payments
    • Website Badge
    • Organizations
      • FAQ
      • Bulk Transfers
      • Gift Cards
      • Sustainer Resources
    • Collectives
      • Collective to Collective donations
  • Expenses & Getting Paid
    • FAQ
    • Submitting Expenses
    • Expense Comments
    • Edit an Expense
    • Tax Information
  • Fiscal Hosts
    • FAQ
    • Becoming a Fiscal Host
    • Create a Fiscal Host
    • Fiscal Host Settings
    • Invoices
    • Payouts
    • Host Dashboard
    • Add Funds Manually
    • Refunds
    • Host Fees
    • Local Tax Support
    • Agreement Templates
    • Open Source Collective
  • Contributing
    • Design
      • Design Workflow
      • Design Contribution Guidelines
    • Development
      • Contribution Guide
      • Best Practice Guidelines
      • Bounties
      • API
        • Members
        • Users / Emails
        • Collectives
        • Events
      • README Integration
      • Architecture
      • Postgres Database
      • PayPal
      • Post-Donation Redirect
      • Custom Tweets
      • Manual Reporting
      • Github Permissions
      • Translations
      • Testing with Cypress
      • Collective's locations
    • Documentation
      • Style guide
      • Suggesting changes
    • Translation
  • Internal
    • Scope
    • Team Retreats
    • Brussels Summer Team Retreat
    • Host Admin Manual
    • Newsletter
    • Support
    • Issue Labels
    • DNS Troubleshooting
    • Developer Guidelines
    • Architecture
    • Testing
    • Queries
      • Gift Cards
      • Transactions
      • Ops
      • Collectives
      • Hosts
      • Analytics
      • Emails
    • Projects
      • Maintainerati Berlin 2019
      • Season of Docs 2019
    • The Open Collective Way
      • Values
      • Community Guidelines
      • Core Contributors Guidelines
      • Core Contributors: Communication
      • Core Contributors: Expenses
      • Core contributors: Leave
      • Core Contributors: Compensation
Powered by GitBook
On this page
  • Donate Button
  • Show Backers & Sponsors
  • Show Events
  • Related:
  1. Collectives

Buttons & Banners

PreviousData ExportNextIntegrations

Last updated 5 years ago

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 ). 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/button@2x.png?color=blue" width=300 />
</a>

Result:

Show Backers & Sponsors

Use this script:

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

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

Examples:

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

Show Events

<script src="https://opencollective.com/:collectiveSlug/events.js" width="500"></script>

Example:

Related:

On Medium, download the image then upload it to your post. To link it, select the image and 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 ). Here is an .

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

Website showing the Collectives you back

showing your backers, sponsors, or contributors

Medium support page
example
https://opencollective.com/apex
http://apex.run/#links
https://www.spinacms.com/
badge
Export SVGs
https://opencollective.com/webpack