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.
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.
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.
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.
Meeting request
action, a dropdown will appear and give meeting detail optionsThanks to this change, users save time and get a simple, user-friendly experience.
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 theblock_id
of each block:
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.