How to write beautiful, interactive Slack posts (Slack Block Kit)
Have you ever wanted to convey information via Slack in a more visually appealing way? Slack makes it super simple to add emphasis to your messages in typical ways (bold, italics, underline, strikethrough, etc.), but fails to go beyond the basics, and doesn’t even implement the full range of formatting options available in the markdown concept that it utilises.
What they do to bridge this gap however, is to provide a tool called Block Kit. Think of Slack’s Block Kit as a tool to create beautiful and interactive messages, 1 block at a time, and then send them to whoever / wherever you want, all from a web interface.
Benefits of a Slack Block
The first and most important benefit of a Slack Block is the visuals it enables you to create. Visuals are massively important when it comes to increasing engagement and ensuring your messages get seen, and by embedding images and varying layouts you can keep your posts fresh and eye-catching.
Arguably the most important improvement to visuals is the ability to embed images. Typically with Slack, any image placed into a message will appear as a thumbnail at the bottom of a message, with limited / no ability for you to decide how and where it gets displayed. With Block Kit, you’re in complete control over where the images go, and can embed different sized images (and even hyperlink them) in order to really jazz things up.
In addition to getting your messages seen, you can also help ensure they’re interacted with. Block Kit allows you to embed interactive elements, such as buttons and text inputs, or even full forms, to make it incredibly simple for your readers to interact with your message. Doing this means your users are kept in the context / window of Slack, and makes them much more likely to complete an action than if they have to click a link to an entirely different website.
Making a Slack Block
Block Kit works by structuring your message into blocks, using a text format called JavaScript Object Notation, or JSON for short. If you’re in the world of engineering you’ll no doubt be more than familiar with JSON, but if you’re not then don’t worry, it isn’t especially hard to learn (here’s a tutorial to follow). Additionally Slack provide a simple GUI to help you build your messages, so you may be able to get by without knowing it, especially if you’re only looking to make simple blocks or to edit the contents of existing ones.
As you change your code, you’ll see that not only does the preview on the side change, but so too does the URL. This is because rather than have you log in and store your Blocks, Slack’s Block Kit instead stores all of the information in the URL itself. This means that you can easily share a Slack Block with anyone by sending them the (often incredibly long) URL. Even better: they can open it up, make changes, and it’ll only affect their version, which they’ll then have a new URL for.
Tips
Block Kit is a fantastic resource, but it isn’t exactly user friendly. Here’s a few tips and tricks I’ve learnt from my short time experimenting with it.
Bookmark your Slack Block URLs
Because the URL is updating every time you make a change, there is a super simple way to keep your Slack Blocks: bookmarking.
Rather than downloading the JSON code and storing it somewhere, simply bookmark your Slack Block with a helpful title. Next time you want to make a Block, open up whichever one most closely resembles the new Block you want to make, start editing, and then bookmark the finished product.
Do remember though that if Slack were ever to change the process, or if you were to lose your bookmark, then that Slack Block would be very difficult to recover. So perhaps save a copy of the Slack Blocks that you absolutely cannot afford to lose.
Never start from scratch
The thing about Slack Blocks is that whilst they provide fantastic functionality not normally available in Slack, they take an incredibly long time compared with the alternative. It’s obviously not worth an hour of effort to make a post that only 4 people take 30 seconds to read, so a big tip I have is to never start from scratch.
When you need a Block, go back through your bookmarks (see above) and find one that most closely resembles the Block you wish to make. Next, make the changes required to get what you need. Finally, bookmark the modified version so that it’s ready for you to use again next time.
By following this process you take your Block construction time down from minutes/hours to seconds/minutes, and build a library of great looking Blocks whilst you’re at it.
Images (and their sizes)
Whilst Slack don’t publish official advice on what size to make your image, I’d recommend going big and allowing it to be scaled down. I typically make my images 1,200px wide, which is much bigger than they’re ever likely to be displayed.
Once you’ve created your image, you’ll need to upload it to an externally visible image host like Imgur, in order to embed it into your Blocks.
Send it to yourself first
You might think you’ve created something truly wonderful, but whilst the Block Kit preview is helpful, I’ve found it only mostly shows you how it’ll look on Slack. For a more accurate representation and to make absolutely sure there aren’t any spelling mistakes, you can set yourself as the target when sending a Block to Slack, which will allow you to preview it exactly as it will appear in a channel.
Break the JSON to stop it updating
Whilst the live updating preview window can be super helpful for seeing how your changes will look in a real message, it can also be frustrating when it blocks you from making changes whilst it re-renders the preview. To “pause” the live preview from updating, just throw an extra } at the end of the code, which will cause it to be invalid JSON and thus stop the preview from working or updating.
Just don’t forget to remove the } once you’re ready for it to update, and especially before you send it!
We’ve only scratched the surface here
Slack Blocks can become incredibly complicated and incredibly powerful tools that form integral parts of (or even entirely replace) your existing workflows. I’ve not gone into detail on the various powerful features they offer here because it would be a huge topic, but what I will do is link you to the official Slack documentation, which will take you through various tutorials on Block building and interactivity, as well as a bunch of templates to help you get started.