Slack Block Kit
Rich interactive UI is a crucial factor for friendly user experience, especially when the majority of bot users are familiar with webs and apps.
Block Kit is a UI framework for Slack apps that offers a balance of rich interactive and flexibility. Block kits can apply to messages and other surfaces, e.g., modals and home tab.
Note: If you also write LINE Bots, you may sense some similarity between Slack Block Kit and LINE Flex Messages.
Sending Hello World Block Kit Message
Blocks are visual components that can be stacked and arranged to create app layouts. You may check Slack's official doc, Building blocks, to understand the philosophy of building blocks. Visit Reference: Layout blocks if you want to see all possible blocks.
In the following, you can see a simple example.
module.exports = async function App(context) {
context.postMessage({
blocks: [
{
type: 'section',
fields: [
{
type: 'mrkdwn',
text: '*Hello,*',
},
{
type: 'mrkdwn',
text: '*World.*',
},
],
},
],
});
};
An Advanced Block Kit Message Example
When it comes to complicated blocks, we strongly recommend you to build and play with your block kits message in the Block Kit Builder. Then, copy the template into your project like the code below.
It demonstrates how to use the template from Block Kit Builder. Plus, we suggest you write a function to render the template with the model.
function blockTemplate1(user) {
return {
blocks: [
{
type: 'section',
text: {
type: 'mrkdwn',
text: `Hello ${user.name}, Assistant to the Regional Manager Dwight! *Michael Scott* wants to know where you'd like to take the Paper Company investors to dinner tonight.\n\n *Please select a restaurant:*`,
},
},
{
type: 'divider',
},
{
type: 'section',
text: {
type: 'mrkdwn',
text: '*Farmhouse Thai Cuisine*\n:star::star::star::star: 1528 reviews\n They do have some vegan options, like the roti and curry, plus they have a ton of salad stuff and noodles can be ordered without meat!! They have something for everyone here',
},
accessory: {
type: 'image',
imageUrl:
'https://s3-media3.fl.yelpcdn.com/bphoto/c7ed05m9lC2EmA3Aruue7A/o.jpg',
altText: 'alt text for image',
},
},
{
type: 'section',
text: {
type: 'mrkdwn',
text: '*Kin Khao*\n:star::star::star::star: 1638 reviews\n The sticky rice also goes wonderfully with the caramelized pork belly, which is absolutely melt-in-your-mouth and so soft.',
},
accessory: {
type: 'image',
imageUrl:
'https://s3-media2.fl.yelpcdn.com/bphoto/korel-1YjNtFtJlMTaC26A/o.jpg',
altText: 'alt text for image',
},
},
{
type: 'section',
text: {
type: 'mrkdwn',
text: '*Ler Ros*\n:star::star::star::star: 2082 reviews\n I would really recommend the Yum Koh Moo Yang - Spicy lime dressing and roasted quick marinated pork shoulder, basil leaves, chili & rice powder.',
},
accessory: {
type: 'image',
imageUrl:
'https://s3-media2.fl.yelpcdn.com/bphoto/DawwNigKJ2ckPeDeDM7jAg/o.jpg',
altText: 'alt text for image',
},
},
{
type: 'divider',
},
{
type: 'actions',
elements: [
{
type: 'button',
text: {
type: 'plain_text',
text: 'Farmhouse',
emoji: true,
},
value: 'click_me_123',
},
{
type: 'button',
text: {
type: 'plain_text',
text: 'Kin Khao',
emoji: true,
},
value: 'click_me_123',
},
{
type: 'button',
text: {
type: 'plain_text',
text: 'Ler Ros',
emoji: true,
},
value: 'click_me_123',
},
],
},
],
};
}
module.exports = async function App(context) {
const viewModel = {
name: 'Bottender',
};
context.postMessage(blockTemplate1(viewModel));
};
Interactivity in Blocks
Interactive blocks (e.g., buttons, drop-down menus, date pickers) are part of block kits. So you have to set up a webhook URL to receive payloads. Traverse to Slack Developer Console → \${YourApp} → Interactive Components
→ Interactivity
. And fill in your webhook URL.
Note:
- There are two kinds of webhook that need to handle on your Slack app configuration page. The first one is in the
Event Subscriptions
tab, and the second one is in theInteractive Components
tab.- By default, the webhook URL you need to fill in
Interactive Components
is likehttps://example.com/webhooks/slack
. And you can fill in the same webhook URL forEvent Subscriptions
andInteractive Components
.- If you are not familiar with
Event Subscriptions
, you may refer to another Bottender doc, Slack Setup. You must complete the settings ofEvent Subscriptions
to make your bot work.