A simple PUBNUB based HTML/JavaScript code to interact with

<html>
<head>
    <p>
        <button id=broadcast-enable class=broadcast-button>Enable Desktop Notifications</button>
        <span id=broadcast-ready>Loading...</span>
    </p>
    <p>
        <button id=broadcast-button class=broadcast-button>Broadcast HTML5 Desktop Notification</button>
        <input id=broadcast-text value='Hello Everyone!' />
    </p>

<div channel-name=notifications-channel segregate-notifications-by-page=false id=desktop-notifications-config></div>
</head>
<body>
    <script src=http://cdn.pubnub.com/pubnub-3.7.14.min.js></script>
    <script src=html5-desktop-notification-broadcasting.js></script>
    <script>(function(){
        function update_ready(enabled) {
            var ready = PUBNUB.$('broadcast-ready');

            if (enabled) {
                ready.innerHTML = 'Enabled';
                PUBNUB.attr( ready, 'class', 'broadcast-enabled' );
            }
            else {
                ready.innerHTML = 'Disabled';
                PUBNUB.attr( ready, 'class', 'broadcast-disabled' );
            }
        }

        update_ready(PUBNUB.notify.ready());

        PUBNUB.bind('mousedown,touchstart', PUBNUB.$('broadcast-button'),
            function() {
                return PUBNUB.notify({
                    image : 'http://cdn.pubnub.com/assets/pubnub-70x70.png',
                    title : 'PubNub Notification',
                    body : PUBNUB.$('broadcast-text').value || "empty message"
                });
            }
        );

        PUBNUB.bind('mousedown,touchstart', PUBNUB.$('broadcast-enable'),
            function() {
                PUBNUB.notify.enable(function(){
                    update_ready(PUBNUB.notify.ready());
                });
            }
        );
    })();</script>

<p><p>Powered by
<img src="https://cdn.evbuc.com/eventlogos/3970164/pubnub.png" width="75" length="50">

</body>
</html>