These widgets will help you advertise your support for Gitcoin bounties.
We support both image widgets (see below) and dynamically resizing javascript widgets (see directly below)
The JS image is responsive. Here are some screenshots of it:
Click here to see an example JSFiddle widget
Step 1: Include the JavaScript SDK on your page once, ideally right after the opening body tag.
<div id="gc-root"></div>
<script>(function(d, s, id) {
var js, gjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://unpkg.com/gitcoin-sdk";
gjs.parentNode.insertBefore(js, gjs);
}(document, 'script', 'gitcoin-jssdk'));</script>Step 2: Place this code wherever you want the plugin to appear on your page.
<div class="gitcoin-widget"
data-limit="2"
data-order-by="-expires_date"
data-orginisation="MetaMask"
data-repository="metamask-extension"
></div>Importing the SDK into your application will attempt to autoload the widget by searching for '.gitcoin-widget' selectors
import 'gitcoin-sdk';or
require('gitcoin-sdk');You can also use the Widget programmatically.
import { Widget } from 'gitcoin-sdk';or
const { Widget } = require('gitcoin-sdk');Widget can be instantiated by passing a selector option, or an element reference.
new Widget({
limit: 10,
orderBy: '-expires_date',
orginisation: 'MetaMask',
repository: 'metamask-extension',
selector: '.gitcoin-widget',
});<a href="https://gitcoin.co/explorer?q=gitcoinco">
<img src="https://gitcoin.co/funding/embed?repo=https://github.com/gitcoinco/web">
</a>Repos that have this widget can expect to see 35% more interest in their repo's bounties
Place the following code into your repo readme:
<a href="https://gitcoin.co/explorer?q=YOUR_REPO_NAME">
<img src="https://gitcoin.co/funding/embed?repo=https://github.com/YOUR_ORG_NAME/YOUR_REPO_NAME">
</a>
Make sure to replace the YOUR_ORG_NAME and YOUR_REPO_NAME text with your org and repo names!
Example:
<a href="https://gitcoin.co/explorer?q=gitcoinco">
<img src="https://gitcoin.co/funding/embed?repo=https://github.com/gitcoinco/web">
</a>Also, if you add &badge=1 to the image URL, a la
<a href="https://gitcoin.co/explorer?q=gitcoinco">
<img src="https://gitcoin.co/funding/embed?repo=https://github.com/gitcoinco/web&badge=1">
</a>you will see a badge version of this widget.