examples/oembed.html

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
  <link href='http://fonts.googleapis.com/css?family=Sintony:700' rel='stylesheet' type='text/css'>
</head>
<body>

<style>
    .alerta-div {width:100%; padding:20px;}
    .alerta-table {width:100%; border:1px solid lightgrey; text-align:center;}
</style>

<div class="mobile-alerts">Loading...</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<!-- Use http://localhost:8080/api/embed.js if you run docker image with alerta. -->
<script src="http://localhost:8080/embed.js"></script>

<script>
$(window).on('load', function () {

  // Use http://localhost:8080/api as endpoint, if you run docker image with alerta.
  //
  // $.alerta.defaults.endpoint = 'http://localhost:8080';
  // $.alerta.defaults.key = 'demo-key';
  // or
  $.alerta.defaults = {
      endpoint: 'http://localhost:8080', // oEmbed endpoint becomes http://localhost:8080/oembed
      key: 'demo-key'
  };

  function renew() {
    $('.mobile-alerts').alerta('http://localhost:8080/alerts/count?service=Mobile&status=open', {title:'Mobile Service'});

    setTimeout(renew, 30000);
  }

  renew();
});
</script>
</body>
</html>