loading...
Cover image for How to automatically update your Slack status when you join a Zoom meeting

How to automatically update your Slack status when you join a Zoom meeting

natterstefan profile image Stefan Natter πŸ‡¦πŸ‡ΉπŸ‘¨πŸ»β€πŸ’» ・3 min read

Chances are very high these days (among others thanks to COVID-19), that you are using Zoom and Slack in your company. Wouldn't it be nice, if we could connect those two tools and automate the Slack status based on your Zoom presence state? πŸ€”

That's what we've discussed at Lovely Systems in our last retrospective. People were missing the current state (eg. "in a meeting") when a team-mate did not respond (quickly).

Thanks to the restrictions on outdoor activities in Austria πŸ‡¦πŸ‡Ή, I had the time to wrap my head around this idea and created a tool for it. πŸ’‘

Meet the "Zoom-Slack-Status-Updater" (MIT). It is

  • open-source
  • supports multiple Slack workspaces
  • can be hosted on now.sh
  • and is quickly set up.

I'll guide you through the process, so you can have your own. Let's jump right into it.

What you need

  • a Zoom App
  • a Slack App
  • and a ZEIT account

(Note: the steps are also described on GitHub)

First, make sure you have cloned the source code, as well as now and all dependencies installed.

git clone https://github.com/natterstefan/zoom-slack-status-updater
npm install -g now
yarn # or npm i

Setup & Deployment

Step 1 - Setup now.sh

  1. Create a ZEIT account
  2. and log in with now login in your terminal

Step 2 - Setup Slack

  1. Create a Slack App for your workspace(s)
  2. Grant each app the users.profile:write privilege in User Token Scopes in the OAuth Tokens & Redirect URLs view, before clicking on the "Install App" button.
  3. Copy and paste each OAuth Access Token into the configuration file created in the subsequent step.

Alt Text

Step 3 - Configure App

  1. Duplicate the example config and rename it to slack-status-config.js. This should happen automatically thanks to a postinstall script.
  2. Create a config object for each slack workspace you want to update when a Zoom meeting starts.

You can either use now secret for the token values, or copy the token string right into the workspace config. I used the secret option described below (this is the reason why the checked-in now.json is opinionated and includes already one secret):

now secrets

When working with now secret you need to do the following for each secret (aka Slack app token):

Step 1 - create a secret

now secret add SLACK_TOKEN_1 "xoxp-xxx-xxx"

Step 2 - add the secret to now.json

  "env": {
    "SLACK_TOKEN_1": "@slack_token_1"
  }

Step 3 - add process.env.<secret name> to your configuration file

  {
    name: 'Slack Workspace 1',
    token: process.env.SLACK_TOKEN_1,
    ...
  }

Step 4 - Deploy App to now.sh

# example questions when setting up the now project for the first time
# What’s your project’s name? your-app-name
# In which directory is your code located? ./
now

This will guide you through the process of creating and deploying the project to now.sh. Remember the created URL. You are going to need it in the next step for the ZOOM app.

Tip: Do not use an obvious name for your now.sh URL here, something random or other people could mess with your Slack status. πŸ˜†

Step 5 - Setup Zoom

Create Webhook Only Zoom App

Create a new (or use an existing) "Webhook Only" Zoom app with your Zoom account. Even if you have added multiple Slack workspaces, you just need one Zoom app.

Fill out the required information and activate Event Subscriptions. Add
the User’s presence status has been updated event type and the generated
now.sh domain for Event notification endpoint URL.

Setup Zoom App

You can read more about it setting up the App here.

Step 6 - Test :)

Now, open both Zoom and Slack and watch the status change when you start or join a meeting.


πŸ”₯ Stay up to date and subscribe to my newsletter on newsletter.natterstefan.me. πŸ”₯

Posted on by:

natterstefan profile

Stefan Natter πŸ‡¦πŸ‡ΉπŸ‘¨πŸ»β€πŸ’»

@natterstefan

I am interested in and talking about JavaScript, ReactJS, NodeJS, CSS, and Software Engineering | πŸ“§ Weekly NL Series: https://newsletter.natterstefan.me

Discussion

markdown guide