Using Jenkins JSON API to display an alert on your team dashboard, more http://gadelkareem.com/2016/06/29/using-jenkins-json-api-display-alert-build-fails/

## Jenkins-alerts.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tweets</title>
    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script type="text/javascript" src="http://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <style>
        #jenkins, #jenkins .background {
            z-index: 9999;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            font-family: serif;
        }

        #jenkins {
            display: none;
            background: rgba(249, 144, 144, 0.73);
        }

        #jenkins .background {
            z-index: 10000;
            animation: blinker 1s cubic-bezier(0, -0.36, 1, 1.39) infinite alternate;
            background: linear-gradient(to bottom, rgb(255, 0, 0) 0%, rgb(255, 255, 255) 400%);
        }

        @keyframes blinker {
            to {
                opacity: 0;
            }
        }

        #jenkins .center-block {
            z-index: 10001;
            width: 75%;
            margin-top: 10%;
            position: relative;
            top: 0;
            left: 0;
        }

        #jenkins .pull-left {
            height: 358px;
            width: 307px;
        }

        #jenkins h1 {
            font-size: 50px;
            font-weight: 700;
            font-family: fantasy;
        }

        #jenkins-error {
            font-size: 30px;
            padding: 60px 0 0 350px;
        }


    </style>
</head>
<body>
<a class="twitter-timeline" href="https://twitter.com/gadelkareem">Tweets by gadelkareem</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<div id="jenkins">
    <div class="background"></div>
    <div class="center-block">
        <img id="photo" src="http://gadelkareem.com/images/oops-jenkins.png" class="pull-left">
        <div>
            <h1>Oops!! <span class="author"></span> just put us on Fire!</h1>
            <ul id="jenkins-error"></ul>
        </div>
    </div>
</div>
<script>
    function jenkins() {
        var baseUrl = "http://jenkins.company.example";

        $.ajax({
            url: baseUrl + "/api/json",
            data: "depth=1&tree=jobs[displayName,lastBuild[result,timestamp,changeSet[items[msg,author[fullName]]]]]&jsonp=callBack",
            jsonpCallback: "callBack",
            dataType: 'jsonp',
            success: function (json) {
                var allJobs = json["jobs"],
                        currentTimestamp = moment().unix(),
                        nonSuccessfulJobs = allJobs.filter(function (job) {
                            return job["lastBuild"] != null && job["lastBuild"]["result"] == "FAILURE" && (currentTimestamp - (job["lastBuild"]["timestamp"] / 1000)) < 180 /* display for 3 min */;
                        });

                if (nonSuccessfulJobs.length) {
                    console.log(nonSuccessfulJobs);
                    jenkinsError.empty();

                    $.each(nonSuccessfulJobs, function (index, value) {
                        var changeSet = value['lastBuild']['changeSet']['items'],
                                item = changeSet[changeSet.length - 1],
                                author = item && 'author' in item && 'fullName' in item['author'] ? item['author']['fullName'] : 'Someone';
                        $('.author').text(author);
                        jenkinsError.append(
                                "<li><strong>" + author + "</strong> just broke <strong>" + value["displayName"] + "</strong> while trying to <em>" + ( item && 'msg' in item ? item['msg'] : 'hmm.. not sure!') + '</em></li>');
                    });
                    jenkinsDiv.fadeIn();
                }
                else {
                    jenkinsDiv.fadeOut();
                }
                setTimeout(jenkins, 15000);
            },
            error: function (error) {
                console.log(error);

            }
        });
    }
    var jenkinsDiv = $("#jenkins"), jenkinsError = $('#jenkins-error');
    jenkinsDiv.on('click', function () {
        $(this).hide();
    });
    jenkins();


</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Tweets</title>
	<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<script type="text/javascript" src="http://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
	<style>
	#jenkins, #jenkins .background {
	z-index: 9999;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	font-family: serif;
	}

	#jenkins {
	display: none;
	background: rgba(249, 144, 144, 0.73);
	}

	#jenkins .background {
	z-index: 10000;
	animation: blinker 1s cubic-bezier(0, -0.36, 1, 1.39) infinite alternate;
	background: linear-gradient(to bottom, rgb(255, 0, 0) 0%, rgb(255, 255, 255) 400%);
	}

	@keyframes blinker {
	to {
	opacity: 0;
	}
	}

	#jenkins .center-block {
	z-index: 10001;
	width: 75%;
	margin-top: 10%;
	position: relative;
	top: 0;
	left: 0;
	}

	#jenkins .pull-left {
	height: 358px;
	width: 307px;
	}

	#jenkins h1 {
	font-size: 50px;
	font-weight: 700;
	font-family: fantasy;
	}

	#jenkins-error {
	font-size: 30px;
	padding: 60px 0 0 350px;
	}


	</style>
	</head>
	<body>
	<a class="twitter-timeline" href="https://twitter.com/gadelkareem">Tweets by gadelkareem</a>
	<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
	<div id="jenkins">
	<div class="background"></div>
	<div class="center-block">
	<img id="photo" src="http://gadelkareem.com/images/oops-jenkins.png" class="pull-left">
	<div>
	<h1>Oops!! <span class="author"></span> just put us on Fire!</h1>
	<ul id="jenkins-error"></ul>
	</div>
	</div>
	</div>
	<script>
	function jenkins() {
	var baseUrl = "http://jenkins.company.example";

	$.ajax({
	url: baseUrl + "/api/json",
	data: "depth=1&tree=jobs[displayName,lastBuild[result,timestamp,changeSet[items[msg,author[fullName]]]]]&jsonp=callBack",
	jsonpCallback: "callBack",
	dataType: 'jsonp',
	success: function (json) {
	var allJobs = json["jobs"],
	currentTimestamp = moment().unix(),
	nonSuccessfulJobs = allJobs.filter(function (job) {
	return job["lastBuild"] != null && job["lastBuild"]["result"] == "FAILURE" && (currentTimestamp - (job["lastBuild"]["timestamp"] / 1000)) < 180 /* display for 3 min */;
	});

	if (nonSuccessfulJobs.length) {
	console.log(nonSuccessfulJobs);
	jenkinsError.empty();

	$.each(nonSuccessfulJobs, function (index, value) {
	var changeSet = value['lastBuild']['changeSet']['items'],
	item = changeSet[changeSet.length - 1],
	author = item && 'author' in item && 'fullName' in item['author'] ? item['author']['fullName'] : 'Someone';
	$('.author').text(author);
	jenkinsError.append(
	"<li><strong>" + author + "</strong> just broke <strong>" + value["displayName"] + "</strong> while trying to <em>" + ( item && 'msg' in item ? item['msg'] : 'hmm.. not sure!') + '</em></li>');
	});
	jenkinsDiv.fadeIn();
	}
	else {
	jenkinsDiv.fadeOut();
	}
	setTimeout(jenkins, 15000);
	},
	error: function (error) {
	console.log(error);

	}
	});
	}
	var jenkinsDiv = $("#jenkins"), jenkinsError = $('#jenkins-error');
	jenkinsDiv.on('click', function () {
	$(this).hide();
	});
	jenkins();


	</script>
	</body>
	</html>