Slaask x Slack

Upgrading our app’s interactivity with Block Kit

In 2015, we built our Slack app and named it Slaask. It’s a collaborative, multichannel, and multilingual tool designed for rallying around customer support in Slack.

We recently released the biggest update ever using Block Kit — the UI framework for Slack apps.

Block Kit makes it easy to:

• See and interact with information at the beginning of a conversation.
• Access ephemeral information with the /slaask slash command.
• Take actions — like close conversation, send meeting invites, predefined responses or chat transcripts, and more!

Prototyping our app was simple, since everything is managed in JSON. For people who are building on Slack with Block Kit, design and test it in Block Kit Builder.

How we built it

First, as we were already an existing Slack app, we created our JSON blocks using Block Kit.

Prototype of our Slack app in Block Kit Builder

Second, we generated JSON for different blocks by creating a Ruby object for each block. This avoids duplicating code and ensures that the block will have the correct parameters — and we’ll avoid an API error.

Before sending the block, we transform the Ruby object into JSON.

Next, we identified the different problems we’re trying to solve for users. In our app, we display contact information in a corresponding channel. This information is only visible to the Slaask user. Our goal with Block Kit is to display agent options in a user-friendly way.

Slack app message before Block Kit

Slack app message after Block Kit

The Block Kit anatomy of our Slack app

Block Kit allowed us to completely rethink the layout of Slack messages, and we reorganized our app’s messages into sections — making it easier to parse information.

The first section shows contextual information — status and location. The refresh button updates this information on demand.

Next, we added buttons that reload a section with new fields, using section block’s field element. We also added profile picture as an image block.

In the third section, we rebuilt our automatic translation feature. Here you can see the translation status, then pause or resume the translation.

Next are actions, which can be used to close the current conversation — a frequently used action. We also include a Show Actions button that displays a dropdown menu of possible actions for a channel. This message is dynamic and depends on the selected action.

For instance, if a user selects the Meeting request action, a dropdown will appear and give meeting detail options

Thanks to this change, users save time and get a simple, user-friendly experience.

Code sample for managing meeting parameters

Incorporating slash commands

Before Block Kit, we weren’t using Slack slash commands to their full potential. With Block Kit, we added helpful actions that allow Slaask users to close a conversation, edit a contact’s details, etc.

Every slash command creates a block in response. Using /Slaask-response shows our predefined response block.

Note: The /Slaask command redisplays the contact information message at any point in a conversation. When an action is taken from this message, we reference the info stored in the block_id of each block:

For instance, the above code could gives us something like this: actions_block::true::Airtable::false

We’d love to see more blocks in the future with even more customization for new fields and formatting options. Our users already love our new Slack app UI, and we hope you do, too!

Slaask is one of the first Slack apps. We now serve small, medium, and large companies in over 60 countries. Slaask is fast-growing and helps organizations bring customers and teammates together in one centralized place — Slack.