diff --git a/src/js/components/shield.js b/src/js/components/shield.js
new file mode 100644
index 0000000..5f8634e
--- /dev/null
+++ b/src/js/components/shield.js
@@ -0,0 +1,36 @@
+import { html } from '../html.js';
+export class shield extends vhtml {
+	constructor() {
+		super();
+		this.loader = undefined;
+		this.colour = "blue";
+		this.style = "plastic";
+		this.logo = "opencollective";
+		this.logoColour = "blue";
+		this.label = "gives";
+
+		return this;
+	}
+	/*
+	async loadingStart(element){
+		if (this.loader !== undefined) this.loader.loadingEnd(element);
+		this.loader = new loader();
+		this.loader.loadingStart(element);
+		return super.loadingStart(element);
+	}
+
+
+	async loadingEnd(element){
+		if (this.loader !== undefined)
+			this.loader.loadingEnd(element);
+
+		return super.loadingEnd(element);
+	}
+*/
+	async render(element, content) {
+		content = encodeURIComponent(content);
+		return super.render(element, `
+		<img alt="Static Badge of opencollective contributions" src="https://img.shields.io/badge/${content}-${this.colour}?style=${this.style}&logo=${this.logo}&logoColor=${this.logoColour}&label=${this.label}">
+		`);
+	}
+}
diff --git a/src/js/plugins/opencollective.js b/src/js/plugins/opencollective.js
new file mode 100644
index 0000000..31623a5
--- /dev/null
+++ b/src/js/plugins/opencollective.js
@@ -0,0 +1,61 @@
+import { vj } from "../vjfw.js";
+import { shield } from "../components/shield.js";
+import { fetcher } from "../fetch.js";
+
+export class OpenCollective extends shield {
+    constructor() {
+	super();
+
+	this._ip = "";
+	this._source = "https://ip.zutto.fi/"
+
+	vj.watcher.watch('[content="myip"]', (element) => {
+		this.loadingStart(element);     
+		this.ip().then((data) => {
+			try {
+				this._ip = data.trim();
+				vj.ps.publish("ip", {"ip": this._ip});
+				this.render(element);
+				this.loadingEnd(element);
+			} catch (e) {
+				console.log("error here", e)
+				throw e;
+			}
+		}); 
+	})
+    }
+
+    async ip() {
+	try { 
+		const fetch = new fetcher();
+		console.log("ok");
+		return fetch.go({"url": `${this._source}/ip` });
+	} catch (e) {
+		throw e;
+	}
+    }
+
+    
+    async loadingStart(element) {
+	vj.ps.publish("ip.load.start", {"element": element});
+	return super.loadingStart(element);
+    }
+
+    async loadingEnd(element) {
+        vj.ps.publish("ip.load.end", {"element": element});
+	return super.loadingEnd(element);
+    }
+
+    async render(element) {
+        try {
+            const rendered = await super.render(element, "4.00 USD/Month");
+            vj.ps.publish("ip.rendered", { "element": element, "rendered": rendered });
+        } catch (e) {
+            throw e;
+        }
+
+    }
+
+}
+
+