keynote.js

function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.head;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}
var afterPusherLoad = function() {
   // Here, do whatever you want

       // Enable pusher logging - don't include this in production
    Pusher.logToConsole = true;

    var pusher = new Pusher('', { // Your channel
      cluster: 'eu',
      forceTLS: true});

    
    var channel = pusher.subscribe('my-channel');
    channel.bind('my-event', function(data) {
      heartrateDiv.innerHTML = data.message;
    });

};


var playerPopup = document.getElementsByClassName ("player-popup")[0];
var heartrateDiv = document.createElement("div");
heartrateDiv.innerHTML = "_";

heartrateDiv.style.cssText = "position:absolute;top:25%;margin-left:calc(75% + 200px);width:10%;height:150px;background-color: white;font-size:80px; border-style: solid;border-width: 5px;";
playerPopup.appendChild (heartrateDiv);


loadScript("https://js.pusher.com/4.3/pusher.min.js", afterPusherLoad);