Skip to main content
Join us at TDX in San Francisco or on Salesforce+ on March 5-6 for the Developer Conference for the AI Agent Era. Register now.

Bring the Say Hello App to Life

Learning Objectives

In this project, you’ll:

  • Build meaningful messages with Block Kit.
  • Add interactivity for a simple onboarding process.
  • Deploy a meaningful onboarding app.

Before You Start

Before you complete any steps in this project, make sure you complete the hands-on challenges in Develop a Slack App with Bolt using the same Slack sandbox. You won’t be able to complete the hands-on challenges here if you don’t complete that badge first.

Use Block Kit for Meaningful Messages

In Develop a Slack App with Bolt, you built a basic Slack app for your company’s employee onboarding team. Now, the team wants to deliver meaningful interactions in the app that engage users and help them move through the onboarding process. This is where Block Kit comes in.

Block Kit is a UI framework that helps you create more interactive and captivating messages within Slack. It offers a balance of control and flexibility when building experiences in Slack. Customize the order and appearance of information and guide users by composing, updating, sequencing, and stacking blocks—reusable components that work almost everywhere in Slack.

And guess what—the app you built in Develop a Slack App with Bolt already has a block. Let’s take a look.

Review Your Small But Mighty Block

While we’re just reviewing your app at the moment, you can log in to Glitch to follow along.

  1. Head to Glitch.
  2. Click Dashboard.
  3. Select the app you created in Develop a Slack App with Bolt. Its name should be in three-word format, for example breezy-ringed-kitten.
  4. Click app.js.

When you built your app to listen for when a user posts “hello” (1), you prompt the app to post a response. That response is made up of a block (2).

Slack app code with listener and block called out with numbers as mentioned in the body content.

Explore Block Types

There are several block types. Yours is a section, which combines several elements like markdown text with a wave emoji and a button that says Click Me. As you and the team think up how to bring this app to life, you review the other types at your disposal.

Block type

What it does

Where it’s available

Actions

Holds interactive elements.

Modals | Messages | Home tab

Context

Displays message context, which can include both images and text.

Modals | Messages | Home tab

Divider

Splits different blocks inside a message.

Modals | Messages | Home tab

File

Displays a remote file.

Messages

Header

Displays a plain-text block in a larger, bold font.

Modals | Messages | Home tab

Image

Holds images.

Modals | Messages | Home tab

Input

Collects information from users.

Modals | Messages | Home tab

Section

Combines block elements. 

Modals | Messages | Home tab

Now that you’ve identified how to lay out a message with various block types, you can find ways to upgrade your app’s interactivity using block elements.

Add Block Elements for More Interactivity 

Block elements are visual components that exist within section, context, input, and actions layout blocks. They include components like buttons, date pickers, multiselect menus, overflow menus, plain-text input, radio buttons, checkboxes, select menus, and time pickers. They can collect information from a user, trigger a link, or even kick off a complex workflow.

After talking with the team, it’s agreed that the app should be designed with the following principles.

  • Keep it simple.
  • Minimal clicks.
  • Onboard in minutes.

Simple doesn’t mean easy. With that in mind, it’s time to get to work.

Connect Your Slack Sandbox

First, let’s make sure your Slack sandbox is connected and you have the app you created in the Develop a Slack App with Bolt project.

  1. Scroll to the bottom of this page.
    1. If your playground is not connected, go ahead and follow the remaining steps.
    2. If it is still connected, go ahead and click Verify step.
  2. Click Connect Slack Playground.
  3. Enter your Slack developer program credentials.
  4. Click Sign in. Slack emails you a one-time code.
  5. Retrieve the code and enter it to finish connecting your sandbox.
  6. After a moment, you’ll be taken back to Trailhead. Scroll to the bottom of the page to make your sandbox has been provisioned and connected.
  7. Click Launch to open your playground in a new tab.

Keep your sandbox open. In the next step, you use block kit to add more meaningful interactions and test your messages.

Verify Step

+100 points

You’ll be completing this project in your own Slack Playground.

Share your Trailhead feedback over on Salesforce Help.

We'd love to hear about your experience with Trailhead - you can now access the new feedback form anytime from the Salesforce Help site.

Learn More Continue to Share Feedback