Turn boring email notifications into actionable Slack conversations

Yesterday I was discussing with a client answering some of their questions about our 3scale API management solution. Among many other things they were curious about our “alert system” and how could we notify them in a case of high traffic on their API. Simple! We send you an email if someone is about to reach their API quota.

Almost at the same time I was answering this question I think I heard myself saying… “wait, what?! emails?!”. Kind of apologizing we were not offering a more modern solution.We ended the call, and I was left with a furious willing of hacking around to see how we can improve this experience. I had to find out! This is the story of my morning hack.

Expected result in Slack

Connecting blocks🔌🏗

I don’t know about you, but when I think about notifications, I usually think about Slack. That’s where I try to gather all the automatic reporting for the tools I use. This hack will send notifications to Slack.

Also, sadly, our engineers won’t have time to build a nice alert API so I will have to work with the source I have: an email.

There are many mail APIs like Context.io or Nylas that will let you get emails and parse them, but that was a lot of overhead to deal with (OAuth, filtering emails, …). The best solution would be to send notifications to a designated email address and parse them there.

Zapier offers exactly this feature with their Parser product. They give you an email address where you can send all emails to be parsed. It includes a parsing UI where you define variables you want to extract.

Finally, to have more flexibility on the message formatting we won’t plug directly Zapier to Slack but instead, use Zapier webhook action to send extracted data to an app hosted on Glitch.

We are building a complete serverless solution 😇

Webhook integration form on Slack

Setup Slack 🤖💬

To be able to send a message to your Slack team we would need to created an Incoming Webhook integration. Follow this link, it should guide you to configure the integration. There, You will define on which channel the notification will be sent. When you are done, keep the Webhook URL handy, we will need later.

Zapier parser UI

Setup Zapier parser and trigger 📥⚙️

On Zapier, we will start by configuring the email parser here. Once you have an address, send there an example of your notification email so we can setup a template. In few seconds the email should be received by the parser and you should see it appeared. Then, highlight variables you want to extract from the email and give them names.

Once template is defined, we will configure a Zap to connect the email parser with our app. In the Zap, select Email Parser app to trigger with the New Email action. If you test this step, you should be able to retrieve the message you previously sent to Parser email address.

The app 🎏💻

The app will expose a POST route /hook, where Zapier will send a request containing the extracted data. You can check my example on Glitch and remix it with your own variables.

In the .env file, you should add values to the variables. Get the Hook URL we previously created on Slack, and add some personality to your notifications adding a username and icon. The ZAPIER_SECRET variable should be a random string, we will use it to identify that the request comes from Zapier webhook.

The message formatting is happening on the slack.js file. You can check the Message Builder from Slack to run formatting tests.

Webhook configuration on Zapier

Add webhook action to Zapier 🎣⚙️

Now, that our app is up on Glitch we can add an action to our Zap.

Add a Webhook action of type POST pointing to the URL https://YOUR_GLITCH_APP_NAME.glitch.me/hook

In should return a JSON payload. Then define the variables that will be sent to the app, and map them we the extracted ones.

Secret header for security

Finally, for security purpose, we will define a header named X-zapier-secret with the same value as the ZAPIER_SECRET environment variable we defined earlier.

Test and enjoy 🎉🎊

And this it, you are done now 👍Test the flow and see if the message renders the way you want. When you are happy with the result, turn the Zap on.

Expected result on Slack

Now you can ignore email notifications as they are all sent to Slack in a beautiful and comprehensive way.

If you want to enhance this flow we can later add actionable buttons, but that needs a bit more work.

Let me know what you think of such hacks!

Image by Markus Petritz found on Unsplash