How to create zoom like response in slack bot message using block kit?

Question

I have used zoom integration with slack. When I send /zoom command the bot responds with a new meeting link in a box layout that looks really good.

Note the bordered box below "Call"

However I am not able to create similar box layout with border and section in my own slack bot. Which block kit syntax should I use to achieve the same design?

At max what I am able to achieve is like the below:

I did not find any relevant example in the documentation as well.

Answer 1

There are multiple ways suggested in slack's official documentation to format Messages in responses.

For instance:

{
"blocks": [
    {
        "type": "section",
        "text": {
            "type": "mrkdwn",
            "text": "Hello, 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",
            "image_url": "https://s3-media3.fl.yelpcdn.com/bphoto/c7ed05m9lC2EmA3Aruue7A/o.jpg",
            "alt_text": "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",
            "image_url": "https://s3-media2.fl.yelpcdn.com/bphoto/korel-1YjNtFtJlMTaC26A/o.jpg",
            "alt_text": "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",
            "image_url": "https://s3-media2.fl.yelpcdn.com/bphoto/DawwNigKJ2ckPeDeDM7jAg/o.jpg",
            "alt_text": "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",
                "url": "https://google.com"
            },
            {
                "type": "button",
                "text": {
                    "type": "plain_text",
                    "text": "Ler Ros",
                    "emoji": true
                },
                "value": "click_me_123",
                "url": "https://google.com"
            }
        ]
    }
]}

You can use these components to design your own experience in response.

Further reading: https://api.slack.com/messaging/composing

Answer 2

I think the elements you are referring to are produced by the Call API

It doesn't seem that it is an available block for use in message building.