> For the complete documentation index, see [llms.txt](https://documentation.opencollective.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://documentation.opencollective.com/collectives/raising-money/adding-donation-buttons-badges-and-banners.md). # 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

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" %} ```html ``` {% 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" %} ```html

``` {% endcode %} {% code overflow="wrap" %} ```html

``` {% 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" %} ```html ``` {% 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" %} ```html ``` {% 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: ```css #opencollective-banner h1 { color: black; } ``` An example of a styled banner can be found on the [Spina site](https://spinacms.com/).

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 Our 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" %} ```html 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" %} ```html

``` {% endcode %} You can edit the script based on a range of parameters: | **Parameter** | **Description** | **default** | | -------------- | ---------------------------------------------------- | ----------- | | `width` | width of the image |

| | `height` | height of the image |

| You can also show all your contributors using, ```html

``` --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://documentation.opencollective.com/collectives/raising-money/adding-donation-buttons-badges-and-banners.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.