Turn boring email notifications into actionable Slack conversations
Tags: zapier, email, hackathon, glitch
Published: 2017-11-16 22:24:34

---
title: "Turn boring email notifications into actionable Slack conversations"
published: true
tags: zapier,email,hackathons,glitch
canonical_url: https://hackernoon.com/turn-boring-email-notifications-into-actionable-slack-conversations-3c6b1177e1e1
---

Yesterday I was discussing with a client answering some of their questions about our [3scale API management](http://3scale.net) 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.

![](https://cdn-images-1.medium.com/max/1024/1*bc01avAKIn8kMyN7XZ6s4A.png)<figcaption>Ugly email notification</figcaption>

![](https://cdn-images-1.medium.com/max/461/1*7pX-AQdOPIjLaUb0Dlamrw.jpeg)<figcaption>Expected result in Slack</figcaption>

#### Connecting blocks🔌🏗

I don’t know about you, but when I think about notifications, I usually think about [Slack](http://slack.com). 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](http://context.io) or [Nylas](http://nylas.com) 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](http://zapier.com) offers exactly this feature with their [Parser](http://parser.zapier.com) 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](http://glitch.com).

We are building a complete serverless solution 😇

![](https://cdn-images-1.medium.com/max/1024/1*EIYMhfIow0kHz_gmfOJyng.png)<figcaption>Webhook integration form on Slack</figcaption>

#### 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](https://my.slack.com/services/new/incoming-webhook/), 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.

![](https://cdn-images-1.medium.com/max/1024/1*Z7gQW0QMmxTHXulWtxRI0g.png)<figcaption>Zapier parser UI</figcaption>

#### Setup Zapier parser and trigger 📥⚙️

On Zapier, we will start by configuring the email parser [here](http://parser.zapier.com). 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](https://glitch.com/edit/#!/email-to-slack-notification) 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](https://api.slack.com/docs/messages/builder) from Slack to run formatting tests.

![](https://cdn-images-1.medium.com/max/1024/1*A5w8rg_IrlmAwKMWXlM5wg.png)<figcaption>Webhook configuration on Zapier</figcaption>

#### 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](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.

![](https://cdn-images-1.medium.com/max/1024/1*WwPma046NW1DY1kwvfX-Rw.png)<figcaption>Secret header for security</figcaption>

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.

![](https://cdn-images-1.medium.com/max/452/1*VryUy0b0Gxr57rmceDHp1A.png)<figcaption>Expected result on Slack</figcaption>

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](https://api.slack.com/docs/message-buttons), but that needs a bit more work.

Let me know what you think of such hacks!