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.

Compose Meaningful Messages

Make It More Than Just Hello

After reviewing how the app currently functions, you sit down with the onboarding team to discuss the user flow. This is what came out of the meeting.

  • The user heads to the welcome channel and posts, “onboard me”.
  • The app sends onboarding instructions in a private message.
  • The user then confirms that they’ve gone through the onboarding material by clicking a button.
  • The app posts back into the welcome channel that they’ve been successfully onboarded.

It’s meaningful. It’s automated. And the team can track successful onboarding via the welcome channel. Let’s make it a reality.

Right now, you have the app listening for “hello” and responding with a simple block message. It needs to be about onboarding. Let’s get to work.

  1. If you don’t have it open, navigate to your project in Glitch.
    1. Sign in.
    2. Click Dashboard.
    3. Select your project.
  2. Click app.js. At the end of the onboarding flow, your app needs to remember to post to the welcome channel. In order to do that, you need to make that channel a constant.
  3. At the top of your code, locate const { App } = require(“@slack/bolt”);. Add a return line under it.
  4. On the open line, enter, let channelID = ""; this enables your app to remember the channel ID when it’s declared, and reuse it for multiple listeners. Remember from building your app, lisenters “listen” for messages or actions, like a button click, and do what you coded them to do.
    code with let channelID = “”, constant included on line 3 highlighted by an orange box.
  5. Now, locate the code comment for your first listener // Message listener function called for messages containing "hello".
  6. Above it, add 3 to 4 lines to give you space for new code, you can preserve the Hello function for now and save it for reference if you need it.
  7. Then, above your hello listener, add a code comment for the new code you’ll be adding, // Message listener function called for messages containing "onboard me" This is good context to have, you want the app to respond to team members with the declared intention for onboarding. And for anyone reviewing the app’s code, it’s a clear indication of what this listener is all about.
  8. Under the code comment you just added, let’s add the following code. To quickly copy the code to your clipboard, you can click Copy at the top right of the code block. If Glitch logs an error, that’s OK. It’ll resolve when you add the next portion of code after this.
    app.message(/onboard me/i, async ({ client, message, say }) => {
      channelID = message.channel;
      let userID = message.user;
      //Respond in channel
      await say({
        text: "Let's get you onboarded!",
        blocks: [
        {
          type: "section",
          text: {
            type: "mrkdwn",
            text: `:wave: hey <@${message.user}> , let's get you onboarded :clipboard: Check for a private message from me (hint: it's in the Apps section :wink:).`,
            },
          },
        ],
      });
    Now you have the “onboard me” listener with a simple message block. Notice a few things. The channel ID is set to channel where the “onboard me” message is posted (1), in this case #welcome-new-team-members. You’ve added accessibility text “Let’s get you onboarded!” for the Activity section of Slack (2). The new onboarding message is a section block, with markdown text telling the new team member where to find resources (3).
    code as indicated above, with each section called out with white numbers in red circles.
    The app is already more powerful and the communication more meaningful. Let’s keep going!
  9. Underneath the code you just added, add the following.
  //Respond in private app message, multi-layered blocks
  await client.chat.postMessage({
    channel: userID,
    user: userID,
    text: "Here are the onboarding resources!",
    blocks: [
      {
        type: "divider",
      },
      {
        type: "context",
        elements: [
          {
            type: "plain_text",
            text: "Follow these steps :clipboard: for onboarding, then click Done.",
            emoji: true,
          },
        ],
      },
      {
        type: "divider",
      },
      {
        type: "section",
        text: {
          type: "plain_text",
          text: "Onboarding is as simple as 1-2-3.",
          emoji: true,
        },
      },
      {
        type: "section",
        text: {
          type: "mrkdwn",
          text: ":one: Click <https://trailhead.salesforce.com/content/learn/modules/slack-etiquette-and-productivity|here> to learn the in's and out's of Slack etiquette.",
        },
      },
      {
        type: "section",
        text: {
          type: "mrkdwn",
          text: ":two: Update your <https://slack.com/help/articles/204092246-Edit-your-profile|profile> to let people know how to collaborate with you.",
        },
      },
      {
        type: "section",
        text: {
          type: "mrkdwn",
          text: ":three: Click this button to confirm you've been onboarded.",
        },
        accessory: {
          type: "button",
          text: {
            type: "plain_text",
            text: "Done",
            emoji: true,
          },
          value: "done",
          action_id: "click_done",
        },
      },
    ],
  });
});

