Just add this script:

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

where :collectiveSlug is the slug of your collective, e.g. apex for https://opencollective.com/apex.

Examples:

• http://apex.run/#links 

How to customize it?

This will use the default styling of your h1 and h2 on your page. You can target them with CSS to customize them:

#opencollective-banner h1 {
  color: black;
}

Show next events

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

Example:

For backers and sponsors

To show the list of collectives that you are backing on your website, just add this script:

<script src="https://opencollective.com/:username/widget.js"></script>

E.g. http://polycode.co.uk