Build and Post Messages to Slack Using Javascript and the Slack API

Photo by Scott Webb on Unsplash

Most (if not all) work environments use a central communication tool. Employees can use it to talk about different projects, discuss company issues, or even talk about personal stuff. We may need other applications and services that are part of the environment to communicate with it.

In our case, we use Slack, and in this story, we will show how to build and post a message using its API with two different approaches.

Prerequisites

To make requests against the API it is necessary to have a valid token. To get this token you must have a Slack App (bot user). Once created, you can get the token in the OAuth & Permissions section, within the App’s management page. In case you have not configured the mentioned environment, use the following tutorial.

First Approach: Attachments With Legacy Fields

This is a quick but limited solution. A Slack message can be defined with a limited number of prefixed fields (title, text, author name, etc) that are now considered legacy. For this reason, this approach does not allow certain functionalities such as interacting with the messages.

In the following example, we send a message using legacy fields and the standard fetch method (using the node-fetch library).

Executing the code above we get a message like this:

In the code above we can distinguish the following parts:

• Payload: It has two properties, the channel where you want to send the message, and the attachments.
• Fetch method: To send the message, a POST request is made to the Slack API endpoint chat.postMessage. To make the request work, you must pass the token of the Slack App through the Authorization header.

Notice that Attachments are now considered deprecated. These old features will continue to work, but apps using them will miss out on the improvements provided by the newly available API: blocks.

Second Approach: Blocks

Blocks are components that the user can combine to create rich, interactive messages.

In the following example, only the payload object is shown, as it is the only thing that changes from the previous code. The fetch part is the same and does not undergo any modification.

Applying the changes to the payload would result in something like this:

There are different types of blocks that can be nested and combined to build the desired message. Also, the text contained in certain blocks can be formatted using Markdown.

To ease the use of blocks, Slack website provides an application called Block Kit Builder. This app can be used to prototype the message designs or to check the validity of the blocks JSON.

Color Workaround: Attachments + Blocks

Blocks have some limitations: we can’t define the colour of the message as we did with attachments. To solve this, we can mix both approaches using blocks inside the attachments.

In the following example, we can see the changes in the payload to enable the use of the color field and the blocks.

And this is the final appearance: a customized message, structured using blocks and with the desired colour.

Summing up

There are two ways of formatting and sending messages to Slack. The first is deprecated but still valid. If this is what you use, you can check this tutorial to migrate to blocks. The recommended way is to use blocks (the second approach) and if you want to apply colour to the messages, use the workaround.

In our case, using GitHub Actions we notify Git events (pull request, push, etc) to one of our Slack channels. In the following image, you can see how one of our notifications looks like.

Blocks API is an improvement over attachments. Although it can be more complicated in comparison, it is much more flexible. In addition, it allows new functionalities such as adding interactivity features to messages.