Search code examples
slackslack-apislack-block-kit

Slack API: How to add user avatars in message when they click a button?


I think there's something in block kit documentation I haven't read yet, but I'm curious how one could display user avatars in a block like shown in the sample image below? Cheers.

enter image description here


Solution

  • This template is literally available in App Templates of Block Kit Builder

    https://api.slack.com/tools/block-kit-builder?template=1
    Search for Poll after opening app templates.

    For the avatar picture,
    You need to use https://api.slack.com/methods/users.info to get image url.
    For formatting,
    This is the block you are interested in:

    {
                "type": "context",
                "elements": [
                    {
                        "type": "image",
                        "image_url": "https://api.slack.com/img/blocks/bkb_template_images/profile_1.png",
                        "alt_text": "Michael Scott"
                    },
                    {
                        "type": "image",
                        "image_url": "https://api.slack.com/img/blocks/bkb_template_images/profile_2.png",
                        "alt_text": "Dwight Schrute"
                    },
                    {
                        "type": "image",
                        "image_url": "https://api.slack.com/img/blocks/bkb_template_images/profile_3.png",
                        "alt_text": "Pam Beasely"
                    },
                    {
                        "type": "plain_text",
                        "emoji": true,
                        "text": "3 votes"
                    }
                ]
            }
    

    Screenshot

    enter image description here