Google Meet ⇔ Slack integration

Today marks the 1–year anniversary of the launch of Google Meet ⇔ Slack integration 🎉 . The first version went live on 9th November, 2021 as a simple internal tool at Setu. 16 versions and one year later, it is installed on 30+ Slack workspaces by 80+ people all over the world!

Curious to know how the ride was? Let’s gooo! 🚀

So, Google Meet ⇔ Slack integration is a chrome extension that automatically updates your Slack status in real-time, when you join and exit meetings, even for unscheduled meetings or overflowing meetings. Take a look at the GIF below—

Idea behind it#

This all stemmed up when Vivek saw how Slack calls and huddles set a status to your profile, so that others know in a foolproof way, that you are in a conversation and may not be able to reply.

At Setu, Google Meet was used to the same extent or even more than Slack calls/huddles for communication, yet it lacked a foolproof way to let people know that you are in a meeting.

Google Calendar app in Slack does set your status when you are in a meeting but tumbles in these cases—

• when the meeting overflowed beyond the scheduled time

• when you join meeting links that are not scheduled on your calendar

• when you decide to skip a meeting

Initial cut - v1#

Putting these into perspective, drafting the idea and building an initial version started. v1 shadowed your meeting status in real-time, directly from your Google Meet browser tab.

To start with, users had to install a Slack app into their workspace and authenticate to get an API key for using Slack API.

Using Custom JavaScript for Websites 2 chrome extension, users needed to inject custom JS into the browser meeting tab to capture meeting start and end events.

However, Slack status couldn't be set directly from the browser due to CORS issue when using the Slack Status API. Using a proxy server circumvented the CORS issue by forwarding the Slack Staus API calls.

Snippet of the injected JS code—

Copy
function setSlackStatus() {
    var myHeaders = new Headers();
    myHeaders.append(
        "Authorization",
        "Bearer xoxp-xxxxxxxxxxxxx"
    );
    myHeaders.append("Content-Type", "application/json");

    var raw = JSON.stringify({
        profile: {
            status_text: "On a meet call • Reply may be delayed",
            status_emoji: ":eyes:",
            status_expiration: 0,
        },
    });

    var requestOptions = {
        method: "POST",
        headers: myHeaders,
        body: raw,
        redirect: "follow",
    };

    console.log("Fetch call made");

    fetch(
        "https://proxy-server.com/https://slack.com/api/users.profile.set",
        requestOptions
    )
        .then((response) => response.text())
        .then((result) => console.log(result))
        .catch((error) => console.log("error", error));

    console.log("Slack status set");
}

At this time, only a select few at Setu were using this.

Building an extension#

v1 really did the job, but was messy and not scalable. It needed a lot of effort to setup and we knew that the user experience can be improved 100x.

Building an extension helped us streamline the process and bundle all the necessary code to run in a background process of Google Chrome and reduce the setup to 2 simple steps.

Step 1 — Slack app

We built an interface to authenticate the user and generate the Slack API key in one go. User can just copy the API key and add it to the extension interface.

Step 2 — Extension interface

We built an interface in our extension to capture the Slack API key and the emoji the user wants to set as status.

The very first landing page of Google Meet ⇔ Slack integration was made.

For the very first time, we launched this to the entire team at Setu and setup a Slack channel for help.

First (and valuable) feedback#

Google Meet ⇔ Slack integration started picking up pace and people were using and loving it. The range of emojis that were used was pretty fun to watch 🤩🙃😋!

But hey, grass is always greener on the other side! A very important and valuable feedback we received, more like a feature request,

Slack Status doesn’t seem to clear if I close the meeting tab

Even though this is not a common pattern to exit a meeting but it opened up a plethora of possibilities into user thinking and understanding.

I shouldn’t have to learn new shortcuts to do what I could do without the shortcuts - GB

We pushed out the first update to the extension for clearing the Slack status on tab close. We achieved this by listening to tab close events in Chrome and clearing the status when the Google Meet tab is closed.

You can read more about Chrome Tabs here.

Where are we now?#

With time, major updates happened to the extension.

• New UI for the extension

• Super easy set up process with help along the way

• Emoji picker to select meeting emoji. Thanks to this open-source project.

We also open-sourced the code for this extension for people willing to contribute and report issues if any.

Overall, this has been a journey of learnings, interesting insights and sure, some sleepless nights, but in the end, it's all worth it! Thanks to Setuzens for constant support and love ❤️

If you are building anything on top of Google Meet, we hope our knowledge base will be useful to you!

Install the extension#

Get the extension from Chrome store. Spread the word if you love it! 📣

As always, please share feedback or report issues on our GitHub page.

Google Meet ⇔ Slack integration
Made with ❤️ at Setu