Block Kits & Modals - Tray.ai Documentation

IMPORTANT!: Before you create your Slack Block Kit make sure you have your Slack App set up correctly. If you don't already have a Slack App check out our App Creation section above.

USER TIP: Your may not need to use the Slack Block Kit:

• If you wish to simply share certain information over Slack using modals it is simpler to use the Slack connector itself.
• If you wish to work with interactive modals that allow users to respond, you need to use an HTTP client connector instead of the Slack connector.

Slack Modals are a way to present interactive elements and rich content directly within Slack's response to a slash command. They allow you to create custom responses using "blocks" which are Slack sections containing text, buttons, images, and other interactive components.
Some suggestions of when you might want to use Slack Modals are presented below:

• Interactive Responses: When you want to provide users with interactive options as a response to a slash command, Slash Block Kits are ideal. For example, you can use buttons to trigger actions, select menus for choices, or date pickers for scheduling tasks.
• Visual Presentation: Slash Block Kits let you present information in a structured and visually appealing manner. This is especially useful when displaying data, reports, or survey results in a more user-friendly format.
• Multi-Step Workflows: When your slash command requires users to go through multiple steps or input data, Slash Block Kits can guide them through the process smoothly, step by step.

Slack Block Kits help you create your Slack Modal via the use of a visual UI tool which updates in real time. It has previously structured elements and templates to choose from which speed up the creation process.

Create your Modal

Set up your Modal

1. Head to the Block Kit Builder dashboard.

2. Select a Surface you would like to customize from the Preview Menu. Since we are working on a Modal, we have selected Modal Preview.

3. Create a modal using building blocks such as buttons, images, text, etc., available. You can view your Surface Preview in the centre panel. Note that a JSON payload is auto-generated for you at the same time.

4. Send this modal payload to Slack using the Send to Slack button.

5. You can now preview your modal in slack using the Open Modal button.

Decide which connector to use

IMPORTANT!: If you wish to use interactive modals (which allow users to respond) you will have to use the HTTP client instead of the Slack connector.

Interactive Modal

Building an app using the Slack Block Kit automatically generates a JSON object. This means you can copy and paste this object directly into a HTTP connector should you choose to do so. For example we would use the HTTP connector to run the following POST https://slack.com/api/views.open call to open a modal in Slack whenever a /survey command was triggered:

• URL: https://slack.com/api/views.open
• Header:
  • Key: Content-Type
  • Value: application/json; charset=utf-8
• Body Type: raw
  • raw: Paste the JSON object for your modal here!

For a better understanding on how to work with modals using the HTTP client connector refer our more detailed template.

Non Interactive Modal

When you use Slack's Send message operation with modals you need only copy and paste the JSON payload into the Raw blocks section. This way you can send the modal as a message.