Solving the ‘Matt Problem’

It’s been a big couple of years at Omada Health. Billions of steps tracked, millions of weigh-ins, two funding rounds and a whole lot of hiring. According to our company intranet, 70% of the company joined after me and I’ve only been here a year. With so many new names to put faces to, you start to run into something I like to call, the ‘Matt Problem’. The ‘Matt Problem’ arises when you receive an email simply signed:

Thanks,
Matt

and you have to work out which of the twelve Matts at your company sent it.

We tried giving each Matt a nickname. One Matt had a large beard – Matt, the Beard, another had longer than average hair – Matt, the Hair. But what happens when the next Matt joins the team with even longer hair and larger beard? Matt the Hairiest didn’t stick.

So at our recent company hack day, I tried to tackle this problem by making our own internal Rapportive/Connectifier/FullContact style Google Chrome Extension for Gmail. All of these extensions display extra profile information about the person sending you email right in your inbox. I thought if we could show a smiling profile picture together with their role at Omada Health and a brief introduction, it would bring our community closer, one Matt at a time.

This approach took advantage of the fact that everyone at Omada Health uses Gmail for email, Chrome for web browsing and Parklet to store our profile information.

Without any help from our marketing department, I seamlessly combined ‘Chrome’ and ‘Omada’ to name the project ‘Chromada’ and, of course, created an equally terrible logo.

Chromada Logo
So let’s write some code!

The good news is the team at Streak have released a library called InboxSDK that makes this possible in under fifty lines of JavaScript. Dropbox uses it for their Gmail integration, which according to the Chrome Web Store, has over 3 million active weekly users. The main benefit of the library is that it allows developers to build apps on top of a stable API, rather than having to make changes every time Gmail changes its DOM structure.

Every Chrome extension is essentially a group of JavaScript and CSS files that are loaded by the browser as described in the extension’s manifest.json. The following example describes an extension that will load the InboxSDK library and the Chromada application js and css files when the user visits Gmail (https://mail.google.com). We also added Parklet (https://app.parklet.co) to the permissions array which allows the Chrome extension to make requests to retrieve employee profile information.

{
  "manifest_version": 2,
  "name": "Chromada",
  "version": "0.0.1",
  "icons": {
    "16": "images/omada-icon-16.png",
    "128": "images/omada-icon-128.png"
  },
  "permissions": [
    "https://mail.google.com/",
    "https://app.parklet.co/"
  ],
  "content_scripts" : [
    {
      "matches": ["https://mail.google.com/*"],
      "js": ["inboxsdk.js", "chromada.js"],
      "css": [ "styles/chromada.css" ]
    }
  ]
}

Next we use the InboxSDK API to load the library. An App ID is required here, so follow the instructions in the documentation to register for one. Once the SDK is loaded, we can use the Conversations.registerThreadViewHandler(handler) method to add a handler that will be called when the user navigates to an email thread in Gmail. The ThreadView object that is passed as an argument to the callback gives us two functions that we are interested in. First, ThreadView.addSidebarContentPanel() lets us add the Chromada html element to the sidebar of the Gmail thread view. Then, we use ThreadView.getMessageViewsAll() to iterate through each email in the thread and listen for individual message state changes. MessageViews change from hidden, expanded and collapsed as the user clicks on each email in a thread. We use this to ensure the employee’s profile in the sidebar stays in sync with the email the user is currently reading.

InboxSDK.load("1.0", "YOUR_APP_ID_HERE").then(function(sdk) {

      // the SDK has been loaded, now do something with it!
       sdk.Conversations.registerThreadViewHandler(function(threadView) {

        var chromadaDiv = document.createElement("div");
        chromadaDiv.setAttribute("id", "chromada");
        threadView.addSidebarContentPanel({
          el: chromadaDiv,
          title: "Omada Health",
          iconUrl: chrome.extension.getURL("images/omada-icon-38.png")
        });

        threadView.getMessageViewsAll().forEach(function(messageView) {
          messageView.on("viewStateChange", function(event) {
            updateEmployeeProfile(event.messageView);
          });
        });
      });
    });

Once we have a reference to a DOM element in Gmail, we can display anything we like. Chromada uses the email address of the sender to look up the full employee profile information in our company intranet, Parklet. A name, title, start date and profile picture can then be added to the sidebar panel. Here’s a screenshot featuring a smiling colleague:

Chromada screenshot

The Chrome Web Store makes distributing private Chrome extensions simple for Google Apps for Work users. On the Developer Dashboard, just select the option to restrict visibility to everyone with an omadahealth.com email address. Then it’s a simple one click install.

Deployment settings

After a quick demo at the following all hands MMM (Monday Morning Meeting) and a follow up email to all@omadahealth.com, Chromada was launched. One month later, almost three quarters of the company are weekly active users and Matts all around the office are no longer strangers.

Chrome Web Store screenshot

One thought on “Solving the ‘Matt Problem’”

Leave a Reply

Your email address will not be published. Required fields are marked *