Add colors to JIRA component names on the Agile board

gistfile1.js

(function() {
	var colors = {
		"Web App": "#d9a3d5",
		"Native": "#D84315",
		"Android": "#81C784",
		"Plugin": "#7986CB",
		"Server": "#4FC3F7",
		"iOS": "#F9A825",
		"Admin": "#4DB6AC"
	}

	var items = $("span[data-tooltip^='Component'] span");

	for(var i = 0; i < items.length; i++) {
		var $item = $(items[i]);

		var t = $item.text().split(",");
		$item.text($.trim(t[0])).css( {"color": getComponentColor(t[0]), "display": "inline"} );

		for(var j = 1; j < t.length; j++) {
			var comma = $("<span>", { class: "ghx-extra-field-content", text: "," }).css( {"color": "#333", "display": "inline"} ).insertAfter($item);
			$("<span>", { class: "ghx-extra-field-content", text: t[j] }).css( {"color": getComponentColor(t[j]), "display": "inline"} ).insertAfter(comma);
		}
	}

	function getComponentColor(name) {
		var c = "#333";
		name = $.trim(name);

		if(colors.hasOwnProperty(name)) {
			c = colors[name];
		}	

		return c;
	}
}) ();

how to use this?