OK. This one is hefty. Let’s break it down a little bit. You have a second post, which is a private message to the new team member, as indicated by the channel and user userID (1). The block contains dividers (2) to highlight context (3). Then you have several sections that help the new team member follow the onboarding steps (4). You’ve included number emoji, instructions, and helpful links. You’ve also included the button accessory (5).

code as indicated above, with white numbers 1, 2, and 3 in orange circles calling out their corresponding parts of code.

code as indicated above, with white numbers 4 and 5 in red circles calling out their corresponding parts of code.

Your block messages are set and the app should run. But right now, the button you’ve included in the onboarding resource message is just a button. Let’s make it do something.

Make the Button Work

You have a meaningful onboarding process that’s simple and easy to follow. Now all that’s left to do is ensure new team members can close the process. The button needs to work!

  1. Under the new code you created, add the action listener.
app.action("click_done", async ({ ack, body, client, say }) => {
  // Acknowledge action request before anything else
  await ack();

  console.log(`Replying to ${channelID}`);
  let userID = body.user.id;

  // Respond to button with a confirmation post
  await client.chat.postMessage({
    channel: channelID,
    user: userID,
    text: `<@${userID}> has been onboarded! :tada:`,
  });
});

This is a significantly smaller bit of code than what you added previously, but it’s doing a lot. It listens for the button action and acknowledges it (1). It ensures the app responds in channel instead of direct message (2). It sends confirmation to the channel that the new team member has been onboarded (3).

code as indicated above, with white numbers 1, 2, and 3 in red circles, calling out their corresponding parts of the code.

Now, you’re ready to test!

Test the Onboarding Process

Let’s see the app in action.

  1. Head back to Slack.
  2. Go to #welcome-new-team-members.
  3. Post onboard me. The app should respond, guiding the new team member to a private message with details.
    Slack conversation with New Team Member posting onboard me and Say Hello app responding with a wave emoji and directing the new team member to check for a private message.
  4. Next, find the private message from the Say Hello app. Just as Say Hello mentioned, you find it in the Apps section.
    Private message from Say Hello app, with the divider containing a context message, and a three step onboarding message with emojis, hyperlinks, and a button that says Done.
  5. Click Done. A new message gets posted in #welcome-new-team-members.
  6. Head back to #welcome-new-team-members to find the onboarding completion message.
    Say Hello app posts @New Team Member has been onboarded! with a party popper emoji.

Clean Up Your App (Optional)

Now that your onboarding app is built, notice that it’s similar to the simple app you built in Develop a Slack App with Bolt. The user posts a message in channel | the app responds | the user interacts with a button | the app acknowledges and posts.

  1. Head back to your project in Glitch.
  2. Now that you’re done with the simple app, go ahead and remove it.
    1. Delete the listener for /hello/i and its response.
    2. Delete the listener for the hello button click and its response.
  3. Keep the log code that tells you that the app is running properly:
(async () => {
  // Global middleware to log all incoming requests once the app starts
  app.use(async ({ body, next }) => {
    console.log("⚡️ Received request:", body); //Log app status and the incoming request
    await next(); //Pass to next middleware or listener
  });

  // Start your app
  await app.start(process.env.PORT || 3000);

  console.log("⚡️ Bolt app is running!");
})();

This code is important to indicate that all is well with your app. If you want to make changes to your app—add different messages with Block Kit for instance—this critical bit of code will log that your app is still functional.

Go Further with Block Kit Builder

Now that you’re more familiar with Block Kit, the types of blocks, and block elements, go further with Block Kit Builder.

Block Kit Builder lets you choose from blocks in the left pane (1), then drag, drop, and rearrange them to design and preview Block Kit layouts in the center pane (2). Once you’ve built a Block Kit message to your liking, you can copy the JSON array needed for your Slack app (3), or send it directly to Slack with the click of a button (4). 

Block Kit Builder interface with each section numbered as described above.

Note

We used Block Kit Builder to craft the messages you find in this project!

Block Kit Builder also has template messages that you can use as a starting point for such things as approvals, polls, onboarding, and newsletters.

Alternatively you can use the block reference guide to manually generate a complete block array.

What’s next? Try Block Kit builder out and see what you can come up with. After you check your work below, play around with modifications, or build an entirely new app to show off to your team.

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