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 very simply 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 main (only) 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);