Untitled

<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>PUSH JS</title>
    <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  </head>

  <body>

    <div class="container">


      <form action="" method="POST" role="form">

        <div class="form-group">
          <label for="">Título</label>
          <input type="text" class="form-control" id="title" value="Novo Cliente" placeholder="Título do Lembrete" required>
          <label for="">Horário</label>
          <select id="feedback" class="form-control">
            <option value="600000">10 minutos</option>
            <option value="1800000">30 minutos</option>
            <option value="3600000">60 minutos</option>
      </select>
          <label for="">Minha Mensagem de Alerta</label>
          <textarea placeholder="Mensagem do Alerta" id="message" value="Você tem um novo contato no Whatszapp! Clique aqui!" class="form-control" required>Você tem um novo contato no Whatszapp! Clique aqui!</textarea>
        </div>
        <button id="enviar" onclick="myFunction()" type="submit" class="btn btn-success"> <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Avisa-me!</button>
      </form>
    </div>
    <script type="text/javascript">
      var myFunction = function() {
        confirm('Você tem um cliente para atender!');
      };
      var myImg = "/app/wp-content/uploads/2018/06/iconmonstr-whatsapp-2-240-1.png";
      $("form").submit(function(event) {
        event.preventDefault();
        var options = {
          title: $("#title").val(),
          delay: Number($("#feedback").val()),
          options: {
            body: $("#message").val(),
            icon: myImg,
            lang: 'pt-BR',
            onClick: myFunction
          }
        };
        console.log(options);
        $("#easyNotify").easyNotify(options);
      });
      (function($) {
        $.fn.easyNotify = function(options) {
          var settings = $.extend({
            title: "Notification",
            delay: 0,
            options: {
              body: "",
              icon: "",
              lang: 'pt-BR',
              onClose: "",
              onClick: "",
              onError: ""
            }
          }, options);
          this.init = function() {
            var notify = this;
            if (!("Notification" in window)) {
              alert("This browser does not support desktop notification");
            } else if (Notification.permission === "granted") {
              window.setTimeout(function() {
                var notification = new Notification(settings.title, settings.options);
                return notification;
              }, settings.delay)
              notification.onclose = function() {
                if (typeof settings.options.onClose == 'function') {
                  settings.options.onClose();
                }
              };
              notification.onclick = function() {
                if (typeof settings.options.onClick == 'function') {
                  settings.options.onClick();
                }
              };
              notification.onerror = function() {
                if (typeof settings.options.onError == 'function') {
                  settings.options.onError();
                }
              };
            } else if (Notification.permission !== 'denied') {
              Notification.requestPermission(function(permission) {
                if (permission === "granted") {
                  notify.init();
                }
              });
            }
          };
          this.init();
          return this;
        };
      }(jQuery));
    </script>
  </body>
</html>