Turn your Slack announcements into mini-applications with buttons, rich data, and more

When it comes to Slack communities, I always presumed that what you see is what you get to work with: text, links, images, all presented in uniform paragraphs. This results in feeds such as this:

However, you might have noticed that Slack applications seem to have a wider array of tools at their disposal. If you've seen one in action, you might have noticed text-entry boxes, buttons, and other interactive and stylistic elements. What seems to be less well known is that you can take advantage of the tools for Slack app developers to publish your own interactive message, without having to code. Here's an example of one of my recent posts in the very same channel as above:

Leaving the content itself aside, you'll agree that a message formatted like this will draw more attention. More importantly, it will help readers navigate it more efficiently. This gives them an improved experience - even of something as simple as a Slack post - and demonstrates a level of care for them. And we’re just scratching the surface here as there is a multitude of customisation options available.

How to build stand-out Slack messages

1. Head to Slack Block Kit Builder and bookmark it - it's surprisingly hard to find just by googling it.

2. Select a template that best suits your purpose.

3. Modify the template in the code panel to the right. You won't have to know how to code, but by reading it and trying a few modifications, you should quickly get the hang of what each line means and where a block starts and ends.

   • To add a new block, place your cursor in the appropriate place in the code and select an element from the toolbar on the left. Sometimes I also open multiple templates in separate browser tabs and copy between them.

   • It is impossible to upload files such as images or gifs into the editor. Instead, you'll need to upload them elsewhere on the internet and paste the link to the image into the correct place in the code block. For the above example, I uploaded the gif as part of a post on LinkedIn and then referenced that in the image code block. Note that the image has to be uploaded where it is visible to the public, so putting it on your personal cloud drive won’t do the trick.

   • To add some formatting to your text, use the mrkdwn syntax.

4. Back up what you create regularly. There is no saving of any kind in this tool. Once you close your tab or if you've made a mistake you can't recover from, you'll have to start afresh. To back up your work, click on Copy Payload and paste it into any text editor (I keep mine in Apple Notes).

5. Collaborate with others. The entire payload (the code you use to create your message) is ‘stored’ in the URL. If you'd like others to review or iterate on what you have made, simply send them the URL of what you have worked on. This won't allow for live collaboration as in a Google doc but it will let them recreate what you have built.

6. Test and send your message. Rather than copy-and-pasting your message, you will need to send it through the Block Kit Builder interface. If you are part of several Slack workspaces, be careful to select the correct one at the top right. Once you hit Send to Slack, you'll be asked which channel to send your message to. I highly recommend sending it to yourself first for testing. Once you're happy with what you see and you’ve convinced yourself that all the interactivity is working as it should, you are ready to share it on other channels.

Pro-tip: If you are using your message to guide readers to a website, I recommend making button clicks trackable. By modifying button URLs with a free(-mium) tool such as Rebrand.ly, you'll be able to measure the success of your message - how many readers clicked on which buttons? Which country are they in? and so on.

One distinct observation I made after sending announcements this way was that I received more questions about how to create these messages than about the actual content. It got people talking, and they were clearly delighted. I hope this guide will help your message make an impact too.