SSO integration instructions

The HMC iFrame widget allows you to skip the programming and get into HearMeCheer in minutes. Great!

But you want to integrate deeper – to automatically use the logged in user name in the widget. This helps with moderation, ease of use and more.

And it’s simple. You just need to add some simple Javascript code to the page where the HMC widget. You tell us what the user’s display name is, a description and an ‘info’ string that could be anything. HMC will use this info to set a name for the user (the user can’t edit this name when SSO is used), and will show the description in certain other places.

HMC will also need to give this name and other information to other users of the widget (obviously) so that they can learn about who they are talking/cheering with. This means that you need to be careful to not leak private information. For instance you might want to record an encrypted string (JWT) with user ID information in it. This string may come back to you when you run stats, so may be helpful for support or marketing purposes.

Here is how we did it on a page at a site: This is for wordpress – where on the site we were working with, we found the logged in name and logged in username from those selectors. You may have to put a delay in, or wait until the HMC init.js script is loaded.

<script>
jQuery( document ).ready(function() {
    var loggedInName = jQuery('.display-name').html()
    var loggedInUser = jQuery('.username').html()
    if (loggedInName && loggedInUser) {
      console.log( loggedInName );
      console.log( loggedInUser );
    }

    window.hmc__setParticipantName(loggedInName, loggedInUser);

});
</script>

You may also try something a little more sophisticated – wait till the HMC script loads:

<script>

function sendInfo() {
  var loggedInName = document.querySelector('.display-name').innerText;
  var loggedInUser = document.querySelector('.username').innerText;
  console.log({ name: loggedInName, user: loggedInUser });
  window.hmc__setParticipantName(loggedInName, loggedInUser);
}

(function () {
  var script = document.createElement('script');
  script.src = "https://view-staging-hmc.herokuapp.com/init.js";
  script.async = true;
  script.onload = sendInfo;
  document.body.appendChild(script);
})() 


</script>

The call is:

// Tell HMC about the user's displayName, info (not shown by HMC) and description 
// all arguments are strings
func hmc__setParticipantName(name, info, description);

Rooms:

HMC now allows room creation/joining in the client JS.

window.hmc__setParticipantRoom(roomID);

Our Client side script (as of Mar 2022)

Please get the latest by inspecting an instance on your HMC install.

/* eslint-env browser */
(function () {
    function findIframe(callback, attempt) {
        if (typeof attempt === 'undefined') {
            attempt = 1;
        }

        var el = document.getElementById('hmc-app');
        if (el && el.src && el.src.indexOf('https://view.hearmecheer.com') === 0) {
            callback(el);
            return;
        }

        if (attempt > 5) {
            callback(null);
            return;
        }

        // exponential backoff: [ 200, 400, 800, 1600, 3200 ]
        var timeout = Math.pow(2, attempt) * 100;
        setTimeout(function () {
            findIframe(callback, attempt + 1);
        }, timeout);
    }

    var iframe = null;
    var initialMessageSent = false;

    var participant = {
        name: '',
        info: '',
        partyRoom: '',
    };

    function sendMessageToApp() {
        initialMessageSent = true;
        iframe.contentWindow.postMessage(
            {
                hostHref: window.location.href,
                participantName: participant.name,
                participantInfo: participant.info,
                participantParty: participant.partyRoom,
            },
            'https://view.hearmecheer.com',
        );
    }

    window.hmc__participantInit = function (config) {
        participant = Object.assign({}, participant, config);
        if (initialMessageSent) {
            sendMessageToApp();
        }
    };

    window.hmc__setParticipantName = function (name, info) {
        window.hmc__participantInit({ name: name, info: info });
    };

    window.hmc__setParticipantRoom = function (roomId) {
        window.hmc__participantInit({ partyRoom: roomId });
    };

    findIframe(function (frame) {
        if (!frame) {
            // did we somehow load too early or is the frame not present?
            console.warn('HMC Embed Init Script could not find iframe. Things might not work as expected');
            return;
        }

        iframe = frame;
        var timerId = null;

        frame.addEventListener('load', function () {
            if (timerId) {
                clearTimeout(timerId);
                timerId = null;
            }
            sendMessageToApp();
        });

        // if the frame loads before our event listener, the event won't fire
        // try sending it forcefully after 5 seconds
        timerId = setTimeout(sendMessageToApp, 5000);
    });

    if ('' && '') {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src =
            'https://view.hearmecheer.com' + '/assets/' + '' + '/' + '' + '/scripts.js';
        script.async = true;
        document.body.appendChild(script);
    }
})();