### Example Block Kit Layout for a Task Bot Source: https://docs.slack.dev/block-kit This JSON structure represents a complex Block Kit layout used for a task management bot. It includes sections with markdown text, an image, a conversations select menu, and context information. Use this as a template for creating multi-part messages or modals. ```json [ { "type": "section", "text": { "type": "mrkdwn", "text": "Hey there 👋 I'm TaskBot. I'm here to help you create and manage tasks in Slack.\nThere are two ways to quickly create tasks:" } }, { "type": "section", "text": { "type": "mrkdwn", "text": "*1️⃣ Use the `/task` command*. Type `/task` followed by a short description of your tasks and I'll ask for a due date (if applicable). Try it out by using the `/task` command in this channel." } }, { "type": "section", "text": { "type": "mrkdwn", "text": "*2️⃣ Use the _Create a Task_ action.* If you want to create a task from a message, select `Create a Task` in a message's context menu. Try it out by selecting the _Create a Task_ action for this message (shown below)." } }, { "type": "image", "title": { "type": "plain_text", "text": "image1", "emoji": true }, "image_url": "https://api.slack.com/img/blocks/bkb_template_images/onboardingComplex.jpg", "alt_text": "image1" }, { "type": "section", "text": { "type": "mrkdwn", "text": "➡️ To start tracking your team's tasks, *add me to a channel* and I'll introduce myself. I'm usually added to a team or project channel. Type `/invite @TaskBot` from the channel or pick a channel on the right." }, "accessory": { "type": "conversations_select", "placeholder": { "type": "plain_text", "text": "Select a channel...", "emoji": true } } }, { "type": "divider" }, { "type": "context", "elements": [ { "type": "mrkdwn", "text": "👀 View all tasks with `/task list` ❓Get help at any time with `/task help` or type *help* in a DM with me" } ] } ] ``` -------------------------------- ### Text Styling in Rich Text Source: https://docs.slack.dev/block-kit/formatting-with-rich-text Apply styles like bold, italic, strike, or code to text elements within a rich_text_section. This example demonstrates bold styling. ```json { "type": "text", "text": "This is bold text.", "style": { "bold": true } } ``` -------------------------------- ### Create a Context Block Source: https://docs.slack.dev/block-kit/formatting-with-rich-text Use a context block for supplementary information. Text within context blocks can be mrkdwn or plain_text, but not rich text. ```json { "type": "context", "elements": [ { "type": "mrkdwn", "text": "Hello there! This is a weekly reminder of what you should be doing during onboarding." } ] } ``` -------------------------------- ### Create a Header Block Source: https://docs.slack.dev/block-kit/formatting-with-rich-text Use a header block for prominent titles in your message. The text type must be plain_text. ```json { "type": "header", "text": { "type": "plain_text", "text": "Onboarding Week 1" } } ``` -------------------------------- ### Input and Action Blocks for User Interaction Source: https://docs.slack.dev/block-kit/formatting-with-rich-text Use `input` and `actions` blocks to gather user input, such as a favorite quote, and provide a way to submit it. The `plain_text_input` element allows free-form text entry, and the `button` element triggers an action. ```json { "type": "input", "block_id": "quote_input_block", "element": { "type": "plain_text_input" }, "label": { "type": "plain_text", "text": ":envelope: Enter your favorite quote, to be shared with future hires like you:", "emoji": true } }, { "type": "actions", "block_id": "submit_button_action_block", "elements": [ { "type": "button", "text": { "type": "plain_text", "text": "Submit" }, "value": "submit", "action_id": "button_1" } ] } ``` -------------------------------- ### Stack Multiple Blocks for a Layout Source: https://docs.slack.dev/block-kit Combines multiple blocks into an array to create a complex visual layout. Blocks are ordered visually within the array. ```json [ { "type": "header", "text": { "type": "plain_text", "text": "New request" } }, { "type": "section", "fields": [ { "type": "mrkdwn", "text": "*Type:*\nPaid Time Off" }, { "type": "mrkdwn", "text": "*Created by:*\n" } ] }, { "type": "section", "fields": [ { "type": "mrkdwn", "text": "*When:*\nAug 10 - Aug 13" } ] }, { "type": "section", "text": { "type": "mrkdwn", "text": "" } } ] ``` -------------------------------- ### Create a Section Block with Accessory Image Source: https://docs.slack.dev/block-kit/formatting-with-rich-text Use a section block for main content, supporting markdown formatting and an accessory image. This block type does not support rich text. ```json { "type": "section", "text": { "type": "mrkdwn", "text": "*Welcome aboard!*\n :eye: :lips: :eye:\n\nHere are some things you should do in week 1.\n Of course, reach out to your manager with any questions." }, "accessory": { "type": "image", "image_url": "https://media.giphy.com/media/Ae7SI3LoPYj8Q/giphy.gif", "alt_text": "One of us" } } ``` -------------------------------- ### Rich Text Quote, Input, and Actions Blocks Source: https://docs.slack.dev/block-kit/formatting-with-rich-text This snippet shows how to construct a message with a rich text quote, an input field for user submission, and an actions block with a button. Use this to create interactive messages that display quotes and collect user input. ```json { "type": "rich_text", "elements": [ { "type": "rich_text_section", "elements": [ { "type": "emoji", "name": "speech_balloon" }, { "type": "text", "text": " Inspirational quote of the day", "style": { "bold": true } } ] }, { "type": "rich_text_quote", "elements": [ { "type": "text", "text": "Having no destination I am never lost. - Ikkyū." } ] } ] },{ "type": "input", "block_id": "quote_input_block", "element": { "type": "plain_text_input" }, "label": { "type": "plain_text", "text": ":envelope: Enter your favorite quote, to be shared with future hires like you:", "emoji": true } },{ "type": "actions", "block_id": "submit_button_action_block", "elements": [ { "type": "button", "text": { "type": "plain_text", "text": "Submit" }, "value": "submit", "action_id": "button_1" } ] } ``` -------------------------------- ### Define a Section Block Source: https://docs.slack.dev/block-kit Represents a single section block in Block Kit. Use this for text content, including mrkdwn formatting and links. ```json { "type": "section", "text": { "type": "mrkdwn", "text": "New Paid Time Off request from \n\n" } } ``` -------------------------------- ### Rich Text Block with Lists and Links Source: https://docs.slack.dev/block-kit/formatting-with-rich-text Use the `rich_text` block to structure content with various rich text elements like emojis, bold text, lists (bulleted and ordered), and links. This is useful for onboarding messages or detailed announcements. ```json { "type": "rich_text", "elements": [ { "type": "rich_text_section", "elements": [ { "type": "emoji", "name": "office" }, { "type": "text", "text": "\u00a0Company business", "style": { "bold": true } } ] }, { "type": "rich_text_list", "style": "bullet", "elements": [ { "type": "rich_text_section", "elements": [ { "type": "text", "text": "Fill out your W-2" } ] }, { "type": "rich_text_section", "elements": [ { "type": "text", "text": "Enroll in " }, { "type": "link", "text": "benefits", "url": "https://salesforcebenefits.com" } ] }, { "type": "rich_text_section", "elements": [ { "type": "text", "text": "Fill out your Slack profile, including:" } ] } ] }, { "type": "rich_text_list", "style": "ordered", "indent": 1, "elements": [ { "type": "rich_text_section", "elements": [ { "type": "text", "text": "Time zone" } ] }, { "type": "rich_text_section", "elements": [ { "type": "text", "text": "Pronouns" } ] } ] } ] } ``` -------------------------------- ### Create Rich Text Lists Source: https://docs.slack.dev/block-kit/formatting-with-rich-text Use `rich_text_list` to create bulleted or ordered lists. Nested lists can be achieved by increasing the `indent` property. ```json { "type": "rich_text", "elements": [ { "type": "rich_text_section", "elements": [ { "type": "emoji", "name": "office" }, { "type": "text", "text": " Company business", "style": { "bold": true } } ] }, { "type": "rich_text_list", "style": "bullet", "elements": [ { "type": "rich_text_section", "elements": [ { "type": "text", "text": "Fill out your W-2" } ] }, { "type": "rich_text_section", "elements": [ { "type": "text", "text": "Enroll in " }, { "type": "link", "text": "benefits", "url": "https://salesforcebenefits.com" } ] }, { "type": "rich_text_section", "elements": [ { "type": "text", "text": "Fill out your Slack profile, including:" } ] } ] }, { "type": "rich_text_list", "style": "ordered", "indent": 1, "elements": [ { "type": "rich_text_section", "elements": [ { "type": "text", "text": "Time zone" } ] }, { "type": "rich_text_section", "elements": [ { "type": "text", "text": "Pronouns" } ] } ] } ]} ``` -------------------------------- ### Format Rich Text with Links in a List Source: https://docs.slack.dev/block-kit/formatting-with-rich-text Use `rich_text_list` with `rich_text_section` elements to create bulleted lists. Links can be applied to the entire text of a list item using the `link` element's `text` property. ```json { "type": "rich_text", "elements": [ { "type": "rich_text_section", "elements": [ { "type": "emoji", "name": "green_book" }, { "type": "text", "text": " Read about our culture", "style": { "bold": true } } ] }, { "type": "rich_text_list", "style": "bullet", "elements": [ { "type": "rich_text_section", "elements": [ { "type": "link", "text": "Four tips for building a digital first culture", "url": "https://slack.com/blog/collaboration/four-tips-build-digital-first-culture" } ] }, { "type": "rich_text_section", "elements": [ { "type": "link", "text": "6 simple ways to foster a positive hybrid work environment", "url": "https://slack.com/blog/collaboration/ways-foster-positive-work-environment" } ] } ] } ] } ``` -------------------------------- ### Divider Block for Visual Separation Source: https://docs.slack.dev/block-kit/formatting-with-rich-text Use the divider block to create a horizontal line, visually separating content within a Slack message. ```json { "type": "divider" } ``` -------------------------------- ### Add Button Element to Section Block Source: https://docs.slack.dev/block-kit Use this JSON structure to include a button element as an accessory within a section block. This allows users to interact with your message by clicking the button. ```json { "blocks": [ { "type": "section", "text": { "type": "mrkdwn", "text": "This is a section block with a button." }, "accessory": { "type": "button", "text": { "type": "plain_text", "text": "Click Me", "emoji": true }, "value": "click_me_123", "action_id": "button-action" } } ] } ``` -------------------------------- ### Rich Text Section with Emoji and Text Source: https://docs.slack.dev/block-kit/formatting-with-rich-text A rich_text_section allows for multiple elements, such as emojis and text, to appear on the same line within a rich_text block. Elements can be styled individually. ```json { "type": "rich_text_section", "elements": [ { "type": "emoji", "emoji": ":smile:" }, { "type": "text", "text": "Hello world" } ] } ``` -------------------------------- ### Rich Text Block for Culture and Quotes Source: https://docs.slack.dev/block-kit/formatting-with-rich-text Utilize `rich_text` blocks to share links to articles about company culture or to display inspirational quotes. This block supports rich text elements like emojis, bold text, links, and quotes. ```json { "type": "rich_text", "elements": [ { "type": "rich_text_section", "elements": [ { "type": "emoji", "name": "green_book" }, { "type": "text", "text": "\u00a0Read about our culture", "style": { "bold": true } } ] }, { "type": "rich_text_list", "style": "bullet", "elements": [ { "type": "rich_text_section", "elements": [ { "type": "link", "text": "Four tips for building a digital first culture", "url": "https://slack.com/blog/collaboration/four-tips-build-digital-first-culture" } ] }, { "type": "rich_text_section", "elements": [ { "type": "link", "text": "6 simple ways to foster a positive hybrid work environment", "url": "https://slack.com/blog/collaboration/ways-foster-positive-work-environment" } ] } ] } ] }, { "type": "divider" }, { "type": "rich_text", "elements": [ { "type": "rich_text_section", "elements": [ { "type": "emoji", "name": "speech_balloon" }, { "type": "text", "text": "\u00a0Inspirational quote of the day", "style": { "bold": true } } ] }, { "type": "rich_text_quote", "elements": [ { "type": "text", "text": "Having no destination I am never lost. - Ikkyū." } ] } ] } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.