Using Slack’s Block Kit Builder UI To Look Cool…Kinda
I’ve been preparing to do a job search for a few months so I frequent several developer Slacks to see what they have to say in channels like #gigs, #jobs, and #career-advice. Lo and behold one day I saw someone post a really nicely formatted message announcing their imminent job search and mind-blowing skillset.
I was really impressed that you could format a message within the Slack app with such a polished look…until I found out you couldn’t do it that easily. After several Google searches, I only knew of how to post those messages by using the Slack API, and I broke down and asked the original poster how they formatted their message so nicely.
Turns out you use Slack’s Block Kit Builder to get the job done. While I was crafting my message, I struggled a bit with figuring out how to format the message like I wanted so I thought I’d jot down some notes in case it benefits others in the future.
Logging Into Block Kit Builder
First, you’ll need to log into the Block Kit Builder, and this is where I was initially confused. Once I saw the login screen to Slack, I thought I was in the wrong place and went about scouring the internet for other options.
If you follow the main Block Kit Builder link, you’ll see the familiar screen prompting you to log in to a Slack workspace. Pick the workspace where you want to send the formatted message to and log in.
Now you’ll see an entirely new screen where you can assemble a formatted message from some JSON, just as you would if you were POSTing to the Slack API. I think the sample template is a pretty great one to work off of and it contains several of the elements I wanted to use in my message: dividers, buttons, and images.
The reviews section and those stars are a bit much, but I almost went down the path of rating my skills in certain areas and leaving those in there. You could choose another template or delete all of this one, but let’s stick with this in order to go over some of the basics and “gettr’ done” quick!
Post A Test Message
I was pretty nervous to test out sending a message to a Slack where I was trying to impress people in order to get a job, but that’s what your personal channel is good for. I know you can leave reminders in your channel that can be useful, but I’ve never used my channel for any meaningful purpose so far.
You can get the unique ID for your channel by copying the link from your desktop Slack client. I primarily use a desktop client for Slack, as I imagine a lot of people do. All you have to do is right-click on your name under “Direct Messages” and copy the link into a browser.
You’ll notice a string of jumbled letters and numbers after “/messages/” that you need to copy. This is your channel ID.
In the Slack Block Kit Builder UI, paste the channel ID into the bottom of the screen where there is a field for “Channel ID”.
{
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "testing"
}
}
]
}I erased all of the test message content except for one block with “testing” as text. In this way, I can quickly go to Slack and delete an errant message if I accidentally send it to the wrong channel. It would be much more embarrassing if I sent the default message with restaurant reviews in it, but “testing” I can handle.
Yay! My message posted and only in my personal channel. I went ahead and posted the full default template message just to see that everything renders properly, but you can trust Slack that it looks just like what the Block Kit Builder preview shows.
Format Your Message
{
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "Hello, all! It's time for me to make an attempt at wowing you so much you want to put some money in my pockets. I'm an experienced web developer of six or so years working with Drupal/PHP/JS for most of my career but more recently also React/React Native/Vue/Laravel work. I'd love to join your team of talented engineers and help you ship code!"
}
},
{
"type": "divider"
},
...First off, I wanted to introduce myself in some standard text. I might throw an emoji in there, but once formatted, it looks like any other Slack message you’ve written in the past with the addition of a nice divider. Nothing special, but a needed introduction.
Next, it was onto the actual links. The introductory text could be done in any Slack message, but the formatted button and image links can’t. I liked the spacing and layout for the three reviews and thought I could put links to my resume, blog, and GitHub in those areas. The rule of threes rules! However, I didn’t like the reviews ratings and stars so I deleted them.
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "*Review My Resume*\n ...words...\n...more words..."
},
"accessory": {
"type": "button",
"text": {
"type": "plain_text",
"text": ":scroll",
"emoji": true
},
"value": "click_me_123"
}
},This is where I noticed the first difference in text formats. Each row of restaurant reviews contains two columns, one of “type”: “section” and an accessory of “type”: “image”. When I tried to copy/paste a button in place of the image, I ended up with something but not what I wanted. Notice the "emoji: true line as well. That property isn’t really documented in the Slack Block Kit Builder docs but seems to be necessary to function properly.
Each Slack has a set of emojis you can use as well as any custom emojis people in that Slack group may have added. In this Slack, I wanted to have a document emoji or image for the resume so I tried typing :scroll into the text area and hoped I would see 📜 in the output. Since it is marked as plain_text the output is just :scroll in a button.
Switch plain_text to markdwn and be done with it you say? Well, it ain’t that easy, pal. If you try to do so, you will see an error message about failing to match the allowed schema. There goes me figuring this out really quickly without reading any documentation…oh well.
Block Elements Reference
It took me a little while of searching through the docs, but I found what I was looking for in the Button Element’s reference section.
“A text object that defines the button’s text. Can only be of
type: plain_text. Maximum length for thetextin this field is 75 characters.”
Hmm…then how did people post formatted button links with icons in them? Clearly not the way I was trying to do it…or is it? After searching the internet, I finally saw a link to Slack message with a button and emoji in the button text. It was aptly named “Simplest Example”, d’oh 🤦♂!
From that example, I thought I had to copy an emoji so I started looking for a “LinkedIn emoji” and of course, Google only tells me to not put emojis in my LinkedIn profile, lol, rather than showing me some sort of LinkedIn emoji I can copy.
So, I ended up copying the :scroll emoji from the Slack I wanted to post into, and that’s when I noticed my mistake. The emoji is surrounded by colons on both ends and not just at the start as I had thought. Every time I want to add an emoji while I type, I just type “colon+a letter” and see what comes up. I don’t notice much after I tab complete and didn’t see the extra colon at the end of the emoji declaration.
Turns out :scroll: Resume works, as I would expect, except the button is smaller than I’d like and without the image, the alignment of the left and right columns doesn’t look great. Maybe I should just use the button examples at the bottom of the default template message and get rid of the two-column section…
Putting It All Together
After a little bit of fiddling, I decided to go with three sections of text, three link buttons after the text, and some dividers thrown in to separate the sections. You can view the whole code in a Gist linked here…I’m not sure why the tabs/spaces/indents didn’t hold on that Gist, but figuring that out is for another future blog post, I guess.
Not revolutionary, I know, but the button links and a bit of formatting that can separate you out from the rest of the pack. I also tried to highlight some numbers with bolded text. As you can tell, I like words, but I hope my post isn’t seen as being too wordy.
One thing to note is that the emojis are dependent on the ones available in the Slack you are posting to. One Slack group I’m in has a dedicated :github: emoji that I wish was in another Slack. Instead, I chose :computer: for the “GitHub emoji” since that is a standard Slack emoji that I think every Slack group comes with by default. Make sure you post into your private channel first rather than copy/paste from Slack to Slack and see that the emojis you depend on aren’t available in some Slack groups.
Extra Credit
I like to think about big elaborate ideas, and my original intention here was to use the API and add interactions to the buttons. Maybe add a poll, maybe send the link to some interactive app telling you more about me? I don’t know, but that would be pretty cool, in theory.
Slack does have a whole section of documentation related to “interactive messages” that you can peruse and think up big ideas. If I don’t get a job soon, I might be back to tell you how to wow potential employers with some additional interactive foo 🕵.
P.S.: As I was closing the Block Kit Builder UI, I noticed that the URL stores all the needed information in the JSON payload area…which means you can share blocks just via the URL instead of copy/pasting the code into a Gist as I did. The URL is quite long, but I thought that was a cool feature to note.
